如何将Canvas图片转视频得到的ArrayBuffer作为URI在video标签播放？

嘿，这个问题我刚好处理过，其实把ArrayBuffer变成video标签能直接用的URI非常简单，核心就是借助Blob和Object URL来转换，一步步来：

• 第一步：把ArrayBuffer转成Blob对象
  你需要先把返回的ArrayBuffer包装成Blob，关键是要指定正确的视频MIME类型（比如video/mp4、video/webm，得和你的库生成的视频格式对应），代码示例：

  // 替换成你的ArrayBuffer和对应MIME类型
  const videoBlob = new Blob([yourArrayBuffer], { type: 'video/mp4' });
  

• 第二步：生成可被video识别的Object URL
  用浏览器提供的URL.createObjectURL()方法，把Blob转换成一个临时的URI，这个URI就能直接给video标签用了：

  const videoSourceUrl = URL.createObjectURL(videoBlob);
  

• 第三步：绑定到video标签并播放
  把生成的URL赋值给video元素的src属性，就能播放了。注意浏览器的自动播放政策，通常需要设置静音才能自动播放：

  const videoElement = document.getElementById('your-video-element-id');
  videoElement.src = videoSourceUrl;
  // 开启静音以绕过自动播放限制
  videoElement.muted = true;
  // 触发播放，捕获可能的错误
  videoElement.play().catch(err => {
    console.error('播放失败:', err);
  });
  

额外注意事项 #

• 一定要匹配正确的MIME类型：如果类型和实际视频格式不匹配，video标签会无法解析内容，导致播放失败。
• 记得释放内存：Object URL会占用浏览器内存，使用完后（比如视频播放结束、页面卸载时）要调用URL.revokeObjectURL()释放资源：

  videoElement.addEventListener('ended', () => {
    URL.revokeObjectURL(videoSourceUrl);
  });
  

• 自动播放限制：现代浏览器对自动播放有严格限制，除了静音，也可以让用户通过点击事件触发播放，比如绑定一个按钮的click事件来调用videoElement.play()。

内容的提问来源于stack exchange，提问作者webecon