video标签，在移动端不同浏览器被默认用原生的替代了的问题

问题描述

在移动端访问网页时，部分浏览器会用原生的视屏播放器来代替video标签。也就是说，当我们播放一个视频时，看起来是video标签在播放，但实际上是层级在网页之外的原生播放器在工作。
这种情况下，我们就无法自定义播放器控件，以及弹窗会会被播放器遮挡

解决方案

首先上结论：
原生播放器带来的问题，大部分不能解决，只能依靠与浏览器厂商协商，将自己的网站加入白名单，再基于网页的video标签处理。
少部分体验上的交互可以优化

• 只能依靠与浏览器厂商协商的结论依据

  • 腾讯的描述，虽然没有使用这个视频播放sdk，但是产生的原因是一致的 文档
  • 同一个浏览器，打开腾讯视频、bilibili，使用的是网页的video标签，但打开自己的页面，用的是原生播放器。另外，将腾讯视频的网页以iframe形式放到我的域名去播放，iframe内的也是原生播放器，由此基本可以排除是代码层面的兼容

• 可处理的bug：

  • 在qq浏览器中，如果是竖屏视频被默认fix导致遮挡页面，可以通过为video添加属性修改行为

playsinline="isiPhoneShowPlaysinline"
webkit-playsinline="isiPhoneShowPlaysinline"
x5-video-player-type="h5-page"

• 在这之前已经尝试过很多兼容道路，但均失败了如果你想尝试的，可以参考一下
  • 将video设为fixed布局
  • 播放后移除video标签
  • 播放一段很短的视频，用来结束原视频的播放 - 很短的视频也会浮在页面上，且无论如何设置这个很短的视频的属性
  • 将腾讯视频中的video标签属性copy一份
  • 逐步调试腾讯播放的代码，试图寻找代码层面的兼容
  • 使用腾讯的SuperPlayer播放器与对应的h5版本

后续

在vivo官网联系了客服，添加vivo默认浏览器白名单后，使用的不再是原生播放器了