Some problems with video in WeChat browser

<video id="first-video" width="100%" height="100%"
    		   x5-video-player-type="h5"
    		   x5-video-player-fullscreen="true"
    		   x5-playsinline=""
    		   playsinline=""
    		   webkit-playsinline=""
    		   :poster="poster"
    		   preload="auto"
    		   :src="videoUrl"
    		   x-webkit-airplay="allow"
    		   @ended="onPlayerEnded($event)">
    </video>

let video = document.querySelector('video')
	      this.videoMethod(video)
videoMethod (video) {
	      video.addEventListener('touchstart', function () {
	        video.play()
	      })
	      video.addEventListener('ended', function (e) {
	        let second_btn_img = document.getElementsByClassName('second-btn-img')[0]
	        second_btn_img.style.display = 'block'
	        second_btn_img.onclick = function (params) {
	          second_btn_img.style.display = 'none'
	          document.getElementById('first-video').style.display = 'block'
	          video.play()
	        }
	      })
	      // enter full screen
	      video.addEventListener('x5videoenterfullscreen', function () {
	        window.onresize = function () {
	          video.style.width = window.innerWidth + 'px'
	          video.style.height = window.innerHeight + 'px'
	        }
	      })
	    }

<style scoped>
	#first-video{
    object-fit: fill;
  }
  .container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
  }
  .second-btn-img, .platStart {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;object-fit: fill;
    display: none;
  }
  .platStart img, .second-btn-img img {
  	width: 100%;
  	object-fit: fill;
  }
</style>

Detailed interpretation

Attributes

preload="auto"

Whether to preload data

• auto load entire data after page load
• Load metadata after meta page loads
• none do not load video

webkit-playsinline && playsinline="true"

• Small window playback  keeps the video from the text stream, but requires webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) , the result is that Apple supports it, but Android does not . Android will automatically play in full screen.

x-webkit-airplay="allow"

• Literally allows airplay (Through AirPlay the current video can be cast to other devices that support this technology.)

  • If it is a video tag, it can be enabled by the x-webkit-airplay="allow" attribute;
  • If it is an embed tag, it can be enabled by the airplay="allow" attribute.

x5-video-player-type="h5" && x5-video-player-fullscreen="true" &&x5-video-orientation="portraint"

• It is recommended to see the official website documentation for very detailed. Very important must see.

object-fit:fill

• Fill Size  Details

method

Autoplay

setTimeout(function () { video.play(); }, 1000);
//微信webview全局内嵌，WeixinJSBridgeReady方法
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false);
//诱导用户触摸
video.addEventListener('touchstart', function () {
    video.play();
});

Cover increase or decrease

Except for end, timeupdate other events should be used with caution

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

References, address:

1、https://segmentfault.com/a/1190000010377156

2、https://x5.tencent.com/tbs/guide/video.html

3、https://github.com/gnipbao/iblog/issues/11

4、http://zhaoda.net/2014/10/30/html5-video-optimization/