从 blob 创建视频元素答案

【问题标题】：Creating a video element from a blob从 blob 创建视频元素
【发布时间】：2018-06-06 13:03:17
【问题描述】：

我正在尝试从 React 中的 blob 创建视频元素。我做了这么多。但这似乎不起作用。这段代码有错误吗？

loadBlob(blob, callback) {

    const reader = new FileReader();
    reader.readAsDataURL(blob);

    reader.onload = (event) => {
      const result = event.target.result;     
      callback(result)
   }
}

createVideo(result) {
 this.setState({
    src:result
  })
}

loadBlob(blob, createVideo) /*Passing the blob and the callback in the click button click event*/

在我的渲染中

 <video>
   <source src = {this.state.src}/>
 </video>

当我与检查员核对时，视频元素中的 src 已被设置。当我控制台注销 blob 时，我得到了这个

Blob(231112) {size: 231112, type: "video/webm"}.

我想知道这是否可以使用 Filereader 制作成视频？

【问题讨论】：

会发生什么？什么不会发生？您是否在浏览器的检查器中查看了生成的 DOM 以查看 src 是否已设置？
是的，当我与检查员核对时，src 正在视频元素中设置。当我在控制台注销 blob 时，我得到了这个 Blob(231112) {size: 231112, type: "video/webm"} 。我想知道这是否可以使用 Filereader 制作成视频？

标签： html reactjs video jsx filereader

【解决方案1】：

啊，cmets的讨论让我意识到了这个问题。

您不应该将data: URI 用于这么大的数据；而是使用URL.createObjectURL(blob)。

【讨论】：