博客

前言

最近的H5项目中有个开场动画使用了序列帧，但是因为原视频长达15秒，导出的序列帧很大，在loading阶段，用户等待时间过长，所以有这样的方案，在IOS中使用视频来代替序列帧，在安卓中由于不能自动播放视频，所以保持序列帧。

实现

Video 模板：

  <div class="video-box" :style="{ opacity: showVideo ? 1 : 0 }">
     <video
         id="myVideo"
         ref="loadVideo"
         preload="auto"
         muted
         :loop="false"
         x5-video-player-type="h5"
         playsinline="true"
         webkit-playsinline="true"
         x-webkit-airplay="true"
         x5-video-orientation="portraint"
         x5-video-player-fullscreen="true"
         :src="videoPath"
         @ended="videoPlayedHandler"
         @timeupdate="timeUpdateHandler"
     ></video>
 </div>

重要的是怎么触发自动播放，目前已知的是可以利用微信的 WeixinJSBridgeReady 事件来完成自动播放
，我们在mounted中监听此事件（前提是已经引入微信的JDK）。vue中可以如此做：
安装npm包：

npm i jweixin-npm

引入wx：

import wx from 'jweixin-npm';

监听WeixinJSBridgeReady 事件，播放视频：

let that = this;
document.addEventListener(
    'WeixinJSBridgeReady',
    function () {
        let video = that.$refs.loadVideo;
        video.play();
		video.pause();
    },
    false
);

这样视频会在一开始就播放，如果需要在任意时间开始播放，我们只需要隐藏视频，在需要播放的位置调用play()方法并显示视频即可

关于优化

视频在开始播放的时候会不可避免的停顿一下，如果前面有其他的动画需要无缝衔接，笔者的思路就是提前调用play()，并通过视频的currentTime属性（只支持秒，可以使用 ms / 1000 的方式精确设置秒数）设置好视频播放点即可。

以上！