动态生成多个缩略图从视频src与javascript

Question

在你说它不能完成之前，请看看我的思路和招待我。 我已经阅读了stackoverflow，它无法完成，以及如何实现这个使用ffmpeg和其他的东西在服务器端，这是伟大的和足够简单，足以领悟..甚至使用扩展到Video.js我发现在github这使得这一步更容易。但不管怎么样，如果我没有<video src=... >的副本，我真的不在意要拿到一个吗？

我不想使用服务器来做到这一点好与出路，我理解来自Paul Irish得益于职位，视频播放不是网络套件端口共享方面（的代码基本上为每个浏览器供电...现在使用blink一个webkit叉减去铬金丝雀）这有点合理，为什么某些浏览器只支持某些视频容器。为了简单起见：我想让这个功能只在Chrome和只有MPEG-4 AVC视频容器上可用，为什么不能做到这一点，如果一些我可以实际查看视频的每一帧，而同时它的回放？

额外注 所以视频缩略图的产生可能使用通过绘制帧发送到画布上，这只会是一个最终解决我的问题的一部分，我要做到这一点每一个每次视频在用户完成第一次播放后，不会在我的服务器上存储图像。我想最终解决的是生成缩略图，因为下载的视频可以在用户使用拖动滚动条将ff/rw拖到视频中的某个点时查看。因此，这需要在视频帧可用时完成，而不是由浏览器渲染以供用户查看。

Answer 1

实际上可以将视频馈送到画布as seen here in HTML5Doctor。基本上，这样做的线条是：

canvasContext.drawImage(videoElement,0,0,width,height); 

然后，您可以运行定时器，定期从画布中检索帧。有2个选项在这一个

1. get raw pixel data
2. get the base64编码数据

至于保存，将数据发送到所述服务器使用该数据来重构图像，并保存到磁盘。我还建议您将画布和视频的大小设置为希望截图的大小，因为视频画布传输会自动管理缩放比例。当然，这是limited by the video formats that are supported by the browser。以及支持canvas和video。

---

在第一次渲染期间生成缩略图吗？你会遇到以下问题：

• 除非在视频元素上呈现，否则无法生成所有帧。

• 假设您在第一次运行期间生成了缩略图，并且希望将它们用于进一步运行。 Base64数据非常长，通常是图像文件大小的3倍。原始像素数据阵列的长度为width x height x 4。最可行的存储候选者是localStorage，根据浏览器的不同，它只有5-10MB。

• 无法将生成的图像缓存到浏览器缓存中（可能存在缓存破解，我不知道使用数据url）。

我建议你在服务器上代替它。在客户方面做太多的负担和麻烦。