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)=>{ //微信真机上播放完之后,第二遍播放获取不到duration if(!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