javascript - 在 DOM 中显示视频文件第一帧的最快方法?

标签 javascript html canvas video

在页面上显示视频的一帧的最快(最快)方式是什么?

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

我想知道是否有什么办法可以在里面显示它 <canvas><img>不加载整个文件?谢谢!

最佳答案

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

只需通过 URL.createObjectURL() 直接使用文件 blob 作为源,浏览器就会缓冲负载,从而使您能够更快地提取帧(并且使用更少的内存)。

关于javascript - 在 DOM 中显示视频文件第一帧的最快方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48652860/

相关文章:

html - 在网页的一部分中模拟移动分辨率

html - 客户在 WordPress header 中添加了一张图片,但未正确对齐

android - 我们如何定义 ViewObject(位图)的动态(抛物线)路径

javascript - CSS 样式不适用于 jquery

javascript - 如何在 Chrome 扩展程序中隐藏下载栏?

javascript - 获取子元素的值

javascript - 剑道网格 "editable false"用于更新, "editable true"用于创建

javascript - 使用 HTML 背景视频创建视差效果

javascript - 如何使用 Html5 Canvas 找到三 Angular 形内的鼠标点

javascript - 纯粹使用 JavaScript 以圆形路径移动图像