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

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。使用视频的单帧作为默认状态图像并在悬停时交换。

Stop a gif animation onload, on mouseover start the activation