uni-app video组件在nvue页面seek动态设置时间时视频卡顿，当设置成seek(0)时视频不会卡顿

uni-app video组件在nvue页面seek动态设置时间时视频卡顿，当设置成seek(0)时视频不会卡顿

测试过的手机：

  • iphone 11
  • 华为 nova 8

操作步骤：

  • video 在 nvue 页面 mounted 里面设置 seek 动态设置时间，视频卡顿，当设置成 seek(0) 视频不会卡顿

预期结果：

  • video 在 nvue 页面 mounted 里面设置 seek 动态设置时间 视频不会卡顿

实际结果：

  • video 在 nvue 页面 mounted 里面设置 seek 动态设置时间，视频卡顿，当设置成 seek(0) 视频不会卡顿

bug描述：

  • video 在 nvue 页面 seek 动态设置时间，视频卡顿，当设置成 seek(0) 视频不会卡顿


| 项目名称       | 值          |
|---------------|-------------|
| 产品分类       | uniapp/App  |
| PC开发环境操作系统 | Mac         |
| PC开发环境操作系统版本号 | 10.15.7     |
| HBuilderX类型   | 正式        |
| HBuilderX版本号 | 3.2.16      |
| 手机系统       | 全部        |
| 手机厂商       | 华为        |
| 页面类型       | nvue        |
| vue版本       | vue2        |
| 打包方式       | 云端        |
| 项目创建方式    | HBuilderX    |

更多关于uni-app video组件在nvue页面seek动态设置时间时视频卡顿，当设置成seek(0)时视频不会卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

官方的大佬们，这个问题啥时候能解决一下?

更多关于uni-app video组件在nvue页面seek动态设置时间时视频卡顿，当设置成seek(0)时视频不会卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 nvue 页面中 video 组件的问题。当在 mounted 生命周期中调用 seek 方法并传入动态时间值（非0）时，视频播放会出现卡顿。而 seek(0) 能正常工作，是因为它本质上是重置视频到初始状态，触发的逻辑与跳转到其他时间点不同。

问题原因： 在 nvue 页面，video 组件底层使用原生渲染，其初始化与 seek 操作的时序可能存在冲突。mounted 时视频可能尚未完全准备好，此时立即跳转到非零时间点，会导致播放器状态异常，从而引发卡顿。

临时解决方案：

  1. 延迟执行 seek：使用 setTimeout 将 seek 操作延迟到视频完全加载后执行。
    mounted() {
  setTimeout(() => {
    this.$refs.video.seek(目标时间);
  }, 500); // 延迟500ms，可根据实际情况调整
}
  2. 监听视频状态：在 [@loadedmetadata](/user/loadedmetadata) 或 @canplay 事件触发后再执行 seek。
    <video ref="video" [@loadedmetadata](/user/loadedmetadata)="onVideoReady" />

methods: {
  onVideoReady() {
    this.$refs.video.seek(目标时间);
  }
}
回到顶部