注意

在uc浏览器和ios微博里面，是不支持视频交互的，暂时没有办法把层级放在视频上方，IOS 必须用click事件点击之后视频才会播放，不支持自动播放 安卓环境下，视频播放会全屏播放，播放完之后不会回到原页面，可以做个display: none 让视频退出全屏

微信解决视频层级播放问题

腾讯接入文档链接：https://x5.tencent.com/tbs/guide/video.html

<video
         class="js-video"
         id="idVideo"
         webkit-playsinline="true"
         playsinline="true"
         x5-playsinline="true"
         x-webkit-airplay="true"
         x5-video-player-type="h5"
         x5-video-player-fullscreen="true"
         x5-video-orientation="portrait"    
         preload="auto" >
</video>

视频的几个事件

     // 视频加载完毕
    local.addEventListener('canplaythrough', function() {
       //要执行的函数内容
       console.log('资源加载完成了');
     });
     // 进入全屏
    local.addEventListener('x5videoenterfullscreen', function() {
       console.log('进入全屏了');
     });
     // 退出全屏
    local.addEventListener('x5videoexitfullscreen', function() {
       console.log('退出全屏了');
    });
		 // 播放完了
		local.addEventListener('ended', function() {
			   console.log('播放完了');
		})
		// 监听播放进度
	local.ontimeupdate = function(e) {
         console.log('播放进度')
  };

链接: https://www.fly63.com/article/detial/5846