Playing HTML5 video backwards on iOS

I'm trying to play an HTML5 video in reverse on an iPad (The video needs to switch between forward and reverse arbitrarily based on user input).

The HTML5 <video> element includes a property called playbackRate which allows video to be played at a faster or slower rate, or in reverse. According to Apple's documentation, this property is not supported on iOS.

Playing in reverse can be faked without the use of playbackRate by setting the currentTime property multiple times per second (e.g. 10-30 updates per second). This approach works on desktop Safari but it seems that seeking is capped on iOS devices to around 1 update per second - too slow in my case.

Is there any way to play an HTML5 video backward on an iOS device (namely an iPad)?

(I'm testing on an iPad 2 running 4.3.1)

Edit Report

NOTE: I was stupid and missed a non-trivial part of the question, so the following is pretty useless for iOS purposes

After a moment of Googling, I found the following code along with explanation on how to support reverse-playback of html5 video on Webkit based browsers:

function speedup(video, direction) {
   if (direction == undefined) direction = 1; // or -1 for reverse
   if (video.playbackRate != undefined) {
      video.playbackRate = direction == 1 ? 2 : -2;
   } else { // do it manually
      video.setAttribute('data-playbackRate', setInterval ((function playbackRate () {
         video.currentTime += direction;
         return playbackRate; // allows us to run the function once and setInterval
      })(), 500));
   }
}

function playnormal(video) {
   if (video.playbackRate != undefined) {
      video.playbackRate = 1;
   } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); }
}

Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

You need to pass in the html5 video object to the speedup function, but then again that function could possibly be reduced into the following (I haven't tested this yet, it is an iPad specific function):

function reverseVideo(video) {
    video.playbackRate = -1;
}

Feel free to play around, and search for more information on the html5 video element :)

answered 2012-01-05T14:11:06.863

Playing HTML5 video backwards on iOS

1 Answer

Your Answer