如何使用Video组件实现横屏全屏播放，竖屏时退出全屏？ - WXOPEN Club

通过监听窗口的大小变化可以实现横屏自动全屏播放，但全屏播放后，竖屏就没法触发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"

}

能用！关键代码如下

let Pitch = Math.atan2(y, z) * 180/Math.PI,

Roll = Math.atan2(-x, Math.sqrt(y*y+ z*z)) * 180/Math.PI;

主要判断Roll(绕Y轴旋转的角度)