H5 在ios上自动播放视频-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5 在ios上自动播放视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

最近的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
);