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

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

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

img

这个比较困难,只能找浏览器独有的控制属性。。网上找的添加属性也是针对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

目前我已找到一个新属性解决了uc等浏览器层级问题、但是小米浏览器还未解决

这玩意 手机不同内置浏览器兼容不同 安卓 ios也不同。最好办法就是播放的时候 弄个全屏的弹框去播放 ,或者有个详情页专门去播放, 列表页就纯显示就行