当vue-video-player遇到x5内核

使用vue-video-player在微信浏览器等x5内核琐事

刚搞完hls直播 现在放在微信中会有一些问题

悬停在video上层的html元素丢失

原因：
X5内核视频默认播放形态，用户点击视频区域后开始进入全屏播放，视频区域内的所有事件行为会由X5内核视频组件全权托管。视频层级最高，会遮挡所在区域所有html元素

解决办法：

//dom
<video-player  
      v-else
      class="video-player vjs-custom-skin"
      id="video-player"
      ref="videoPlayer" 
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @canplay="onPlayerCanplay($event)"
></video-player>

//script
onPlayerCanplay (player) {
        var ua = navigator.userAgent.toLocaleLowerCase()
        if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        	// x5内核
            let video = document.getElementsByTagName("video")[0]
            video.setAttribute('x5-video-player-type','h5') // 声明启用同层H5播放器，控制网页内部同层播放，可以在视频上方显示html元素。
            video.setAttribute('x5-video-orientation','landscape|portrait') // 播放器支持的方向--跟随手机自动旋转，此属性只在声明了x5-video-player-type=”h5”情况下生效
            video.setAttribute('x5-video-player-fullscreen','true')  // 进入全屏通知
        } else {
            // ios端
            let video = document.getElementsByTagName("video")[0]
            console.log('video',video)
            video.setAttribute('webkit-playsinline', 'true')  //设置ios在微信中内联播放视频 ios9
            video.setAttribute('playsinline', 'true')    //设置ios在微信中内联播放视频 ios10/ios11
        }
      },

相关文档

腾讯浏览服务
H5同层播放器接入规范
X5内核视频之问答汇总

项目截图

修改前:

修改后：