uni-app swiper 插件包裹视频模拟短时间竖向滑动播放在真机模拟时容纳视频的video容器可以正常上下滑动但是播放的视频不会滑动类似悬浮窗固定显示在页面

uni-app swiper 插件包裹视频模拟短时间竖向滑动播放在真机模拟时容纳视频的video容器可以正常上下滑动但是播放的视频不会滑动类似悬浮窗固定显示在页面

开发环境 版本号 项目创建方式
Windows 1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：1

HBuilderX类型：正式

HBuilderX版本号：4.76

手机系统：Android

手机系统版本号：Android 16

手机厂商：OPPO

手机机型：ace2

页面类型：vue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

操作步骤：
- 运行代码

预期结果：
- 正常滑动，

实际结果：
- 视频保留页面固定

bug描述：
【报Bug】swiper 插件包裹视频，模拟短时间竖向滑动播放，在真机模拟时，容纳视频的video容器可以正常上下滑动，但是播放的视频不会滑动，类似悬浮窗固定显示在页面

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20250804/8f25045d9031b1f72d65450ab405cacf.png)

更多关于uni-app swiper 插件包裹视频模拟短时间竖向滑动播放在真机模拟时容纳视频的video容器可以正常上下滑动但是播放的视频不会滑动类似悬浮窗固定显示在页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

插件市场有很多类似的插件 可以参考下他们怎么实现的 插件市场：https://ext.dcloud.net.cn/search?q=抖音

更多关于uni-app swiper 插件包裹视频模拟短时间竖向滑动播放在真机模拟时容纳视频的video容器可以正常上下滑动但是播放的视频不会滑动类似悬浮窗固定显示在页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


app端是这个问题

解决 了吗

这是一个典型的视频层级穿透问题。在uni-app中，video组件默认采用原生渲染，层级高于webview中的普通元素，因此即使video被swiper包裹，在滑动时视频内容仍会保持固定位置。

解决方案：

  1. 使用cover-view覆盖（推荐） 在video组件外层添加cover-view容器，利用其原生渲染特性控制视频层级：
<swiper vertical>
  <swiper-item v-for="item in list">
    <cover-view class="video-container">
      <video :src="item.src"></video>
    </cover-view>
  </swiper-item>
</swiper>
  1. 启用同层渲染（Android特定） 在manifest.json中配置：
"app-plus": {
  "video": {
    "renderingMode": "sameLayer"
  }
}
  1. 动态控制播放状态 滑动时暂停视频，停止后恢复播放：
onSwiperChange(e) {
  this.videoList.forEach((video, index) => {
    if(index !== e.detail.current) {
      video.pause()
    } else {
      video.play()
    }
  })
}
  1. 调整z-index属性 为swiper-item设置较高的z-index值：
.swiper-item {
  z-index: 999;
  position: relative;
}
回到顶部