H5视频交互攻略

# 注意
在uc浏览器和ios微博里面，是不支持视频交互的，暂时没有办法把层级放在视频上方，IOS
必须用click事件点击之后视频才会播放，不支持自动播放
安卓环境下，视频播放会全屏播放，播放完之后不会回到原页面，可以做个display: none 让视频退出全屏
# 微信解决视频层级播放问题
腾讯接入文档链接https://x5.tencent.com/tbs/gu...

<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('播放进度')
  };

# 最后
第一次谢博客，写的不好，请见谅