video在微信浏览器的一些问题

<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()
	        }
	      })
	      // 进入全屏
	      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>

详细解读

属性

preload="auto"

是否预加载数据

• auto 页面加载后载入整个数据
• meta 页面加载后载入元数据
• none 不载入视频

webkit-playsinline && playsinline="true"

• 小窗播放 使视频不脱离文本流，但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是苹果支持，安卓不支持。安卓会自动全屏播放。

x-webkit-airplay="allow"

• 字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)

  • 如果是 video 标签，可以通过 x-webkit-airplay="allow" 属性开启；
  • 如果是 embed 标签，可以通过 airplay="allow" 属性开启。

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

• 建议看官网文档非常详细 。十分重要必看。

object-fit:fill

• 填充尺寸 详情

方法

自动播放

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

封面增减

除ended,timeupdate其他事件慎用

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

参考文献、地址：

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/