nearwmy@gmail.com
nearwmy@gmail.com
  • 发布:2017-11-24 12:12
  • 更新:2019-09-10 15:11
  • 阅读:12486

视频增强(全屏播放、拖动进度、控制声音等) - 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,升级完还有问题的话,可在论坛发帖提出(记得贴出测试流应用的二维码或写明网址)。
6 关注 分享
Trust 460430362@qq.com dzcms@qq.com topcore@qq.com it_xuelei@163.com vaeke

要回复文章请先登录注册

腾越

腾越

有没有不全屏的视频播放 IOS下会自动全屏,导致在视频上的html内容都消失掉
2019-09-10 15:11
vaeke

vaeke

“#如果是视频是在iframe里面,则滑动功能不生效,暂时该问题还未解决。#
这个问题可以解决吗?官方能是否能出像UC或者其他浏览器一样的播放器,然后预留接口自定义样式
现在很多的网页里面都有视频 使用wap2app做得app 亮度声音都没有办法拖动操作 每个手机webview也不同 体验差别很大
2019-01-21 21:31
liuper@126.com

liuper@126.com

付费求助解决这个问题QQ:550306604
2018-11-17 02:26
回梦無痕

回梦無痕

回复 streamer365@qq.com:
监听APP的切换后台事件,然后暂停视频。
2018-09-16 01:44
streamer365@qq.com

streamer365@qq.com

播放视频的时候,wap2app生成的APP会因为手机锁屏,但是声音还在后台播放。如何解决这个问题呢,请详细告诉解决办法,新手不胜感激!
2018-09-15 18:19
爱学

爱学

为什么在sitmap.json下添加代码会显示错:代码:"easyConfig":{
"video":{
"controls":false /*关闭手势拖动功能,默认为true*/
}
}
2018-09-09 11:41
599414006@qq.com

599414006@qq.com

Ddii
2018-08-02 16:48
599414006@qq.com

599414006@qq.com

Jdjddjdn
2018-08-02 16:48
rockyleen@qq.com

rockyleen@qq.com

回复 dzcms@qq.com:
解决了吗
2018-07-12 11:27
uniapp视频教程

uniapp视频教程

啥时候增加plus.video
2018-05-24 09:18
302979096@qq.com

302979096@qq.com

不行!
2018-04-23 02:42
nearwmy@gmail.com

nearwmy@gmail.com (作者)

回复 dzcms@qq.com:
ios上只要能找到video标签就可以监听到。安卓上直接通过setStyle的方法
2017-11-28 14:58
dzcms@qq.com

dzcms@qq.com

请问 腾讯视频的 iframe的链接 如何全屏
2017-11-28 08:24