Playing HTML5 video backwards on iOS

10
votes

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)

5
iosipadhtmlmobile-safarihtml5-video
You could maybe store a normal and a reversed copy of the video on the server, and switch between them? – Mihai
I tried that too. While the switching was faster than I had anticipated, the video dropped and the quicktime logo appeared, etcetera. I need it to be a seamless switch. – Simon Cave
Did you solve this? How long detailed is the video, could you slice it into an arrary of images and draw/flip it onto a canvas object instead of <video>? – Adam Marshall
No solution. Too much video for an image sequence. I'll leave the question open for a while longer to see if anyone has any magic hacks to offer. – Simon Cave

5 Answers

3
votes

As Mihai suggested, use the two versions and update the seek location when the user changes the playback direction.

Layer the videos in DIVs on top of one another, and when the playback direction is flipped, toggle the div visibility (and pause playback of the the one being hidden).

So this is the timeline:

  1. User clicks playback toggle.
  2. Pause displayed video.
  3. Get Seek location of displayed video.
  4. Subtract that value from the video duration.
  5. Seek to this value in the non-displayed video.
  6. Toggle displayed video DIVs.
  7. Begin playback of newly displayed video.
2
votes

Why not stitch the reverse and forward versions together into one movie?

That removes the problem of unloading and loading video when the user flips the direction. With a single movie approach, when the user flips direction, all you need to do is figure out the corresponding point in the other half of the movie and seek to there.

2
votes

The playbackRate attribute is now supported on iOS 6 Safari.

0
votes

My suggestion is to make a "fake" video player in your HTML code. Then capture the user's attempt to "play" the video using the safari/ios callback methods. Then create a MPMoviePlayerController that actually loads the video and display it over the original position of the video in the browser or only support full screen play. MPMediaPlayback protocol supports reverse playback via the currentPlaybackRate property so hopefully, this should be a temporary fix as I can't see the iOS version of Safari not eventually implementing this feature since it is supported by the native player.

0
votes

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 :)