uniapp中视频时长显示与实际不符且进度条异常跳动如何解决？

在uniapp中播放视频时，发现视频显示的时长与实际时长不一致，同时进度条会异常跳动。尝试过不同格式的视频文件问题依旧存在，使用官方video组件和第三方插件都出现相同情况。请问如何解决视频时长显示不准和进度条跳动的问题？是否需要在特定平台进行兼容性配置？

2 回复

检查视频文件的元数据是否正确，可能是编码问题导致时长解析错误。尝试重新编码视频或使用不同格式。进度条跳动可能是播放器缓冲问题，可尝试设置autoplay=false，或检查网络状况。


在Uniapp中视频时长显示异常和进度条跳动问题，通常由以下原因及解决方案：

常见原因及解决方案：

  1. 视频元数据加载问题
// 监听loadedmetadata事件
<video 
  @loadedmetadata="onVideoLoaded"
  src="video.mp4"
></video>

methods: {
  onVideoLoaded(e) {
    console.log('实际时长:', e.detail.duration)
    // 确保视频元数据完全加载后再操作
  }
}
  1. 使用官方video组件属性
<video
  :src="videoSrc"
  :duration="fixedDuration" // 手动设置时长
  controls
  autoplay
  @timeupdate="onTimeUpdate"
></video>

data() {
  return {
    fixedDuration: 0,
    currentTime: 0
  }
},
methods: {
  onTimeUpdate(e) {
    this.currentTime = e.detail.currentTime
    // 避免频繁更新UI导致的跳动
  }
}
  1. H5端特定问题
  • 检查视频格式兼容性（MP4/H.264）
  • 添加preload="metadata"属性
  • 使用crossOrigin="anonymous"解决CORS问题
  1. 进度条优化
// 防抖处理更新
let timer = null
onTimeUpdate(e) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    this.currentTime = e.detail.currentTime
  }, 100)
}
  1. 小程序端注意事项
  • 确保视频文件在合法域名下
  • 使用wx.createVideoContext控制播放

排查步骤：

  1. 检查视频文件完整性
  2. 测试不同格式视频
  3. 在真机上测试（避免模拟器问题）
  4. 更新HBuilderX到最新版本

如果问题持续，建议提供具体代码和错误日志进一步分析。

回到顶部