HTML5 Scrub Video

Question

I was looking for a solution in which I can "scrub" through an HTML5 video. I have not found it yet and was about to start writing. But before I do this, I thought it would make sense to run it in SO first.

Before moving on to my approach, see this:

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

This site is, of course, built in Flash, but serves as an example of what I would like to achieve using HTML5.

I experimented with the playbackRate (-1) attribute in the video tag without much luck. I suspect this is due to the fact that the encoding (ogg, mp4, vp8) is better suited for forward playback.

with this, I see two possible approaches:

• create two videos, one for direct play and one for reverse play. this, of course, doubles the size of any videos that aren't perfect.

• split the video into separate jpg frames and swap images. This would mean that I have no sound, but in my particular application this is not a problem.

I feel that the second option is best suited for my particular application and provides some flexibility in playback. What do you think?

Answer 1

I think you can do it with popcornjs, available at popcornjs.org

Answer 2

Create a bunch of thumbnails of your video in any way. Once you have all your thumbs up from the video, you can use something like this, which detects mouse movement and replaces thumbnails based on erasing motion - pointing.

Example 1: http://codepen.io/simsketch/pen/gwJBRg

Example 2: http://jsfiddle.net/simsketch/x4ko1x1w/

or for something less detailed, if you want to horizontally combine all the thumbnails into a sprite, you can use this, another great example of a hover scrub.

http://jsfiddle.net/simsketch/r6wz0nz6/152/

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

this does not give you the desired effect, so you need to combine mousedown and mousemove as suggested here: fooobar.com/questions/197038 / ...

this will somewhat give you the effect you are looking for, but without using HTML5 video and without sound.

however, you can add sound if you attach the mouse movement to a temporary code in the soundtrack, I suppose. at this point, you could probably just as easily manipulate the video track.