Embedding Video In An HTML5 Webpage

March 24th, 2011 Leave a comment
Like the article?
HTML5 Video

No Internet user is a stranger to embedded video; from ads to YouTube music videos, embedded video has become as much a part of most webpages as text or images. Up to now, however, the HTML standard did not have any way to natively include video; these videos are embedded by using other plugins and non-standardized ways to make them show seamlessly on the page.

In the new HTML5 standard, however, there is a way to embed video natively in a webpage, avoiding all of the headaches of plugins and third-party solutions for embedded video. The problem is solved with a handy (and common-sense) <video> tag. Like the <img> tag before it, it’s used simply, like so:

<video width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4" />
  <source src="myvideo.ogv" type="video/ogg" />

As you can see from the example above, the process of embedding video in an HTML page has become part and parcel of the HTML standard. In the tag you can specify width, height, controls, and the source video in a similar manner and style to other media tags like <img>. It’s simple, easy-to-use, and convenient.

There are, however, a few hurdles to the HTML5 implementation of video tags. You’ll notice in the example above that I’ve included two source videos, one in ogg and one in mp4. The reason behind this is that different browsers support different codecs; some browsers, like Safari, support the MPEG-4 codec; others, like Firefox and Opera, support ogg. This means that you’re going to have to keep two different encoded videos on your site to ensure that the maximum amount of browsers will be able to use the HTML5 embedded video.

There are a host of reasons for this, most of them due to licensing; the consequence for the budding HTML5 guru, however, is that you need to be aware of all the different players, browsers, and codecs that are available on the market to ensure maximum compatibility. In the example above, the width and height of the video are set to 640 x 360, optimizing the video for smaller smartphones like Android and iOS-powered devices. In a real-life scenario, you would have to have different checks and tests for browser versions to ensure the delivery of your content in the smoothest way.

Another hurdle of the video element in HTML5 is the lack of support for it in older browsers. Many users are still using browsers without native HTML5 support, and in this case you’ll have to have a fallback to a Flash video player when HTML5 video simply isn’t an option. These checks, tests, and fallbacks can significantly increase the complexity of implementing HTML5; that simple code block above becomes a set of conditionals that ensures each user gets their optimal experience.

That said, however, you should shy away from implementing HTML5 video in your webpage simply because it might be a tad difficult or complex. The advantages of HTML5 over other embedded solutions like QuickTime and Flash are enormous; the increases in stability and speed alone over Flash are enough to make switching to HTML5 a very viable course of action. Additionally, as more and more browsers start to follow HTML5 standards and incorporate them, the process will become more streamlined and less complex.

And so winds down our quick introduction to embedding video in HTML5. The standard itself is clean and efficient, even if it needs a few more lines to ensure compatibility across the board; a skilled web developer, however, should have no problems taking the new video specs and implementing them in their website for huge gains in reliability and user satisfaction!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!