play a video in reverse using HTML5 video element

Question

I am working on a functionality explained below- Once a video is loaded/with a button click, it has to play in reverse. The target devices are smart phones and tablet devices. I am trying to do this using HTML5 tag and read about the playBackRate attribute. Further down, I am using the HTML5 stuff to generate my mobile apps using Phonegap.

Here's a link I found interesting but partially working - http://www.w3.org/2010/05/video/mediaevents.html

The playbackrate, when changed doesn't do anything except it pushes the video back, by whatever number is given there.

I read it here that when playBackRate is set to -1, the reverse playback should happen.

I am not clear on how to exactly implement this. Does the playbackrate actually do this reversing? or should I opt on doing something else?

NEW LINE HERE: I am almost there.. found a working example here. But this is not working when I am trying it on my system. I am not sure where I am making it wrong.

Answer 1

This is an old thread so I'm not sure how useful the following will be.

The Mozilla developer notes point out that:

Negative values [for playbackRate] don't currently play the media backwards.

Same goes for Chrome, but Safari on Mac works.

This page from w3c is great at observing and understanding events:

http://www.w3.org/2010/05/video/mediaevents.html

I took the jsfiddle you mentioned and added some extra controls for fast forward/rewind speeds:

http://jsfiddle.net/uvLgbqoa/

However, though this works fine for me with Chrome/Firefox/Safari, I should point out that it doesn't really address your key questions.

Firstly, the approach assumes that negative playback rates don't work (which at the time I write this, is largely true AFAICS). Instead, it fakes it by calculating and setting the current time in the video:

function rewind(rewindSpeed) {    
   clearInterval(intervalRewind);
   var startSystemTime = new Date().getTime();
   var startVideoTime = video.currentTime;
   
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       } else {
           var elapsed = new Date().getTime()-startSystemTime;
           log.textContent='Rewind Elapsed: '+elapsed.toFixed(3);
           video.currentTime = Math.max(startVideoTime - elapsed*rewindSpeed/1000.0, 0);
       }
   }, 30);
}

Chrome handles this quite seamlessly, even playing snippets of audio as it goes.

Secondly, I think you want to play the video in reverse as soon as the page loads. I can't imagine a use case for this, but the first issue I see is that the whole video will need to be downloaded prior to playback, so you'll need to wait - but download probably won't happen until you start playing. So you could set the currentTime to near the end and wait for the canPlay event, and then start playing in reverse. Even then, this seems very awkward.

I think there are these broad options:

1. Use a native video widget rather than HTML. I'm guessing (without checking) that the native API supports reverse playback.

2. Generate a proper reversed video and play it as normal. For example, on a server somewhere use a program like ffmpeg to reverse the video. Then your app downloads the video and plays it normally, which looks to the user like reverse.

Assuming it really does make sense to have an application that plays a video in reverse when you load it, then I'd personally go for #2.