Trust
Trust
  • 发布:2016-12-20 13:13
  • 更新:2020-06-04 13:47
  • 阅读:31877

【示例】Android及iOS平台下视频全屏播放时自动横屏的实现

分类:HTML5+

需求明确

视频全屏播放时,屏幕自动旋转为横屏。
此类功能,手机内置浏览器以及UC浏览器等,均有不同的实现。
若需要更多功能的定制,需自行扩展插件。

思路

首先,明确不同平台下的全屏事件,也就是所需监听的全屏变化的事件。
Android和iOS平台下,事件存在较大的差异。

其次,根据实际业务需求,对屏幕方向做出相应的调整。
此例中的处理方式为:
视频全屏,即锁定屏幕为横屏。
视频恢复,则解除屏幕方向的锁定。

具体实现

Android

1.常规处理
监听webkitfullscreenchange事件,并且读取全屏元素,对屏幕方向做出调整。

document.addEventListener('webkitfullscreenchange', function() {  
    var el = document.webkitFullscreenElement; //获取全屏元素  
    if(el) {  
        plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
    } else {  
        plus.screen.unlockOrientation(); //解除屏幕方向的锁定  
    }  
});

2.WebviewStyles.videoFullscreen
HBuilder7.6.3.201612161809更新日志的App项中:
“Android平台优化视频全屏旋转效果,增加WebviewStyles.videoFullscreen控制”
意味着我们可以使用更加方便和性能更高的方法实现该功能

var self = plus.webview.currentWebview();  
self.setStyle({  
    videoFullscreen: 'landscape'  
});

iOS

监听video元素的webkitbeginfullscreen与webkitendfullscreen事件,在全屏开始和结束时,对屏幕方向做相应的调整。

// 监听的事件与Android平台有很大区别  
videoElem.addEventListener('webkitbeginfullscreen', function() {  
    plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
});  
videoElem.addEventListener('webkitendfullscreen', function() {  
//  plus.screen.unlockOrientation(); //解除屏幕方向的锁定,但是不一定是竖屏;  
    plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏  
});

相关API

设备屏幕信息
原生窗口设置参数的对象
HTML 5+ SDK 更新日志

涉及全屏播放并且需要打包成原生安装包的开发者请注意:

全屏播放涉及屏幕旋转,在iOS上实现此效果则需要在manifest.json中plus -> distribute -> orientation 节点配置应用支持的方向,默认是只支持竖屏正方向。

"orientation": [  
                "portrait-primary"  
            ],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/

源码

附上源码,解压后放在App工程中,运行即可。

8 关注 分享
猫猫猫猫 lhyh vaeke 1***@qq.com Williebwl AAAda 山讯科技 3***@qq.com

要回复文章请先登录注册

言浅情深

言浅情深

回复 付楚 :
请问解决了么老哥
2020-06-04 13:47
万能的李大少

万能的李大少

回复 菜鸡啊啊啊啊 :
video.js有个生命周期可以监听屏幕改变,判断屏幕改变锁死屏幕方向就好了,如何你用的是video.js再回复我我给你代码
2020-04-14 14:31
菜鸡啊啊啊啊

菜鸡啊啊啊啊

回复 万能的李大少 :
你好,请问你是怎么解决ios全屏横屏播放的
2020-04-10 17:37
万能的李大少

万能的李大少

回复 1***@qq.com :
我用的是video.js,不知道你用的是什么,同时使用video.js和mui.jstouch事件会重复执行两次,所以就在横屏后会立即切回竖屏,解决是mui("#my-video").on("touchstart",".vjs-control",function(){
return false;
});
2020-03-19 14:59
1***@qq.com

1***@qq.com

回复 w***@wicos.cn :
为什么我上传的是竖屏视频,然后点击全屏的话,会横竖屏一直切来切去,不知道你们会不会有这个情况,是什么问题呢
2020-03-12 14:25
1***@qq.com

1***@qq.com

回复 万能的李大少 :
为什么我上传的是竖屏视频,然后点击全屏的话,会横竖屏一直切来切去,不知道你们会不会有这个情况,是什么问题呢
2020-03-12 14:19
1***@qq.com

1***@qq.com

为什么我上传的是竖屏视频,然后点击全屏的话,会横竖屏一直切来切去,不知道你们会不会有这个情况,是什么问题呢
2020-03-12 14:18
万能的李大少

万能的李大少

回复 3***@qq.com :
没解决,一全屏就被系统接管了,不过我全屏状态让它直接横屏播放了,不是竖屏了
2020-01-08 09:13
3***@qq.com

3***@qq.com

回复 万能的李大少 :
我和你一样的问题,全屏ios自带的播放器就接管了,你解决了吗?
2019-12-30 14:28
万能的李大少

万能的李大少

我使用的是video.js,用来播放视频,安卓的点击全屏可以直接横屏播放了,但是苹果的不行啊,点击全屏后ios系统直接接管视频了,成了系统自带的播放器了,只是视频竖屏放大播放了,请问一下如何解决成为点击全屏直接横屏播放在ios中
2019-10-17 11:14