如何使用 JavaScript 截取 HTML5 视频的不同屏幕截图？答案

【问题标题】：How can different screenshots of a HTML5 video be taken using JavaScript?如何使用 JavaScript 截取 HTML5 视频的不同屏幕截图？
【发布时间】：2012-04-25 22:07:32
【问题描述】：

我一直在使用 HTML5 视频标签，我想实现一件事，我需要同时呈现视频的不同部分的多个屏幕截图，例如原始视频下方的一组缩略图。

到目前为止，我尝试了各种我在网上找到的方法，但到目前为止都没有成功。

我想要实现的是这样的：http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.html

任何帮助将不胜感激，在此先感谢。

【问题讨论】：

那些缩略图可能是在服务器端生成的。
它们当然不是在客户端播放视频时从客户端生成的，因为 (1) 它们在整个视频流加载之前都可用，并且 (2) 它们有自己的 URI：open.bbc.co.uk/rad/demos/html5/rdtv/episode2/ingex.jpg

标签： javascript html video canvas screenshot

【解决方案1】：

你试过“javaScript画布快照”吗？

http://html2canvas.hertzen.com/

Can you take a "screenshot" of the page using Canvas?

Using HTML5/Canvas/JavaScript to take screenshots

如果您想在桌面和/或服务器上使用 Node.jx 半自动执行此操作，还有“无头 webkit 浏览器”

【讨论】：

【解决方案2】：

这是不可能的。您无法访问视频流中的数据以从 JavaScript 中获取屏幕截图。您必须在服务器端执行此操作。

【讨论】：