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

就是我用uni-app写的h5微信公众号的页面,然后里面用到了video 组件, 然后有些手机就是全屏然后不会自动横屏旋转,有些手机又可以,请问该如何解决全屏自动横屏问题
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
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>
```
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报