uni-app video 层级问题 在钉钉APP中 打开H5 弹幕不会出现

uni-app video 层级问题 在钉钉APP中 打开H5 弹幕不会出现

开发环境 版本号 项目创建方式
Mac 11.2.3 HBuilderX

操作步骤：

  • video 组件 H5在钉钉APP中打开 会出现 层级问题 把所有内容遮挡

预期结果：

  • video 不要遮挡 弹幕和其他东西

实际结果：

  • video 遮挡 弹幕和其他东西

bug描述：

  • video 层级问题 在钉钉APP中 打开H5 弹幕被遮挡，在微信内打开层级没问题

更多关于uni-app video 层级问题 在钉钉APP中 打开H5 弹幕不会出现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

运行示例代码hello uni-app能复现你描述的问题吗？ https://hellouniapp.dcloud.net.cn/pages/component/video/video

更多关于uni-app video 层级问题 在钉钉APP中 打开H5 弹幕不会出现的实战教程也可以访问 https://www.itying.com/category-93-b0.html


能的， 你可以在钉钉里打开看

回复 9***@qq.com: 请提供下复现视频并说明设备信息

回复 DCloud_UNI_Anne: mate20 pro 和 iphone13 都是在钉钉打开h5 video的层级最高 你可以https://hellouniapp.dcloud.net.cn/pages/component/video/video 这个demo 发送弹幕 就会出现video层级最高， 弹幕在video下面 看不见

这是一个钉钉内嵌浏览器内核与uni-app video组件兼容性问题。钉钉Android端使用的X5内核在处理video组件层级时存在限制，导致原生组件总是处于最高层级。

解决方案：

  1. 在H5环境下使用原生video标签替代uni-app video组件，通过条件编译实现
// #ifdef H5
<video controls :src="src" class="video"></video>
// #endif
// #ifndef H5
<video :src="src" controls></video>
// #endif

  1. 使用cover-view覆盖在video上方显示弹幕，但需注意cover-view在H5支持有限

  2. 在钉钉中启用同层渲染（如支持），在pages.json中配置：

{
  "path": "pages/video",
  "style": {
    "app-plus": {
      "video": {
        "renderingMode": "same-layer"
      }
    }
  }
}
  1. 检测到钉钉环境时降级为使用图片封面+点击播放的方式，避免直接显示video组件

钉钉环境判断：

const isDingTalk = navigator.userAgent.indexOf('DingTalk') > -1;
回到顶部