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'
	        }
	      })
	    }

详细解读

属性

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/