Javascript 清除HTML5视频

我一直在寻找一个解决方案，我可以“擦洗”通过HTML5视频。我还没有找到一本，正准备开始写我自己的。但在我这么做之前，我认为先把它运行过去是有意义的

在开始我的方法之前，请看以下内容：

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

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

因此，我认为有两种可能的方法：

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

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

---

我觉得第二个选项最适合我的特定应用程序，并允许在播放时具有一定的灵活性。你认为呢？

我认为你想要的东西可以通过popcornjs来完成，可以在上找到，可以通过任何方式生成视频的缩略图。 一旦你有了视频中所有的拇指，你可以使用类似这样的东西，它可以检测鼠标移动并根据移动替换缩略图——悬停擦洗

例1：

例2：

或者对于不太详细的内容，如果您想将所有缩略图水平连接到一个精灵中，您可以使用这个，另一个漂亮的悬停磨砂示例

但是您需要将事件绑定到

mousedown

，而不是

mousemove

这并没有真正给你想要的效果，因此你需要结合

mousedown

和

mousemove

，如下所示：

这会在某种程度上给你你想要的效果，但不使用HTML5视频，也不使用声音

---

但是，如果将鼠标移动绑定到音频轨迹中的时间码，那么也可以添加声音。在这一点上，你可能也可以很容易地操纵一个视频轨迹。

我今天碰巧发现了这个问题，它有一个视频洗涤器

我以前从未见过视频洗涤器，所以被风吹走了

然后我找到了，它描述了如何实现它。

这些人可能在几年前就为Nike发明了这个概念

它们提供了一个代码段和一个：

---

我对HTML5视频了解不多，但您是否尝试过操纵currentTime属性？没有，但我相信我也会遇到同样的问题。我会进一步调查。谢谢嗨，你解决这个问题了吗？这个@caseyee有什么新的吗？我会看看这个。谢谢

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      ||  
    window.msRequestAnimationFrame     || 
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

(function animloop(){
    requestAnimFrame(animloop);
    targetStep = Math.max( Math.round( getYOffset() / 30 ) , 1 ); // what frame to animate to
    if(targetStep != step ) { step += (targetStep - step) / 5; } // increment the step until we arrive at the target step
    changeFrame();
})();

function changeFrame() {
    var thisStep = Math.round(step); // calculate the frame number
    if(images.length > 0 && images[thisStep]) { // if the image exists in the array
        if(images[thisStep].complete) { // if the image is downloaded and ready
            $('#video').attr('src',images[thisStep].src); // change the source of our placeholder image
        }
    }
}