javascript - Scrubbing HTML5 video - Stack Overflow

admin管理员组

文章数量:1241129

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.

Before we get into my approach, see this:

This site of course is built in Flash but serves as an example of what i would like to achieve using 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.

with this, i see two possible approaches:

1. 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.

2. 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.

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?

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.

Before we get into my approach, see this:

http://www.kokokaka./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.

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.

with this, i see two possible approaches:

1. 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.

2. 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.

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?

• javascript
• jquery
• html
• html5-video

Share Improve this question Follow asked Nov 18, 2011 at 22:44 Casey YeeCasey Yee 44511 gold badge55 silver badges1212 bronze badges 4

• Don't know much about HTML5 video, but have you tried manipulating the currentTime property? dev.w3/html5/spec/… – Alohci Commented Nov 19, 2011 at 1:29
• no, but i believe i will be presented with the same problems. i will investigate further. thanks! – Casey Yee Commented Nov 21, 2011 at 18:48
• hi, have you solved this problem? – gregmatys Commented Mar 19, 2013 at 14:52
• Anything new with this @CaseyYee ? – Ben Racicot Commented Aug 24, 2013 at 2:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

Example 2: http://jsfiddle/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/simsketch/r6wz0nz6/152/

but you would need to bind the event to mousedown instead of mousemove

this doesn't really give you the desired effect so you would need to bine mousedown and mousemove as is suggested here: https://stackoverflow./a/1572688/1579789

this would somewhat give you the effect you're looking for, but without using HTML5 video, and without sound.

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.

i think what you want can be done with popcornjs, available at popcornjs

I happened to find this question today after the featured story on the Google homepage was this, which features a video scrubber.

I'd never seen a video scrubber before and was blown away!

Then I found https://www.emergeinteractive./demos/javascript-video-scrubber/, which describes how to achieve it.

These folks may have invented this concept for Nike years ago.

They offer a code snippet and a 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].plete) { // if the image is downloaded and ready
            $('#video').attr('src',images[thisStep].src); // change the source of our placeholder image
        }
    }
}

本文标签： javascriptScrubbing HTML5 videoStack Overflow