The (Generally) Wonderful HTML5 video Tag!

April 26, 2011

Hi all! Kevin here, checking into the ol’ blogosphere to share with you a slice of my love for web application development, this time in the form of my recent HTML5 video tag experiences!

One thing that’s great about working at Infield Digital is having the opportunity to work with clients that are not only open to using new technology but excited about the idea! One of the more exciting up-and-coming trends in the web realm is the adoption and support of HTML5. The topic of HTML5 could (and does!) fill many a book, blog and forum, but of particular interest to me this week is the HTML5 <video> tag.

The humble <video> tag is one of the more significant and powerful tags offered in the HTML5 specification. It allows a wide range of devices and platforms to play video files, natively, without the need for Adobe Flash Player or other third party browser plugins. That’s great news for the majority of mobile users out there who aren’t able to view flash video. It’s even better news for our clients who would like to use video media to share product information, user-generated content, or other marketing materials with their customers in the ever-growing mobile space.

Plus, the HTML5 <video> tag is really easy to implement and nearly foolproof!!

…in a perfect world.

In reality, the HTML5 video tag is not quite ready to be used out in the wild without some serious testing and (several!) contingency plans, in particular for mobile devices. To save everybody some time, I’d recommend checking out Video for Everyone, or use the handy HTML5 video generator, which will help you to create a solid block of HTML markup with support for multiple video encoding formats and even an Adobe Flash Player fallback for older browsers that don’t support the HTML5 video tag (hello, Internet Explorer 6, 7 and 8!).  These are great tools and resources to help you get started with HTML5 <video>.

Unfortunately, one thing that can’t be solved with HTML markup is video support in Android browsers. Before Android 2.3 (Gingerbread), Google did not support <video> controls, so while the above resources will allow you to insert a video on an Android device, the video won’t actually play (which is sort of the point!) without some javascript. Luckily again, there are several great resources which will take care of most of the heavy lifting. MediaElement.js is a personal favorite of mine, but Video-JS is also very popular. My preference is to only use these javascript libraries where needed (for instance Android 2.2 or below devices) and allow for a native HTML5/Flash experience on devices that can handle it.

So, the HTML5 <video> tag – use it now, but be sure to spend some time testing on your client’s targeted browser platforms. Be prepared for some small inconsistencies, but hopefully using some of the resources mentioned above you’ll be able to keep those to a minimal! On my to-do list: create an extbase extension for TYPO3 that will allow clients to upload a video file in ANY format, and then encode/transcode the video (using the wonderful Zencoder service) and generate a HTML5, IE and mobile (even Android!) friendly video player. Keep an eye out here at the Infield Digital blog, and please, drop us a line with any questions or comments!