uni-app的video组件在uview的u-tabs-swiper里能播放但不能点暂停 使用j-video同样点暂停无效
uni-app的video组件在uview的u-tabs-swiper里能播放但不能点暂停 使用j-video同样点暂停无效
环境
| 环境 | 说明 |
|---|---|
| h5 | 开发环境 |
在 `uview` 的 `u-tabs-swiper` 里使用 `uniapp` 的 `video` 组件时，可以播放但无法暂停。将 `video` 组件放在项目其他页面则可以正常暂停，怀疑是 `uview` 存在冲突。
同样地，使用 `j-video` 组件时也无法实现暂停功能。
1 回复
更多关于uni-app的video组件在uview的u-tabs-swiper里能播放但不能点暂停 使用j-video同样点暂停无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题通常是由于u-tabs-swiper的滑动事件与video组件的触摸事件产生了冲突。u-tabs-swiper默认会拦截触摸事件以实现滑动切换，这会影响内部video组件的点击操作。
解决方案：
- 为video组件添加
@touchstart.native.stop事件修饰符：
<video
@touchstart.native.stop
@click="toggleVideo"
></video>
.native.stop可以阻止事件冒泡到u-tabs-swiper，确保点击事件能被video组件正确捕获。
-
检查u-tabs-swiper配置： 确认是否设置了
@change事件，如果有，确保事件处理逻辑不会干扰video操作。 -
使用动态控制方式： 通过ref直接控制video实例：
// 模板
<video ref="myVideo"></video>
// 方法
toggleVideo() {
const videoContext = this.$refs.myVideo
// 通过videoContext操作播放状态
}