在 DOM 中显示视频文件第一帧的最快方法是什么？答案

【问题标题】：Fastest way to display first frame of the video file in the DOM?在 DOM 中显示视频文件第一帧的最快方法是什么？
【发布时间】：2018-02-07 10:26:45
【问题描述】：

在页面上显示一帧视频的最快（最快）方式是什么？

我有一个<input type="file" /> 用于选择视频文件，我试图只显示其中的第一帧作为预览，但 FileReader 似乎太慢了。我使用 base64 逻辑制作了一个简单的视频预览，它适用于 ~1mb 的文件大小，但对于 ~20mb+ 的视频，在处理视频文件以进行预览时会出现巨大的过载。

我想知道有没有办法在里面显示它 <canvas> 或 <img> 不加载整个文件？谢谢！

【问题讨论】：

最快的方法是将第一帧存储为 jpeg 并显示。

标签： javascript html canvas video

【解决方案1】：

无需通过FileReader 将整个流读入内存。

只需通过URL.createObjectURL() 直接使用文件 blob 作为源，浏览器将缓冲负载，从而使您可以更快地提取帧（以及使用更少的内存）。

【讨论】：

是的，这里绝对应该使用 blobURI。不过有两个小注意事项： (1) 通过使用loadedmetadata 事件，您无需自己处理即可解决无限循环问题；在现代浏览器中，您甚至可以简单地执行video.play().then(()=>...。
(2) 在这种情况下，URL.revokeObjectURL 不会释放您想象的那么多内存。由用户系统上的文件生成的 BlobURI 仅仅是指向磁盘上文件的直接指针。撤销它只会删除指针，因此内存中没有任何内容。但是，在这种情况下，视频预加载确实很快，因此您的内存中确实会有一些无用的数据；但要让浏览器知道它可以释放它，您必须重置 MediaElement 的 src。