HTML 5 Web Video Basics

What is HTML?

Wikipedia defines HTML as “the basic building-blocks of webpages” so it only makes sense that each new version will include new features to improve web browsing and web development. Think of HTML as instructions for what to display within your browser, the blueprint for your page. In its infancy HTML was used to layout pages as well as help define how your content appeared (bolded, italicized, form elements, adding images, bullets, numbered lists, breaks, tables etc). Today HTML still has the same functionality that it did when it was first created but CSS (Cascading Style Sheets) are replacing HTML for better control in laying out pages and dynamic languages like PHP, Java, .Net, Ruby and more use HTML to display content. So if HTML is the blueprint, who builds the page? The answer is the browser but unfortunately not every browser reads the blueprint the same. The result is pages that function and look differently than the author intended.

HTML 5 and Web Video

One of the best improvements with HTML 5 is its ability to play video. Previously HTML alone was not able to display video so solutions such as Real Player, Flash, and Quicktime have been filling the gap. To play HTML 5 video you need a modern browser which is a problem for those of us dependent on an IT department within businesses and enterprises. For instance I’m sure many of your companies are still on Windows XP and Internet Explorer 6 (both released in 2001).

To play a video with HTML you will need to use one of the following modern browsers:

• IE 9.0+
• Firefox 3.5+
• Safari 3.0+
• Chrome 3.0+
• Opera 1.5+
• iPhone 1.0+
• Android 2.0+

Not to make things even more confusing but even when you have a modern browser like the ones listed above, it doesn’t mean your HTML 5 video will display. There are 3 main video codecs which are ogg/theora, H.264, and WebM. The matrix below does a very nice job laying out which codec each browser supports. A codec is software which compresses and decompresses audio and video. Video in its nature can be large so playing it over the Internet in the past proved difficult. Therefore codecs were created to compress audio and video so they could be streamed from a web server more efficiently. The chart below shows the three main video codecs as well as which are compatible for each browser.

(Source)

• Ogg/Theora: an open source standard without any patents.
• H.264: the most popular video codec to date which is used by Blu-ray and Internet video streaming sites like YouTube, Vimeo, YouTube, and more.
• WebM: an audio and video standard being sponsored by Google.

If you want to use HTML 5 to display a video on your site, the following code will be compatible with all modern browsers:

Blame the CPU

You may have heard flash requires more processing power (CPU consumption). The more recent versions of the flash player require significantly less of your CPU and there are lots of benchmarks now showing HTML 5 and flash require about the same amount of processing power.