视频全屏播放 - wap2app教程

需求明确

实现页面中video播放器点击全屏按钮时横屏播放。退出全屏时，切换为竖屏。
在全屏时横向拖动条改变播放进度，纵向拖动改变亮度，声音。

配置说明

点击全屏按钮实现横竖屏功能，wap2app框架已集成不需开发者额外配置。

全屏时是否根据手势改变进度的功能，wap2app提供sitemap配置，开发者可根据需求是否启用，默认为true。

手势功能在sitmap.json里面进行如下配置（在global节点下配置，应用所有的webview均生效；在指定的webview里面配置，只在该webview里面生效）：

"easyConfig":{  
    "video":{  
        "controls":false /*关闭手势拖动功能,默认为true*/  
    }  
}

注意

• 手势拖动功能仅在HBuilder-alpha版打包的安卓应用生效，正式版下个版本更新生效。
• 如果是使用的h5默认的video元素进行全屏播放，点击video默认的全屏按钮控件，那么可能导致全屏时，手势功能生效但改变的进度无法显示，建议换成div全屏，网上有很多开源的h5播放器，集成一下即可。
• 如果是视频是在iframe里面，则ios可能出现全屏后不能横屏。解决办法如下：

//如果不是同源的页面，暂时无法解决  
//如果是同源的页面，用户需要找到iframe里面的video元素，并对其进行如下操作  
var videoElem = document.querySelector('video'); //video元素  
// video元素开始全屏  
videoElem.addEventListener('webkitbeginfullscreen', function() {//目的是监听video的全屏事件，改变手机的横竖屏  
    plus.screen.lockOrientation('landscape');  
});  
// video元素全屏结束  
videoElem.addEventListener('webkitendfullscreen', function() {  
    plus.screen.lockOrientation('portrait');  
    console.log('video元素全屏结束');  
});

• 如果是视频是在iframe里面，则滑动功能不生效，暂时该问题还未解决。
• 如果原站的视屏含有拖动功能，可配置"controls":false，关闭wap2app的拖动，也对原站进行判断，在5+环境下不启用原站的滑动功能。
• 开发中发现全屏功能和拖动功能不起作用，且不是以上几点问题，那么检查wap2app版本是否大于等于3.9.4，不是的话尝试升级HBuilder-alpha最新版，确保wap2app版本大于等于3.9.4，升级完还有问题的话，可在论坛发帖提出（记得贴出测试流应用的二维码或写明网址）。