readyState issue with HTML5 video elements on ios safari
html, ios, safari
Solution
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.
Problem
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?