H5视频交互攻略

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

# 视频的几个事件

     // 视频加载完毕
    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('播放进度')
  };

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

你可能感兴趣的:(vue.js)