微信小程序> 微信小程序video

微信小程序video

浏览量:7427 时间: 来源:weixin_34255793

 

1.video是原生组件
原生组件的层级是最高的,想要覆盖在video上,只能用cover-view 和 cover-image 组件,这2个可以无限嵌套。适用场景:给视频加标题:

小程序

 

2.检测video播放进度用bindtimeupdate:

这个是微信返回当前播放进度的接口。文档上说是每250ms调用一次,实际测试在ios上1s调用一次。
通过e.detail.currentTime可以拿到当前进度,单位:s。
关于这个问题,参见我的另一篇博客:https://www.cnblogs.com/xiaochongchong/p/9455083.html

这里提个问题,给你一段视频,给一组音频信息,音频信息里包含开始时间,音频的src。让你根据视频播放的进度播放音频,你会怎么做?
这是其实是配音场景,把视频和音频给同步起来。如果能固定250ms调用一次,这个问题就不大,但事实上,微信在各种系统上的实现方式有差异,并不保证250ms播放一次。
首先我们排除,在视频一开始就setTimeout到每个音频的这种方式,因为视频在播放的过程可能会缓冲,但setTimeout会依照设定的执行。
这个问题最好的解决方式,在bindtimeupdate里找到距离给定播放音频的当前视频时间,然后再setTimeout,这样即使视频缓存,播放时间最大的误差也不会超过bindtimeupdate调用的频率。
video暂停的时候还要清除setTimeout。部分代码:

bindPlayFunc:function(e){console.log(111);// bgM.obeyMuteSwitch = false;let palyTime = new Date().getTime();if(curMp3){console.log('seek:'+currentTime);curMp3.seek(currentTime);curMp3.play();} // if(!bgM.isPlayed){// }else{// }},timeUpdate:function(e){// if(bgM.paused){// bgM.seek(e.detail.currentTime);// bgM.play();// }this.data.dub.dub_json.forEach((arr,index)=>{//微信真机上播放完之后,第二遍播放获取不到durationif(!mp3Arr[index].dur && mp3Arr[index].duration){mp3Arr[index].dur = mp3Arr[index].duration;}const interval = 1000;if(mp3Arr[index] && mp3Arr[index].paused && arr.time - e.detail.currentTime*1000<=interval && arr.time>=e.detail.currentTime*1000){console.log('index:'+index);if(TimeTaskArr[index]){console.log('删除定时:'+index);clearTimeout(TimeTaskArr[index]);}TimeTaskArr[index] = setTimeout(()=>{mp3Arr.forEach((mp3)=>{mp3.pause();})console.log('定时播放:'+index);console.log('播放url:' + mp3Arr[index].src);mp3Arr[index].play();},arr.time - e.detail.currentTime*1000);}})

  

 

3.video组件可以通过wx.createVideoContext控制
我们想在js里控制video的播放暂停等,必须用wx.createVideoContext这个接口。如果你的video只是播放,不需要操作其他的,那这个接口用不上。
以video组件的id为参数可以构造一个VideoContext 对象,VideoContext 对象有一系列控制微信播放的方法:paly(),stop(),seek()...

4.seek()方法
VideoContext.seek(position) 跳转到指定位置,position的单位是秒,这个精度很低了,我自己传的是毫秒转换过来的,可以带有小数。比如:
VideoContext.seek(1.3) //调到视频1.3s的位置
这个跳转在最新的安卓系统上有问题,表现为 调用这个方法后,视频播放的位置在指定的前面。官方论坛也有讨论:https://developers.weixin.qq.com/community/develop/doc/00044e95ab0000a43476eae6556c00?highLine=%25E5%25AE%2589%25E5%258D%2593seek

小程序

 

5.获取视频的长度
video的duration属性,立马获取会有问题,参见我的博客:
https://www.cnblogs.com/xiaochongchong/p/9455293.html

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎