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

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

• javascript
• android
• html
• cordova
• html5-video

• any help here please? am in a great need of this functionality – Lohith Korupolu Commented Aug 5, 2013 at 12:18
• That link works for me on latest Chrome. What browser are you using? Do you mean it won't work on your android/cordova app? – MBillau Commented Aug 5, 2013 at 17:59
• @MBillau - thanks for your reply. Yes, I tried it on Google Chrome. Its version is "Version 28.0.1500.95 m". And, have you ever tried on with android/cordova? – Lohith Korupolu Commented Aug 6, 2013 at 5:31
• Hi, no I have not had a change to try it on android cordova yet but will hopefully be able to test it today. I'm a little concerned because Cordova Android uses an "old" browser, (the WebView) that has known limitations with some fancy things (see on this site people having problems with some more advanced browser features.) Maybe this is one of those limitations, but I'm not sure. – MBillau Commented Aug 6, 2013 at 12:34
• @MBillau - I got the jsfiddle example working on my browser and on an android device as well (using cordova). But the reverse play distorts a little. It is not smooth. Also, is there a chance to play my video in reverse directly when the screen loads? At this moment, we can rewind/reverse only after the video plays for a while (few seconds). – Lohith Korupolu Commented Aug 7, 2013 at 6:17

1 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/2010/05/video/mediaevents.html

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

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