Playing HTML5 video backwards on iOS

Question

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)

Answer 1

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.