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

增强功能

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

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

配置说明

wap2app默认已集成了如上的增强功能，开发者无需配置。

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

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

  1. "easyConfig":{  
  2.     "video":{  
  3.         "controls":false /*关闭手势拖动功能,默认为true*/  
  4.     }  
  5. }

注意

  • 手势拖动功能仅在HBuilder-alpha版打包的安卓应用生效，正式版下个版本更新生效。
  • 如果是使用的h5默认的video元素进行全屏播放，点击video默认的全屏按钮控件，那么可能导致全屏时，手势功能生效但改变的进度无法显示，建议换成div全屏，网上有很多开源的h5播放器，集成一下即可。
  • 如果是视频是在iframe里面，则ios可能出现全屏后不能横屏。解决办法如下： 
  1. //如果不是同源的页面，暂时无法解决  
  2. //如果是同源的页面，用户需要找到iframe里面的video元素，并对其进行如下操作  
  3. var videoElem = document.querySelector('video'); //video元素  
  4. // video元素开始全屏  
  5. videoElem.addEventListener('webkitbeginfullscreen', function() {//目的是监听video的全屏事件，改变手机的横竖屏  
  6.     plus.screen.lockOrientation('landscape');  
  7. });  
  8. // video元素全屏结束  
  9. videoElem.addEventListener('webkitendfullscreen', function() {  
  10.     plus.screen.lockOrientation('portrait');  
  11.     console.log('video元素全屏结束');  
  12. });
  • 如果是视频是在iframe里面，则滑动功能不生效，暂时该问题还未解决。
  • 如果原站的视屏含有拖动功能，可配置"controls":false，关闭wap2app的拖动，也对原站进行判断，在5+环境下不启用原站的滑动功能。
  • 开发中发现全屏功能和拖动功能不起作用，且不是以上几点问题，那么检查wap2app版本是否大于等于3.9.4，不是的话尝试升级HBuilder-alpha最新版，确保wap2app版本大于等于3.9.4，升级完还有问题的话，可在论坛发帖提出（记得贴出测试流应用的二维码或写明网址）。