uniapp <video/> h5 srcobject 丢失问题如何解决？

在uniapp中使用

2 回复

在H5端，<video>不支持srcObject属性。建议改用src属性，通过URL.createObjectURL()将MediaStream转换为blob URL。


在 UniApp 中，H5 平台使用 <video> 组件时，如果遇到 srcObject 属性丢失或无法正常播放媒体流的问题，通常是因为 H5 环境对 srcObject 的支持不完整或兼容性问题。以下是解决方案：

解决方法：

  1. 使用 createObjectURL 转换媒体流
    将 MediaStream 对象通过 URL.createObjectURL() 转换为 Blob URL，再赋值给 <video> 的 src 属性。

    // 获取媒体流（例如通过 navigator.mediaDevices.getUserMedia）
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 将 MediaStream 转换为 Blob URL
    const blobURL = URL.createObjectURL(stream);
    // 通过 ref 获取 video 组件实例并设置 src
    this.$refs.videoPlayer.src = blobURL;
  })
  .catch(error => {
    console.error('获取媒体流失败:', error);
  });

    <template>
  <video ref="videoPlayer" controls autoplay></video>
</template>

  2. 确保平台兼容性

    • 检查浏览器是否支持 MediaStream 和 srcObject，部分旧版浏览器可能需要 polyfill。
    • 在 UniApp 的 manifest.json 中配置 H5 选项，确保使用现代浏览器特性。

  3. 处理销毁与释放
    在组件销毁时，手动释放 Blob URL 以避免内存泄漏：

    beforeDestroy() {
  if (this.blobURL) {
    URL.revokeObjectURL(this.blobURL);
  }
}

注意事项：

  • 测试环境：在 Chrome、Firefox 等现代浏览器中验证，部分移动端浏览器可能存在限制。
  • UniApp 版本：确保使用最新版本（如 HBuilderX 3.4+），以获取更好的 H5 兼容性。
  • 如果问题持续，尝试使用原生 <video> 标签替代 UniApp 组件（需通过 web-view 或条件编译实现）。

通过以上方法，可解决 H5 平台 srcObject 丢失导致的视频播放问题。

回到顶部