javascript 擦洗 HTML5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8190094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrubbing HTML5 video
提问by Casey Yee
I've been looking for a solution where i can "scrub" through HTML5 video. I haven't found one yet and was about to start writing my own. But before i do that, i thought it would make some sense to run it past SO first.
我一直在寻找一种解决方案，我可以在其中“清理”HTML5 视频。我还没有找到，正准备开始写我自己的。但在我这样做之前，我认为先让它通过 SO 是有意义的。
Before we get into my approach, see this:
在我们进入我的方法之前，先看看这个：
http://www.kokokaka.com/demo/bluebell_ss10/site
http://www.kokokaka.com/demo/bluebell_ss10/site
This site of course is built in Flash but serves as an example of what i would like to achieve using HTML5.
这个网站当然是用 Flash 构建的，但作为我想要使用 HTML5 实现的一个例子。
I've experimented with the playbackRate (-1) attribute on the video tag without much luck. I suspect this is because the encoding (ogg, mp4, vp8) are better suited to forward playback.
我在 video 标签上尝试了 playbackRate (-1) 属性，但运气不佳。我怀疑这是因为编码（ogg、mp4、vp8）更适合向前播放。
with this, i see two possible approaches:
有了这个，我看到了两种可能的方法：
create two videos, one for forward play, and another for backwards play. this of course doubles the size of any videos which is not ideal.
split the video into individual jpg frames and swap out the images. This would mean i have no sound, but in my particular application, this is not an issue.
创建两个视频，一个用于向前播放，另一个用于向后播放。这当然会使任何不理想的视频的大小加倍。
将视频拆分为单独的 jpg 帧并换出图像。这意味着我没有声音，但在我的特定应用程序中，这不是问题。
I feel that the second option is the best suited for my particular application and allows for some flexibility in playback. What do you think?
我觉得第二个选项最适合我的特定应用程序，并允许在播放时具有一定的灵活性。你怎么认为？
回答by Elon Zito
Generate a bunch of thumbnails of your video by any means. Once you have all of your thumbs from the video, you could use something like this, which detects mouse movement and replaces the thumbnail based on the movement -- hover scrubbing.
以任何方式生成一堆视频缩略图。一旦你从视频中获得了所有的拇指，你可以使用这样的东西，它检测鼠标移动并根据移动替换缩略图 - 悬停擦洗。
Example 1: http://codepen.io/simsketch/pen/gwJBRg
示例 1：http: //codepen.io/simsketch/pen/gwJBRg
Example 2: http://jsfiddle.net/simsketch/x4ko1x1w/
示例 2：http: //jsfiddle.net/simsketch/x4ko1x1w/
or for something less verbose, if you want to horizontally concatenate all the thumbnail images into a sprite, you can use this, another beautiful example of the hover scrub.
或者对于不那么冗长的内容，如果您想将所有缩略图图像水平连接成一个精灵，您可以使用这个，另一个漂亮的悬停擦洗示例。
http://jsfiddle.net/simsketch/r6wz0nz6/152/
http://jsfiddle.net/simsketch/r6wz0nz6/152/
but you would need to bind the event to mousedowninstead of mousemove
但您需要将事件绑定到mousedown而不是mousemove
this doesn't really give you the desired effect so you would need to combine mousedownand mousemoveas is suggested here: https://stackoverflow.com/a/1572688/1579789
这并不能真正给你想要的效果，所以你需要结合起来mousedown，并mousemove作为本文建议：https://stackoverflow.com/a/1572688/1579789
this would somewhat give you the effect you're looking for, but without using HTML5 video, and without sound.
这会在某种程度上为您提供您正在寻找的效果，但不使用 HTML5 视频，也没有声音。
however, you could add sound as well if you bind the mouse movement to a timecode in the audio track i suppose. at that point, you could probably just as easily manipulate a video track instead.
但是，如果您将鼠标移动绑定到音轨中的时间码，我想您也可以添加声音。那时，您可能也可以轻松地操作视频轨道。
回答by albert
i think what you want can be done with popcornjs, available at popcornjs.org
我认为你想要的可以用 popcornjs 来完成，可在popcornjs.org 上获得
回答by Ryan
I happened to find this question today after the featured story on the Google homepage was this, which features a video scrubber.
我今天偶然发现了这个问题，因为在Google 主页上的特色故事是 this，其中包含视频洗涤器。
I'd never seen a video scrubber before and was blown away!
我以前从未见过视频洗涤器，我被震撼了！
Then I found https://www.emergeinteractive.com/demos/javascript-video-scrubber/, which describes how to achieve it.
然后我找到了https://www.emergeinteractive.com/demos/javascript-video-scrubber/，它描述了如何实现它。
These folks may have invented this concept for Nike years ago.
这些人可能在多年前为耐克发明了这个概念。
They offer a code snippet and a link to Github:
他们提供了一个代码片段和一个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
}
}
}
