学习路上的小刘 2021-09-13 15:37 采纳率: 66.7%
浏览 64
已结题

就是我用uni-app写的h5微信公众号的页面,然后里面用到了video 组件, 然后有些手机就是全屏然后不会自动横屏旋转,有些手机又可以,请问该如何解决全屏自动横屏问题

就是我用uni-app写的h5微信公众号的页面,然后里面用到了video 组件, 然后有些手机就是全屏然后不会自动横屏旋转,有些手机又可以,请问该如何解决全屏自动横屏问题

  • 写回答

3条回答 默认 最新

  • 斤斤丶 2021-09-13 16:36
    关注
            </div>
            <script type="text/javascript">
                /**
                 * 视频全屏播放旋转目前的逻辑
                 * 视频全屏,即锁定屏幕为横屏。
                 * 视频恢复,则解除屏幕方向的锁定。
                 * 具体的切换,根据自己的实际业务做相应的操作。
                 */
                // Android平台的视频全屏旋转
                var fullScreenOfAndroid = function() {
                    if(true) {
                        // 最新5+API的支持
                        var self = plus.webview.currentWebview();
                        self.setStyle({
                            videoFullscreen: 'landscape'
                        });
                    } else {
                        // 如果暂未更新sdk,可以先使用差量升级等方式,做出兼容处理;
                        // 旧版本下的兼容处理
                        document.addEventListener('webkitfullscreenchange', function() {
                            var el = document.webkitFullscreenElement; //获取全屏元素
                            if(el) {
                                plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
                            } else {
                                plus.screen.unlockOrientation(); //解除屏幕方向的锁定
                            }
                        });
     
                    }
                };
                // iOS平台的视频全屏旋转
                var fullScreenOfIos = function(videoElem) {
                    // 监听的事件与Android平台有很大区别
                    videoElem.addEventListener('webkitbeginfullscreen', function() {
                        plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
                    });
                    videoElem.addEventListener('webkitendfullscreen', function() {
                        plus.screen.unlockOrientation(); //解除屏幕方向的锁定
                    });
                };
                // 涉及到5+API的内容,均在plusready事件后调用;
                document.addEventListener('plusready', function() {
                    var osName = plus.os.name;
                    if(osName === 'Android') {
                        fullScreenOfAndroid();
                    } else if(osName === 'iOS') {
                        var videoElem = document.getElementById('video');
                        fullScreenOfIos(videoElem);
                    }
                });
            </script>
    
    

    ```

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月24日
  • 已采纳回答 12月24日
  • 创建了问题 9月13日

悬赏问题

  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。
  • ¥15 各位 帮我看看如何写代码,打出来的图形要和如下图呈现的一样,急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题,请各位专家解答!
  • ¥30 vue+element根据数据循环生成多个table,如何实现最后一列 平均分合并
  • ¥20 pcf8563时钟芯片不启振
  • ¥20 pip2.40更新pip2.43时报错
  • ¥15 换yum源但仍然用不了httpd