I temporarily took over a company project that was about to be launched, pure H5 activity page, with little content, but high requirements for restoration degree and compatibility of various models (especially Android models). There are many problems involved. Here, I will focus on a series of Video pits in H5. We recommend using the jquery stack instead of using Vue and ReactJS etc. The latter has the advantage of component system, high reusable degree, suitable for large projects. Active page UI changes frequently, more dynamic effect, suitable for jquery plug-in ecology, easy to add. I took over the vUE project halfway through, adding some new features and checking to see if there was a corresponding VUE wheel, which was quite troublesome.

H5 Video (iN mobile mode)

1. Set basic video properties

  1. Poster: substitute image before the video is played. If this attribute is not set, the first frame of the video is used by default (but some models are not compatible). Suggest to add

  2. Muted: mute. Suggest to add

  3. Webkit-playsinline /playsinline: the video is played locally and does not deviated from the document flow. Basically ensure that the iPhone plays in the H5 page. The third-party library iphone-inline-video is not supported. Suggest to add

  4. X5-video-player-type =”h5″/x5-playsinline: Enable the h5 player of the same layer to ensure that android phones play in the H5 page. However, android phones perform differently. Suggest to add

<video
    ref="video"
    :poster="startSource"
    muted
    x-webkit-airplay="allow"
    x5-video-player-type="h5" x5-playsinline
    webkit-playsinline playsinline>
    <source :src="videoSource" type="video/mp4" />
</video>
Copy the code

2. Play automatically

First, the conclusion: if you need wechat/netease cloud music/Weibo /QQ/ browser and other platforms perfect automatic playback, no. The right solution: Let the visual design guide the user to tap the screen and play the video. Or if the product accepts it, it starts playing as soon as the user touches the screen (listening for the TouchStart event). Error: video tag autoplay, js execute video. Play, load execute play()

It only spreads on wechat. The wechat browser is specially processed and can be resolved by calling WeixinJSBridgeReady, for iPhone and Android. Note that autoplay videos must be muted or manually muted. See sample code:

<! -- Must be added to wechat API resources --><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

let that = this
if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        video.play()
    }, false);
} else {
    document.addEventListener("WeixinJSBridgeReady".function () {
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            video.play()
        });
    }, false);
}
Copy the code

3. The video starts to go black for a short time

On some Android models, a black screen appears for 1 to 2 seconds when you click to play a video. The problem may occur because the request has not been completed and the video can be played smoothly.

Solution: Overlay a div on top of the video and change its background image to the first frame image. Listen for the timeUpdate event and remove the div when a video is playing.

<div @click="play">
      <video
        ref="video"
        :class="{'playing': playing}"
        :poster="startSource"
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
        x5-playsinline
        webkit-playsinline playsinline>
        <source :src="videoSource" type="video/mp4" />
      </video>
      <div :class="['cover-start']" v-if=! "" playing"></div>
    </div>
Copy the code
this.videoNode.addEventListener('timeupdate', () = > {// If currentTime of the video is greater than 0.1, the black screen time has passed, and there is a video screen, you can remove the floating layer
    if (this.videoNode.currentTime > 0.1&&!this.playing) {
        this.playing = true}},false)
Copy the code

4. Some Android phones jump to X5 Player to play videos

Some Androids in wechat or browser will jump to x5 Player when playing video. This kind of video is located at the top of the page and cannot be covered. It may push Tencent video information after playing, and it will not automatically shut down.

Solution: Manually remove the entire video when it is about to end, using the TimeUpdate event.

this.videoNode.addEventListener('timeupdate', () = > {// Compatible with Android X5 in browser behavior. The time is the video duration
    if (this.videoNode.currentTime > 56.9) {
        this.isShowVideo = false}},false)
Copy the code

5. Video canplay pit

After changing the video scheme to guide the user, there is a loading page in front of it. The product hopes that after the video is loaded, loading will disappear and the video will be clickable. However, the ios canplay and CanPlaythrough events do not perform callbacks. Ios will load the video stream after hitting Play. On Android, the canPlay event callback is performed, but the video stream is also played side by side. Therefore, the loading time of the video cannot be accurately obtained

Summary: H5 video standard is not perfect now, except timeUpdate, ended events, other events should be used with caution.

6. Safari zooms in and out videos

Generally, user-scalable=no can be set in the viewport of the meta. However, in Safari after IOS 10, Apple has improved the accessibility of websites in Safari by allowing users to manually zoom in and out even if the site is set in the viewport.

Solution:

// IOS10 Safari does not recognize meta, so js hack is required
document.documentElement.addEventListener('touchstart'.function (event) {
if (event.touches && event.touches.length > 1) {
    event.preventDefault()
}
}, false)
Copy the code