H5 autoplay video on ios

foreword

In the recent H5 project, there is an opening animation that uses sequence frames, but because the original video is 15 seconds long, the sequence frames exported are very large. During the loading stage, the user waits for too long, so there is such a solution, which is used in IOS The video is used instead of the sequence frame. Since the video cannot be played automatically in Android, the sequence frame is maintained.

accomplish

Video template:

  <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>

The important thing is how to trigger autoplay. It is known that we can use the event of WeChat WeixinJSBridgeReadyto complete the autoplay
. We listen to this event in mounted (provided that the JDK of WeChat has been introduced). You can do this in vue:
install the npm package:

npm i jweixin-npm

Import wx:

import wx from 'jweixin-npm';

Listen to WeixinJSBridgeReadythe event and play the video:

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

In this way, the video will be played at the beginning. If we need to start playing at any time, we only need to hide the video, call the method at the position where it needs to be played play()and display the video.

about optimization

When the video starts to play, it will inevitably stop for a while. If there are other animations that need to be seamlessly connected, the author's idea is to call in advance and pass the play()video currentTimeproperties (only supports seconds, you can use ms / 1000 to accurately set seconds) to set the video playback point.

that's all!