Javascript 在DOM中显示视频文件第一帧的最快方法？

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

我有一个选择视频文件的

，我试图只显示其中的第一帧作为预览，但FileReader似乎太慢了。我用base64逻辑制作了一个简单的视频预览，它可以在约1mb的文件大小下正常工作，但是对于约20mb+的视频，在为预览处理视频文件时会出现巨大的过载

我想知道有没有办法在里面展示它

---

或

而不加载整个文件？谢谢

无需通过

文件读取器

将整个流读入内存

---

只需通过

URL.createObjectURL（）

将文件blob直接用作源，浏览器将缓冲负载，从而使您能够更快地提取帧（同时使用更少的内存）。

无需通过

文件读取器将整个流读入内存

只需通过
URL.createObjectURL（）
将文件blob直接用作源，浏览器将缓冲加载，从而使您能够更快地提取帧（以及使用更少的内存）.
最快的方法是将第一帧存储为jpeg并显示。最快的方法是将第一帧存储为jpeg并显示。是的，这里绝对应该使用blobURI。不过有两个小注意事项：（1）通过使用
loadedmetadata
事件，您无需自己处理无限循环问题；在现代浏览器中，您甚至可以简单地执行
video.play（）。然后（（）=>…
（2）在这种情况下，
URL.revokeObjectURL
不会像您想象的那样释放出那么多内存。从用户系统上的文件生成的BlobURI仅仅是指向磁盘上文件的直接指针。撤销它只会删除指针，因此内存中没有任何内容。但是，在这种情况下，视频预加载速度非常快，因此确实会有some内存中的无用数据；但要让浏览器知道它可以释放这些数据，您必须重置MediaElement的src。是的，这里肯定应该使用blobURI。不过有两个小注意事项：（1）通过使用
loadedmetadata
事件，您无需自己处理无限循环问题；在现代浏览器中，您甚至可以简单地执行
video.play（）。然后（（）=>…
（2）在这种情况下，
URL.revokeObjectURL
不会像您想象的那样释放出那么多内存。从用户系统上的文件生成的BlobURI仅仅是指向磁盘上文件的直接指针。撤销它只会删除指针，因此内存中没有任何内容。但是，在这种情况下，视频预加载速度非常快，因此确实会有som在内存中删除无用的数据；但要让浏览器知道它可以释放这些数据，必须重置MediaElement的src。