Cas*_*Yee 9 javascript jquery html5 html5-video
我一直在寻找一个可以通过HTML5视频"擦洗"的解决方案.我还没有找到一个,并且即将开始写我自己的.但在我这样做之前,我认为首先将它运行到SO是有道理的.
在我们进入我的方法之前,请看到:
http://www.kokokaka.com/demo/bluebell_ss10/site
这个网站当然是用Flash构建的,但它是我想用HTML5实现的一个例子.
我已经在视频标签上尝试了playbackRate(-1)属性而没有太多运气.我怀疑这是因为编码(ogg,mp4,vp8)更适合转发播放.
有了这个,我看到两种可能的方法:
创建两个视频,一个用于前向播放,另一个用于向后播放.这当然会使任何不理想的视频的大小翻倍.
将视频分成单独的jpg帧并换出图像.这意味着我没有声音,但在我的特定应用中,这不是问题.
我觉得第二种选择最适合我的特定应用,并允许一些灵活的播放.你怎么看？
通过任何方式生成一堆视频的缩略图。一旦你掌握了视频中的所有拇指，你就可以使用类似的东西，它可以检测鼠标移动并根据移动替换缩略图 - 悬停擦洗。
示例 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 视频，也没有声音。
但是，如果您将鼠标移动绑定到音轨中的时间码，我想您也可以添加声音。那时，您可能可以轻松地操纵视频轨道。
| 归档时间： |
|
| 查看次数： |
12476 次 |
| 最近记录： |