如何使用Video组件实现横屏全屏播放,竖屏时退出全屏?
通过监听窗口的大小变化可以实现横屏自动全屏播放,但全屏播放后,竖屏就没法触发onWindowResize监听了。请问如何实现竖屏时退出全屏并回到竖屏模式?该用什么思路来解决?
我想要的效果就像《微信游戏直播》的小程序一样(我的是点播)。请各位大神指点迷津!
代码基于uni-app写的,不要看着奇怪啊!
wxml:
<video id="myVideo" src="video.mp4" enable-danmu danmu-btn controls poster="https://.../poster.png"></video> |
js:
onShow() { wx.onWindowResize((res) => { console.log('onWindowResize:', res); this.isLandscape = res.deviceOrientation === 'landscape'; if (this.isLandscape){ if (!this.inPlay){ this.videoContext.play(); } this.fullScreen(); }else{ this.exitFullScreen(); } }); },onReady: function(res) { this.videoContext = wx.createVideoContext('myVideo') }, |
pages.json:
// 针对视频播放页面设置了支持横屏
"pageOrientation": "auto"
|
