H5视频交互攻略

注意

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

最后

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