【发布时间】：2011-11-04 06:01:08
【问题描述】：
我想在用户将鼠标悬停在视频缩略图上时创建效果，它将通过显示该视频的一定数量的帧来预览视频。
有没有教这个效果的 jquery 插件或其他类型的教程？
【问题讨论】：
-
创建缩略图并使用 onmouseover 事件在图像中滑动。
标签： javascript jquery
【发布时间】：2011-11-04 06:01:08
【问题描述】：
将n 帧转换为动画 gif。使用视频的单帧作为默认状态图像并在悬停时交换。
Stop a gif animation onload, on mouseover start the activation
【讨论】：
您不会找到能够捕捉所有这些行为的特定插件，因为创建它会涉及使用几种不同的技术。
捕获帧
第一步是从视频中捕获帧以供以后使用。如果网站允许用户上传视频，那么您将需要某种方式来处理它们，命令行工具 ffmpeg (http://ffmpeg.org/) 将允许您这样做，类似的问题是如何提取各个框架已在此处得到解答：http://ubuntuforums.org/showthread.php?t=1141293
如果您使用 Rails 作为框架，那么像 Paperclip 或 CarrierWave 这样的文件上传工具会在 shell 中提供一些不错的挂钩，供您在上传完成后使用，您需要对其进行处理。您可能还希望将视频转换为与在浏览器中提供和显示兼容的格式，可能通过 Flash 播放器或 HTML5 视频元素。
显示框架
一旦帧被捕获，您需要将它们存储在您的服务器上并将它们与视频文件相关联，Paperclip 或 CarrierWave 将使这更容易做到。前端逻辑将遵循以下步骤：
- 将视频文件渲染到页面，默认显示第一个捕获的帧。
- 用户将鼠标移到触发 mouseenter 事件的元素上。
- 您捕获 mouseenter 事件并启动 setInterval 计时器。
- 间隔的每一步，都将显示的缩略图替换为列表中的下一个。或许您可以以这样一种方式命名服务器上的文件，以便于构造下一个文件的名称。当您到达列表末尾时，只需再次显示第一个缩略图即可。
- 当用户将鼠标移出元素时，使用 clearInterval 命令清除间隔。
【讨论】：