uniapp 使用 video 播放时,ios 进度条一直显示在0是什么原因？

在uniapp中使用video组件播放视频时，iOS设备上进度条一直显示为0，无法正常更新进度。视频可以播放，但进度条不跟随播放时间变化。安卓设备正常，只有iOS出现这个问题。请问可能是什么原因导致的？需要如何解决？

2 回复

可能是视频未正确加载或格式不兼容。检查视频地址是否有效，iOS仅支持MP4等特定格式。可尝试添加autoplay或controls属性，或使用@loadedmetadata事件监听加载状态。


在 iOS 设备上，UniApp 使用 <video> 组件播放视频时，进度条一直显示为 0 通常是由以下几个原因导致的：

1. 视频格式或编码问题

  • iOS 对视频格式和编码要求较严格，仅支持 MP4（H.264 编码）、MOV 等格式。
  • 解决方法：确保视频为 MP4 格式，并使用 H.264 编码。可通过工具（如 FFmpeg）转换视频：
    ffmpeg -i input.mp4 -c:v libx264 -c:a aac output.mp4

2. 视频未完全加载

  • iOS 可能需要视频完全加载后才能正确解析时长和进度。
  • 解决方法：在 loadedmetadata 事件触发后再显示或操作视频：
    <video 
  src="video.mp4" 
  @loadedmetadata="onVideoLoaded"
  controls
></video>

    methods: {
  onVideoLoaded(e) {
    console.log('视频时长：', e.detail.duration);
  }
}

3. 跨域问题（CORS）

  • 若视频来自其他域名，需服务器配置 CORS 允许头。
  • 解决方法：确保服务器返回 Access-Control-Allow-Origin: * 或指定域名。

4. UniApp 配置或兼容性问题

  • 检查 vue 文件中的 <video> 属性是否正确，如 src 路径、controls 是否启用。
  • 示例代码：
    <video 
  src="/static/video.mp4" 
  controls 
  style="width: 100%;"
></video>

5. iOS 系统限制

  • iOS 可能对自动播放或用户交互有要求，需用户触发（如点击）后才能播放。

总结步骤：

  1. 检查视频格式和编码，转换为 H.264 MP4。
  2. 使用事件监听（如 loadedmetadata）确保视频元数据加载完成。
  3. 验证 CORS 配置（若使用网络资源）。
  4. 测试用户交互，如通过按钮触发播放。

如果问题持续，尝试在真机调试并查看 UniApp 或 iOS 控制台错误信息。

回到顶部