清除HTML5视频

Question

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

在我们进入我的方法之前，请看：

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

这个网站当然是用Flash构建的，但它是我想用HTML5实现的一个例子。

我在视频标签上尝试了playbackRate（-1）属性而没有太多运气。我怀疑这是因为编码（ogg，mp4，vp8）更适合转发播放。

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

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

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

我觉得第二个选项最适合我的特定应用，并允许一些灵活的播放。你觉得怎么样？

Answer 1

无论如何都要为您的视频制作一堆缩略图。 一旦你拥有了视频中的所有拇指，就可以使用这样的东西来检测鼠标移动并根据移动替换缩略图 - 悬停擦洗。

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

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

或者对于不那么冗长的东西，如果你想将所有缩略图水平连接成一个精灵，你可以使用这个，这是悬停磨砂的另一个漂亮的例子。

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

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

这并没有真正为您提供所需的效果，因此您需要按照此处的建议合并mousedown和mousemove：https://stackoverflow.com/a/1572688/1579789

这会在某种程度上为您提供所需的效果，但不会使用HTML5视频，也不会产生声音。

但是，如果您将鼠标移动绑定到我想要的音频轨道中的时间码，您也可以添加声音。那时，你可能很容易操纵视频轨道。

Answer 2

我认为你想要的东西可以用popcornjs.org

提供的popcornjs来完成

Answer 3

我偶然在featured story on the Google homepage was this之后找到了这个问题，其中包含视频清理程序。

我之前从未见过视频洗涤器而且被吹走了！

然后我找到了https://www.emergeinteractive.com/demos/javascript-video-scrubber/，其中介绍了如何实现它。

这些人可能在几年前为耐克发明了这个概念。

他们提供了一个代码段和一个link to Github：

DemoViewModelValidator