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

【示例】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

要回复文章请先登录注册

付楚

付楚

回复 tutuhuai :
可以全屏、但是全屏了之后回不去了 。不知道什么原因 、你的解决了吗?
2017-06-06 18:24
w***@126.com

w***@126.com

DEMO里只有一个HTML文件,求DEMO
2017-05-03 18:54
tutuhuai

tutuhuai

ios那个 没效果

videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
});
videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.unlockOrientation(); //解除屏幕方向的锁定
});
2017-03-02 15:45
1***@qq.com

1***@qq.com

怎么打包后 不行呢
2017-02-23 19:28
风流搞技术

风流搞技术

横屏键盘好像有问题
2016-12-27 19:17
猫猫猫猫

猫猫猫猫

支持一下
2016-12-20 21:30