HTML5 video seeking on iPad

Question

I have an HTML5 video player with a custom seek bar, that's working great on the iPhone (playing inline) and on the browser.

It plays great on the iPad too and the seek bar is updated as the movie plays, but for some reason, I can't seek.

All of the values are correct and I'm trying to set:

myPlayer.currentTime = XX;

Unfortunately, the iPad refuses to set the .currentTime attribute.

From what I can gather the difference between the browser and iPad is that on the browser I get:

myPlayer.networkState = 3
myPlayer.readyState = 4

On the iPad I get:

myPlayer.networkState = 2
myPlayer.readyState = 3

It's exactly the same code, running a local MP4 video.

Any idea why this is happening?

Cheers, Andre

Answer 1

I've had all kinds of problems getting JavaScript to control audio elements, and a lot of frustration with the currentTime property, along with Apple's restrictions on what constitutes direct user initiation of events.

It wouldn't surprise me if there were some kind of weird bug with JavaScript & HTML5 video playback on the iPad (or "feature" that's undocumented), which requires a workaround. From my experience, the iPad has a unique way of doing things than what's in the official documentation.

You should check the error, buffered, seekable, and seeking properties of the video element. Looking at your readyState & networkState values, the iPad seems to think that the video has not been completely loaded - which is odd for a local resource.

buffered and seekable should be equal to the time range of your entire video. seeking should be TRUE. That should at least give you a little more information about the problem.

Have you tested it with other videos? It might be that there is some kind of encoding problem with the video that the iPad has a problem with.

Other than that - there was a bug in a previous iPad OS version that broke the ability to set the currentTime property. Are you using the latest OS version?

Answer 2

This issue is related with value used on the video.currentTime property. On my specific case I fixed the problem by always making sure I was using floating point numbers with 1 decimal digit during the seek.

Setting video.currentTime to ZERO on iOS 3.2 will indeed seek the video to the beginning but the value won't update after that - timeupdate event is still dispatched normally but if you try to read currentTime it will always return the same value.

To seek to the begin of the video use 0.1 instead of 0, to seek to 12.2345 use 12.2.

PS: you can use (+(12.2345).toFixed(1)) to limit the number of decimal digits to 1.

Answer 3

Kyle's answer is a good one. I would add, you can't assume the seekable attribute is filled in after any particular event. This means you can't wait for events like loadedmetadata, canplay, or any other and assume that you're able to set currentTime safely at that point.

It seems the safest way to do it is to check seekable after every video-related event, and if it encompasses the time you want to seek to, set currentTime at that point. On iPad, seekable may not be filled until after the canplaythrough event, which is quite late.

See my blog post for more on this.