uniapp video组件H5模式在小米华为浏览器内被遮挡的一个处理方案

事出有因

今天测试发布的H5视频播放器页面时，突然有报告说播放后无法返回了。还原测试的步骤发现，出现问题的机型是QQ浏览器和小米浏览器。由于视频播放后被浏览器劫持变成了最高层级，返回等按钮全部被遮挡了。于是开始搜对应的解决方案

参考解决方案

找了一圈百度，给出的方案无非就是下面几个：
1）添加x5-video-player-type和playsinline等参数，然并卵；
2）设置z-index，也是没用；
3）使用cover-view，貌似只对APP方案有作用，对H5也是无解；
4）使用blob先下载本地再播放，由于目前的视频都比较大，先下载再播放的方案直接pass；

从根本原因来看，主要是因为某些浏览器对于video标签会进行劫持，使用系统自带的播放器。这样会导致视频组件变成最高优先级，因此覆盖弹幕或弹窗操作都因为遮挡原因无法正常使用

所以呢，目前能搜到的方案都无解，只能想办法变通业务

变通方案

目前业务影响的主要就是弹框，在进行下载或分享时需要弹框给用户提示操作结果。因此开始尝试调整方案：

1）首先想到的是跳新页面，由于操作繁琐，用户体验很差；因此尝试寻找其它方案。
2）再次提出调小播放界面，让提示信息从底部弹出。这样不符合界面的统一交互习惯，也是很影像体验。
在这里耽搁了差不多一个小时。。。突然灵光乍现。目前是在点击播放后，整个界面开始被劫持，也就是说，在非播放时候，播放组件是能遵循正常顺序的。那么是否可以考虑在弹窗时让状态还原呢？
由于不同系统劫持方式不同，没有提供一个统一的方法，让播放器还原到最初状态。既然播放器没有API还原，我直接摧毁重建不就成了。于是代码写成了这样：
 

    <video
      v-if="data.refreshVideo"
      x5-video-player-type="h5"
      x5-playsinline
      webkit-playsinline
      class="flex-1 w-100vw relative z-0"
      :src="data.videoUrl"
      :poster="data.coverUrl"
      @error="videoErrorCallback"
      @play="onPlay"
      controls
    />

const data = reactive<{
...
  refreshVideo: boolean
}>({
...
  refreshVideo: true

})

要弹窗时，这样来处理

    uni.setClipboardData({
      data: ` ${userName.value} 给你分享了TA的最新视频 ${baseURL}/t/${shortLink}，快来观看吧！`,
      success: function () {
        if (inWechatBrowser) {
          utils.alert('已复制到剪切板，快去粘贴分享给好友吧！')
        } else {
          // 刷新视频
          data.refreshVideo = false
          nextTick(() => {
            data.refreshVideo = true
            utils.alert('已复制到剪切板，快去粘贴分享给好友吧！')
          })
        }
      }
    })

这里由于在微信浏览器里是正常的不会被劫持，因此只在非微信浏览器下让播放器重回原始的状态。试了下，运行效果良好。

唯一的影响就是在进行交互操作时播放会回复原始状态，对用户的影响做到了最小。这样就实现了对浏览器劫持video的问题进行了统一的解决。