微信小程序video

1.video是原生组件

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

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

这个是微信返回当前播放进度的接口。文档上说是每250ms调用一次，实际测试在ios上1s调用一次。

通过e.detail.currentTime可以拿到当前进度,单位：s。

这里提个问题，给你一段视频，给一组音频信息，音频信息里包含开始时间，音频的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();
 } 
 },
 timeUpdate:function(e){
 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的位置

这个跳转在最新的安卓系统上有问题，表现为 调用这个方法后，视频播放的位置在指定的前面。

路