It seems it wasn’t that long ago I was writing about the “new” HTML5 approach to video. But it’s actually been quite a while. And in that time, support for the video tag has improved, as it has for HTML5 in general. Back then you had to worry a great deal about codecs and attribute support if you used the video tag. Today there isn’t 100% support on any browser, but with proper planning video can be played just about anywhere.
If you’re designing websites to use HTML5 video, there are a couple of resources you’ll find handy to get and stay up to date on what browsers support which features of the video tag.
The first is a report put together by the JWPlayer labs. Back in March they updated their State of HTML5 Video report. It really highlights the progress made by all the various competing companies and browsers to adhere to the standard. All the most popular browsers now support HTML5 video, with IE 8 being the most notable holdout.
All popular browsers also support H.264 including Firefox and Chrome. Google had threatened to drop support for the codec in favor of their open source V8/V9 codec. But in 2013 Google settled patent issues regarding H.264 and kept it in support. Firefox also initially refused support for H.264 because it wasn’t open sourced, but eventually added partial support for it because there was no suitable open source solution (according to Mozilla). Firefox relies on the underlying OS to provide the ability to decode the video. Still the JWPlayer report considers the support enough to include it as compatible.
Of course there are a lot of details to keep in mind when considering support for HTML5. The report covers the dirty details and anyone designing websites to use HTML5 video should give it a thorough read.
The second resource is HTML5test.com. The site examines the browser you are using and lets you know what elements of HTML5 are supported. The video results for my browser are shown in the image (above). You can also get details on other browsers as well. The site assigns a score to each tag, attribute and element of HTML5 (not just video) and reports back an overall score. Chrome receives the highest score of all browsers with IE still lagging the pack with the lowest score.
So while the HTML5 video tag still doesn’t make video as universal as the creators intended, it’s come a long way. Web designers are safe to use it, provided they take care in understanding what limitations still exist.