移动端HTML5＜video＞ 浏览器劫持视频播放 视频激活播放后强制全屏 视频无法被其他元素覆盖

浏览器劫持视频播放、视频无法被其他元素覆盖

Html5 video 多媒体标签

<video
        id="loginVideo"
        muted
        autoplay
        loop
        :src="require('./assets/login.mp4')"
></video>

登录页加入视频作为背景，加入了video标签，设置定位，层级，谷歌浏览器调试完美展示，由于做的是H5网页，移至手机上查看（红米A8）。手机端谷歌浏览器打开登录页，登录背景视频正常且完美显示，符合需求，接着用手机自带浏览器同样的操作，在跳转登录页时，视频被劫持并全屏显示，登录页登录功能失效了。。。QQ浏览器，UC浏览器都出现了视频被劫持并全屏播放的问题（还有另外的几个浏览器就没有去试了，火狐，Opera，Edge）

经查询资料发现：

国内浏览器会对视频做拦截并全屏置顶展示

x5同层播放器

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。只要给普通的video元素加上X5的自定义属性 x5-video-player-type，就可以调用同层播放器。

浏览器劫持视频播放

于是，在video标签中添加 ： x5-video-player-type=“h5” 后，在QQ浏览器中登录页的视频不会被拦截全屏显示，但是UC浏览器和红米手机自带的浏览器中仍然会被拦截全屏播放。

<video
        id="loginVideo"
        muted
        autoplay
        loop
        webkit-playsinline // 这个属性是ios 10中设置可以让视频在小窗
        内播放，也就是不是全屏播放
        playsinline // IOS微信浏览器支持小窗内播放
        x5-playsinline 
        x5-video-player-type="h5" // 不要与x5-playsinline同时存在
        x-webkit-airplay="allow"
        x5-video-player-fullscreen="" // 全屏设置，设置为 true 是防
        止横屏
        x5-video-orientation="landscape|portrait" // 播放器的方向，
         landscape横屏，portraint竖屏，默认值为竖屏
        :src="require('./assets/login.mp4')"
></video>

额。。。。最后试了试canvas做，简单调试了一下，好像结果也不理想，登录页后面的背景video视频层级问题无法解决。最后还是使用GIF背景图充当视频。