就是我用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>
```
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥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