收藏
回答

如何使用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"

}




最后一次编辑于  2019-09-11
回答关注问题邀请回答
收藏

2 个回答

  • Mr.Zhao
    Mr.Zhao
    2019-09-11

    https://www.2cto.com/kf/201802/724174.html

    2019-09-11
    有用 1
    回复 1
    • asun 🇨🇳 廖建山
      asun 🇨🇳 廖建山
      2019-09-11
      Iphone7P 测试了一下,左转会判断为横屏,右转不行
      2019-09-11
      回复
  • asun 🇨🇳 廖建山
    asun 🇨🇳 廖建山
    2019-09-12

    能用!关键代码如下

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


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

    2019-09-12
    有用
    回复
登录 后发表内容
问题标签