如何创建视频预览缩略图？

Question

我想在用户将鼠标悬停在视频缩略图上时创建效果，它将通过显示该视频的一定数量的帧来预览视频。

是否有一个jquery插件或其他类型的教程来教授这种效果？

Answer 1

您将找不到能够捕获所有这些行为的特定插件，因为创建此行为将涉及使用一些不同的技术。

捕获框架

第一步是从视频中捕获帧以供以后使用。 如果网站允许用户上传视频，那么你将需要某种方式来处理它们，命令行工具ffmpeg （ http://ffmpeg.org/ ）将允许你这样做，类似的问题如何提取个人框架已在此处得到解答： http ： //ubuntuforums.org/showthread.php？t = 1141293

如果你使用Rails作为你的框架，那么像Paperclip或CarrierWave这样的文件上传工具会为shell提供一些很好的钩子，供你在上传完成后使用，你需要处理它。 您可能还希望将视频转换为兼容在浏览器中提供和显示的格式，可能通过Flash播放器或HTML5视频元素。

显示框架

一旦捕获了帧，您将需要将它们存储在服务器上并将它们与视频文件相关联，Paperclip或CarrierWave将使这更容易。 前端逻辑将遵循以下步骤：

• 将视频文件渲染到页面，将第一个捕获的帧显示为默认值。
• 用户将鼠标移动到触发mouseenter事件的元素上。
• 捕获mouseenter事件并启动setInterval计时器。
• 间隔的每一步，您将显示的缩略图替换为列表中的下一个缩略图。 也许您可以在服务器上命名文件，以便很容易构造下一个文件的名称。 当您到达列表的末尾时，只需再次显示第一个缩略图。
• 当用户将鼠标移出元素时，使用clearInterval命令清除间隔。

Answer 2

将n帧转换为动画gif。 使用视频的单帧作为默认状态图像并交换悬停。

停止gif动画onload，在mouseover上启动激活