video相关

video标签在点击播放后，会被浏览器接管，脱离文档流，z-index无效

// 解决层级问题
x5-video-player-type="h5" x5-video-player-fullscreen="true"

如果你使用下面的代码提高video标签的层级

<div class="video" id="box" style="margin-top:-20px">
    <video id="video"
           :poster="baseImg"
           :src="video.video_url"
           controls="controls"
           x-webkit-airplay="allow"
           x5-video-player-type="h5"
           x5-video-player-fullscreen="true"
    >
    </video>
 </div>

可以看到video标签的父级margin-top的值是负值，这种样式会造成视频在播放时，视频上面会被挡住一块（事实上这种情况，只要video的祖先级别marginTop为负值就会出现）

出现这种情况，而你又必须让marginTop的值为负，我们可以这样解决：

// 监听播放
 
// 视频播放时让marginTop为0
document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
    document.getElementById('box').style.marginTop='0px';
});
 
// 播放结束，marginTop为-20px
document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
    document.getElementById('box').style.marginTop='-20px';
});

// 加这个安卓全屏
x5-video-player-fullscreen="true"
x5-video-player-type="h5"

禁止全屏

//加这个禁止全屏
x-webkit-airplay="allow"
x5-playsinline="true"
webkit-playsinline="true"
playsinline="true"

常用监听

      // 播放
      window.addEventListener('play', () => {
        console.log('播放')
      }, true)
      // 暂停
      window.addEventListener('pause', () => {
        console.log('暂停')
      }, true)
      // 播放结束
      window.addEventListener('ended', () => {
        console.log('结束')
      }, true)

腾讯官方文档：
https://x5.tencent.com/tbs/guide/video.html
https://docs.qq.com/doc/DTUxGdWZic0RLR29B