DCloud_UNI_Trust
DCloud_UNI_Trust
  • 发布:2016-12-20 13:13
  • 更新:2019-01-30 13:57
  • 阅读:11986

【示例】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工程中,运行即可。

7 关注 分享
瞳player lhyh vaeke 1542108461@qq.com Williebwl AAAda 山讯科技

要回复文章请先登录注册

山讯科技

山讯科技

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

wicos@wicos.cn

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

1145957876@qq.com

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

yinyue.0303@qq.com

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

DCloud_UNI_Neil

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

peakyu@foxmail.com

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

黄X旭

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

黄X旭

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

付憷

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

wx_1214@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
121380608@qq.com

121380608@qq.com

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

风流搞技术

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

瞳player

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