javascript - 清理 HTML5 视频

Question

我一直在寻找一种可以“擦洗” HTML5 视频的解决方案。我还没有找到一个，正要开始写我自己的。但在我这样做之前，我认为首先让它通过 SO 是有意义的。

在我们进入我的方法之前，请看这个:

http://www.kokokaka.com/demo/bluebell_ss10/site

这个网站当然是用 Flash 构建的，但作为我想使用 HTML5 实现的示例。

我在视频标签上尝试了 playbackRate (-1) 属性，但运气不佳。我怀疑这是因为编码(ogg、mp4、vp8)更适合向前播放。

有了这个，我看到了两种可能的方法:

1. 创建两个视频，一个用于向前播放，另一个用于向后播放。这当然会使任何不理想的视频的大小加倍。

2. 将视频拆分为单独的 jpg 帧并换出图像。这意味着我没有声音，但在我的特定应用程序中，这不是问题。

我觉得第二个选项最适合我的特定应用，并允许在回放方面有一定的灵 active 。你怎么看？

Answer 1

通过任何方式生成一堆视频缩略图。 一旦您从视频中获得了所有的拇指，您就可以使用类似这样的东西，它可以检测鼠标移动并根据移动替换缩略图 - 悬停擦洗。

示例 1:http://codepen.io/simsketch/pen/gwJBRg

示例 2:http://jsfiddle.net/simsketch/x4ko1x1w/

或者对于不那么冗长的事情，如果你想将所有缩略图图像水平连接成一个 Sprite ，你可以使用这个，悬停滑动的另一个漂亮的例子。

http://jsfiddle.net/simsketch/r6wz0nz6/152/

但您需要将事件绑定(bind)到 mousedown 而不是 mousemove

这并不能真正给您带来预期的效果，因此您需要按照此处的建议将 mousedown 和 mousemove 结合使用:https://stackoverflow.com/a/1572688/1579789

这会在某种程度上为您提供您正在寻找的效果，但不使用 HTML5 视频，也没有声音。

但是，如果您将鼠标移动绑定(bind)到音轨中的时间码，我想您也可以添加声音。到那时，您可能可以轻松地操纵视频轨道。