We’ve all heard of it. Most sites are using it. It’s called HTML5 and more specifically for this post – HTML5 Video. For maximum browser support, use three types of video. Add them as <source> tags, wrap them all up in a video tag and you’re off and running. In its simplest form, a HTML5 video is implemented like so:

[html]
<video controls>
<source src="movie.webm" type=’video/webm’>
<source src="movie.ogv" type=’video/ogg’>
<source src="movie.mp4" type=’video/mp4′>
<p>This is fallback content</p>
</video>
[/html]

Flash bad, HTML5 Good. MmmmmKay…

So flash is dying (is dead?) has obvious SEO shortcomings and Apple dropped support for flash in 2010. Steve Jobs was empathetic but pretty direct in his explanation. The alternative? Well HTML5 Video. But…

HTML5 video ISN’T working on my iPad, iPhone or any iOS device! What’s the digs?

Well, turns out there are a number of reasons for this the interwebs are littered with Q and A’s on the very subject. The main culprit seems to be an issue with delivering the videos with the proper MIME type. I’ve found this MIME situation as predominately a red hearing as pretty much any modern host should be aware of HTML5 and the need to stream video but I’ve seen it once. So worth a look-see.

No autoplay support is tripping you up

To make your HTML5 Video autoplay onload you can add the autoplay attribute to the video tag.
[html]
<video autoplay="true" >
…
[/html]
The problem is that iOS devices DO NOT support this attribute. It’s actually less of a support issue but more of Apple intentionally choosing not to recognize the attribute at all. In other words, I’m suggesting your HTML5 might be working justing fine and you just don’t know it. Why did Apple do this? In the article I linked to above, Steve Jobs says:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

Bandwidth is precious – particularly on mobile devices. Apple feels as though forcing a user to download your snazzy video is bad user experience. So take the following scenario:

[html]
<video autoplay="true" controls="false">
[/html]

What you’ll get is a video that plays onLoad WITHOUT controls. So what about on iOS devices? Since you can’t autoplay and you’ve hidden the controls you’ve sort of boxed iOS into a corner as they can’t even start the video manually. They get nothing.

iOS autoplay onload solutions?

Not really. More so compromises. The obvious answer is to turn controls on so iOS users can turn on the video as they see fit. You can also attach event handler to other DOM elements (for manual video playing) illustrated well on Stackoverflow. I prefer to add “poster” attribute. This gives iOS users a static image. It also gives desktop users a specific image/frame on videos that are set to autoplay=”false”.