解决移动端video标签视频在Android系统中的层级问题

H5页面视频播放的问题相信曾经让很多同学崩溃，video标签的层级问题始终无法得到完美的解决方案。

这次的需求是这样的：在浏览器中扫码打开一个H5页面，要将一个视频当成背景图片来播放（gif太大，所以不用）

通过给video标签设置postion z-index等属性，明显是不可行的。

方案1：
 

<video id="video-ios" src="./ceshi.mp4" webkit-playsinline playsinline x5-playsinline></video>

通过测试，此方案可以解决在微信浏览器以及ios系统中 video标签视频 层级最高播放的问题，具体标签属性可以参考https://x5.tencent.com/tbs/guide/video.html

方案2：但是在安卓系统下浏览器还是无法正常使用，安卓用户表示不满意，那继续找方法

想继续用video标签来播放是实在没办法了，换个思路，转成canvas绘制，那怎么转呢，自己写肯定是不可能的了，必须借用工具包了jsmpeg.js 可以将ts格式的视频转成canvas，具体实现
 

<script src="./js/jsmpeg.js"></script>
<canvas id="video-android"></canvas>
  jsmpegPlay(document.getElementById('video-android'), './ceshi.ts')
  function jsmpegPlay(Vcanvas, vVideo, startFun, playingFun, endFun) {
    var player = new JSMpeg.Player(
      vVideo, {
        canvas: Vcanvas,
        loop: true,
        autoplay: true,
        startSign: true,
        startCallBack: startFun,
        playingCallBack: playingFun,
        endCallBack: endFun
      })
  }

jsmpeg.js下载链接https://download.csdn.net/download/qq_24510455/11241351（积分是系统自动计算的，知道如何设置免费的可以告诉我）

具体可参考https://github.com/phoboslab/jsmpeg

canvas标签可以想放哪里放哪里，那是不是可以以后都把视频转canvas呢，当然不行，jsmpeg在ios和低性能的安卓中卡顿严重

最终解决方案：判断如果是微信和ios下 就使用video标签设置上述属性，如果是安卓的话再使用jsmpeg