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

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

要回复文章请先登录注册

w***@wicos.cn

w***@wicos.cn

回复 2***@qq.com :
没有解决,我使用原生的video的标签了
2019-08-31 15:31
2***@qq.com

2***@qq.com

回复 w***@wicos.cn :
请问下你这个问题解决了吗
2019-07-19 23:00
山讯科技

山讯科技

不错
2019-01-30 13:57
w***@wicos.cn

w***@wicos.cn

我使用的是这种方法
document.addEventListener('webkitfullscreenchange', function() {
var self = plus.webview.currentWebview();
self.setStyle({videoFullscreen: 'landscape'});
});
我的目的是:iframe视频全屏
目前的问题:使用此方法首次点击全屏时并不会变成“横屏全屏”,只有>=2次点击时才会变成横屏全屏。
目前的推断:应该是方法代码中的currentWebview的问题
不知道如何解决
2019-01-30 13:51
1***@qq.com

1***@qq.com

回复 付楚 :
怎么回去 解决了吗?
2018-10-24 16:20
y***@qq.com

y***@qq.com

回复 Neil_HL :
对!就是iframe第三方的视频不好解决。我用了全全屏整个iframe的代码,之后上面这段代码就管用了!但是有时候还不能使视频真正全屏
2018-04-20 22:07
Neil_HL

Neil_HL

回复 zzyuf97 :
没有按钮你不知道加一个···如果是使用iframe加载的第三方的视频,暂时没有好的解决办法
2018-04-20 11:45
zzyuf97

zzyuf97

wap2app视频播放时根本没有全屏按钮怎么办?
2018-01-09 00:27
黄X旭

黄X旭

我也打包之后不生效,是不是哪里要配置下
2017-06-26 16:23
黄X旭

黄X旭

支持一下
2017-06-23 10:46