使用javascript从视频src动态生成多个缩略图
在你说这件事做不到之前，请先看看我的思路，然后娱乐我。我在堆栈溢出上读到，它是无法完成的，以及如何使用ffmpeg和服务器端的其他东西来实现它，这是非常棒和简单的理解。我甚至使用了我在github上找到的Video.js的扩展，这使得这一步更容易。但是，无论如何，如果我没有<video src=... >的副本，而且我真的不想得到一个，怎么办？
我不想用服务器来做这个减去铬金丝雀，现在使用眨眼的webkit叉子)，这有点道理，为什么某些浏览器只支持某些视频容器。
所以，为了简单起见:我想让这个功能只在Chrome上使用，只在MPEG-4 AVC视频容器上使用，为什么不能这样做呢?如果有些人能在播放时查看视频的每一帧呢？
附加备注，这样就可以通过将帧绘制到画布上来生成视频缩略图，这只是解决我的问题的最终解决方案的一部分，我希望每次都这样做，每次在用户完成第一次播放之后，都不会在服务器上存储图像。我最终想要做的是在下载视频时生成一个缩略图，当用户使用拖动的滚动条到视频中的某个点时，可以查看该缩略图。因此，这将需要在视频帧可用时完成，而不是在浏览器呈现给用户查看的时候。
回答 1
Stack Overflow用户
发布于 2013-05-03 04:52:20
一个人实际上可以把视频输入到画布上，如HTML5Doctor中所示。基本上，这句话的魔力是：
canvasContext.drawImage(videoElement,0,0,width,height);然后，您可以运行一个定时器，定期从画布中检索框架。这个有两种选择
至于保存，将数据发送到服务器，使用该数据重建映像，并保存到磁盘。我还建议您将画布和视频大小调整到您希望屏幕截图的大小，因为视频-画布传输自动管理缩放。
当然，这是受浏览器支持的视频格式的限制。以及对画布和视频的支持。
在第一次渲染时生成缩略图？你会遇到这样的问题，因为：
- 除非在视频元素上呈现，否则不能生成所有帧。
- 假设您在第一次运行时生成了缩略图，并希望将它们用于进一步运行。Base64数据非常长，通常是文件大小的3倍，如果是图像。原始像素数据数组的长度为
width x height x 4。最可行的存储选择是localStorage，根据浏览器的不同，它只有5-10MB。 - 无法将生成的图像缓存到浏览器缓存中(可能存在我不知道的使用数据-urls的缓存攻击)。
我建议你用服务器代替。这是太多的负担和麻烦，做在客户端。
https://stackoverflow.com/questions/16351651
复制相似问题
腾讯云开发者
