video标签在钉钉和一些浏览器点开后层级过高怎么办？

Question

视频标签在uc浏览器、钉钉中点击播放后都会出现层级问题，
请问该怎么解决
ps：微信、qq并无问题

<video
                        src="url"
                        poster="./images/pc_vv.png"
                        controls 
                         >您的设备不支持 video 标签</video>

Answer 1

这个比较困难，只能找浏览器独有的控制属性。。网上找的添加属性也是针对ios的，小米浏览器去官方看有没有对应的属性

 x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5"  x5-video-player-fullscreen="" x5-video-orientation="portraint" 

可以试试用jsmpeg.js将视频转为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
————————————————
版权声明：本文为CSDN博主「易-水寒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_24510455/article/details/91974655