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

需求明确

\n

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

思路

\n

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

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

具体实现

\n

Android

\n

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

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

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

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

iOS

\n

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

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

相关API

\n

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

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

\n

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

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

源码

\n

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


6 分享 关注
瞳player lhyh vaeke 1542108461@qq.com Williebwl AAAda
1145957876@qq.com

1145957876@qq.com 回复 付憷

怎么回去 解决了吗?
0 赞 2018-10-24 16:20
yinyue.0303@qq.com

yinyue.0303@qq.com 回复 DCloud_MUI_Neil

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

DCloud_MUI_Neil 回复 peakyu@foxmail.com

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

peakyu@foxmail.com

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

黄X旭

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

黄X旭

支持一下
0 赞 2017-06-23 10:46
付憷

付憷 回复 tutuhuai

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

wx_1214@126.com

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

tutuhuai

ios那个 没效果

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

121380608@qq.com

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

风流搞技术

横屏键盘好像有问题
0 赞 2016-12-27 19:17
瞳player

瞳player

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

要回复文章请先登录注册