Notes on HTML5 Video and iPhone
by Jonathan Stark
I spent a day last week debugging a some video issues for one of my QQ clients and took the following notes in hopes of committing the video behavior to memory.
- Poster image is only displayed until the video is loaded.
- True/false attributes do not require values.
- Video can be played (and heard) even when not visible.
i.e. video { display: none } - The autoplay attribute is ignored on iPhone.
i.e. will not autoplay no matter what - The controls attribute is ignored on iPhone.
i.e. controls are visible no matter what - The remote file is downloaded whether or not the user clicks play.
- You can interact with the DOM while iPhone video player is open.
- You can make a video autoplay on iPhone by navigating directly to the video url. However, this is useless within the context of an Ajax app because it spawns a browser window.
I think I’m right about all of these points, but it didn’t do exhaustive PPK-style testing. If I’m wrong about any of these, PLMK in the comments.
P.S. For an excellent example of what’s possible with HTML5 Video, check out SublimeVideo from Jilion.
UPDATE: It turns out that the user agent doesn’t download the entire video when the page first loads. Rather, it appears that a partial range of data is requested and the web server responds with a 206 status:
206 Partial Content
The server is delivering only part of the resource due to a range header sent by the client. This is used by tools like wget to enable resuming of interrupted downloads, or split a download into multiple simultaneous streams.
Thanks to eric_carlson for this update.
Comments
The HTML5 Video element is awesome and certainly looks a lot easier to memorize than the old QuickTime style embeds. I had to write up a huge guide just to remind myself how to create them, not even trying to memorize them: http://jwr.cc/x/20
Hopefully the backwards behavior of downloading a video and waiting until the end to get the poster image can be corrected in the future.
I think you might have misunderstood. The poster image is dispalyed immediately on page load. However, once the video file has been downloaded, the poster image is replaced with the first frame of the video.
> Poster image is only displayed until the video is loaded
This is per the spec.
> The remote file is downloaded whether or not the user clicks play
The element should read only enough of the file to see if it playable or not. Does your server log show a request for the entire file before the user clicks play, or just a portion?
Cool – it looks like you might be right about the partial downloads. I’ve update the post. Thanks!
Hmm so I was under the impression that if you embed HTML5 video onto the page that the iphone would be able to play the video directly on the web page in the mobile safari browser. When I goto vimeo or youtube though it looks like the iPhone launches the native quicktime application in full screen taking the user temporarily out of the mobile safari browser. Is this how it’s working from your experience as well?
Hey there Jonathan. In fact you can autoplay on iPhone by faking a mouse click via Javascript, literally ‘clicking’ on the video automatically when you need to play it.
I tried that in the past and it didn’t work. When I saw your comment, I thought that something might have changed in the interim. I tried it again, but I still can’t get it to work. Can you provide an example?
Hi salazr, I’d be interested as well to see your example on how to autoplay a video on the iPhone using javascript
Aha! I found an example of how to autoplay a Video, you can find it here: http://roblaplaca.com/blog/2010/04/14/ipad-and-iphone-html5-video-autoplay/
Excellent! Thanks for the info.
You must be logged in to post a comment.