0

在你说它做不到之前，请先看看我的思路并娱乐我。我在 stackoverflow 上读到它无法完成，以及如何使用 ffmpeg 和服务器端的其他东西来实现它，这些东西非常简单，足以理解.. 我什至使用了我在 github 上找到的 Video.js 的扩展使这一步更容易。但是，如果我没有 的副本<video src=... >并且我真的不想得到一个怎么办？

我不想使用服务器来做这件事好吧，我明白了，感谢Paul Irish的一篇文章，视频播放不是 web-kit 端口的共享方面（基本上支持每个浏览器的代码。 ..减去现在使用blink a webkit fork的chrome canary）这有点道理，为什么某些浏览器只支持某些视频容器。

所以为了简单起见：我想让这个功能只在 Chrome 和 MPEG-4 AVC 视频容器上可用，如果我可以在播放时实际查看视频的每一帧，为什么不能这样做？

附加说明 因此可以通过在画布上绘制框架来生成视频缩略图，这只是我的问题的最终解决方案的一部分，我希望每次观看视频时都这样做，而不是在我的用户完成第一次播放后的服务器。我最终想要做的是在下载视频时生成一个缩略图，当用户使用拖动滚动条将 ff/rw 移动到视频中的某个点时可以查看该缩略图。因此，这需要在视频帧可用时完成，而不是在浏览器渲染它们供用户查看后完成

4

1 回答 1

2

实际上，可以将视频输入到画布中，如 HTML5Doctor 中所示。基本上，具有魔力的线是：

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

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

  1. 获取原始像素数据
  2. 获取base64编码数据

至于保存，将数据发送到服务器以使用该数据重建图像，然后保存到磁盘。我还建议您将画布和视频的大小调整为您希望屏幕截图的大小，因为视频画布传输会自动管理缩放。

当然，这受限于浏览器支持的视频格式。以及对画布和视频的支持。

在第一次渲染期间生成缩略图？你会遇到问题，因为：

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

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

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

我建议您改为在服务器上执行此操作。在客户端做太多的负担和麻烦。

于 2013-05-03T04:52:20.410 回答