html - readyState issue with HTML5 video elements on ios safari

Question

It seems on the iPad (iOS v. 5.1.1), Safari does not keep a video element's readyState value according to specification. Even while loading from the video source readyState equals zero.

I've made a demonstration jsfiddle which continuously checks the video's readyState. A funny observation: the readyState changes only after clicking the play button.

Actually, I've expected the readyState to switch to a higher number during loading (as it is the case with all browsers on the desktop I've tested--including Safari.) Is there a workaround? Am I getting something wrong here?

Answer 1

From the Apple developer documentation:

Note: The preload attribute is supported in Safari 5.0 and later. Safari on iOS never preloads.

According to Apple the desired behavior on a mobile device is that loading only starts after you actively request the resource so as to not waste bandwidth or battery.

Regarding your question this means that Apple is adhering to the spec. Since no preload occurs and loading only starts after you click the play button the readyState is zero before that point in time.

However, the video tag has special events which are supposed to give more information than readyState.

• onCanplay
• onCanplaythrough
• onProgress

Again, quoting the Apple developer library (Using DOM Events to monitor load progress)

Note: On the iPad, Safari does not begin downloading until the user clicks the poster or placeholder. Currently, downloads begun in this manner do not emit progress events.