uniapp video seek 方法不生效怎么办？

在uniapp中使用video组件的seek方法时无法跳转到指定时间点，代码按照文档写法但始终不生效。具体表现为：调用seek(30)后视频仍从开头播放，控制台无报错信息。测试过真机和模拟器环境，H5和APP端都出现同样问题。请问如何正确实现视频跳转功能？是否需要特殊配置或权限？

2 回复

检查video组件的ref是否正确绑定，确保调用this.$refs.videoRef.seek(time)时video已加载。建议在play事件触发后再调用seek方法。


在 UniApp 中，video 组件的 seek 方法不生效，通常由以下原因导致。请按以下步骤排查和解决：

1. 确保 video 上下文正确

  • 必须通过 createVideoContext 获取视频实例，且 id 与模板中一致。
  • 示例代码：
    // 在模板中
<video id="myVideo" src="https://example.com/video.mp4"></video>

// 在脚本中
export default {
  onReady() {
    this.videoContext = uni.createVideoContext('myVideo');
  },
  methods: {
    seekToTime() {
      this.videoContext.seek(30); // 跳转到第30秒
    }
  }
}

2. 检查视频源和格式兼容性

  • 确保视频地址可访问且格式受支持（如 MP4、HLS）。
  • 若为网络资源，需在 manifest.json 中配置网络请求权限：
    {
  "networkTimeout": {
    "request": 10000
  }
}

3. 等待视频加载完成

  • 在 loadedmetadata 事件触发后再调用 seek，避免视频未就绪。
  • 示例：
    <video id="myVideo" @loadedmetadata="onVideoReady" src="..."></video>

methods: {
  onVideoReady() {
    this.videoContext.seek(30); // 在元数据加载后跳转
  }
}

4. 验证平台差异

  • 部分平台（如小程序）可能对 seek 有额外限制，需在官方文档中确认兼容性。

5. 调试与错误处理

  • 使用 try-catch 捕获异常，或通过 uni.showToast 提示错误信息：
    try {
  this.videoContext.seek(30);
} catch (error) {
  uni.showToast({ title: '跳转失败', icon: 'none' });
}

6. 更新 UniApp 版本

  • 检查 UniApp 和平台基础库是否为最新版本，避免旧版本 bug。

通过以上步骤，通常可解决 seek 不生效的问题。若仍无效，请提供具体代码片段和错误日志以便进一步排查。

回到顶部