H5 在ios上自动播放视频

  • Post author:
  • Post category:其他

前言

最近的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 的方式精确设置秒数)设置好视频播放点即可。

以上!


版权声明:本文为weixin_54858833原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。