视频增强（全屏播放、拖动进度、控制声音等） - wap2app教程

分类：wap2app

增强功能

wap2app增强了HTML5视频播放功能，在全屏播放界面，增加了如下控制功能：

点击全屏按钮，实现横屏播放；
横向拖动：改变视频播放进度
左侧纵向拖动：改变视频亮度
右侧纵向拖动：改变播放声音

配置说明

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，升级完还有问题的话，可在论坛发帖提出（记得贴出测试流应用的二维码或写明网址）。

更新：5+引擎已经支持X5，如果在打包时选择X5引擎，则视频播放将被X5的原生播放接管，详见：https://ask.dcloud.net.cn/article/36806