Scrubbing HTML5 video

Question

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

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?

Answer 1

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

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 combine mousedown and mousemove as is suggested here: 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.

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.

Answer 2

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

Answer 3

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