清理 HTML5 视频答案

【问题标题】：Scrubbing HTML5 video清理 HTML5 视频
【发布时间】：2011-11-18 22:44:50
【问题描述】：

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

在我们进入我的方法之前，先看看这个：

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

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

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

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

创建两个视频，一个用于向前播放，另一个用于向后播放。这当然会使任何不理想的视频的大小增加一倍。
将视频分割成单独的 jpg 帧并换出图像。这意味着我没有声音，但在我的特定应用程序中，这不是问题。

我觉得第二个选项最适合我的特定应用程序，并且在播放时具有一定的灵活性。你怎么看？

【问题讨论】：

不太了解 HTML5 视频，但您是否尝试过操作 currentTime 属性？ dev.w3.org/html5/spec/…
不，但我相信我会遇到同样的问题。我会进一步调查。谢谢！
你好，这个问题你解决了吗？
这个@CaseyYee 有什么新东西吗？

标签： javascript jquery html html5-video

【解决方案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 视频，也没有声音。

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

【讨论】：

【解决方案2】：

我认为你想要的可以用 popcornjs 完成，可在popcornjs.org 获得

【讨论】：

我会看看这个。谢谢

【解决方案3】：

我今天碰巧在featured story on the Google homepage was this 之后发现了这个问题，它有一个视频清理器。

我以前从未见过视频清理器，被震撼了！

然后我找到了https://www.emergeinteractive.com/demos/javascript-video-scrubber/，里面描述了如何实现。

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

他们提供代码 sn-p 和 link to Github:

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
        }
    }
}

【讨论】：