HTML5 Tutorial: Video

Out of all the changes brought about by HTML5, video has received the most press, and for good reason. HTML5 frees us from external video plugins when watching video online. You’re probably familiar with plugins such as flash, quicktime, or realplayer. With HTML5, you won’t need these plugins to watch online video. The video player will be built right into the browser.

This means a couple things. First, it increases browser stability. Flash has long been under fire for its stability, being blamed as the culprit for many a computer crash. Second, it opens up online video viewing on any device, such as smartphones. As you probably know, smartphone browsers don’t currently support flash, and therefore can’t provide the same web browsing experience as a desktop computer. When HTML5 becomes widely implemented, the gap between the desktop and mobile browsing experience will shrink.

Ready to learn about HTML5 video? Let’s get started…

How does video work?

Adding video to an HTML document is simple, much like adding an image. With the newly introduced “video” tag, the syntax for HTML5 video looks something like this:

Code:

 <video width="320" height="240" src="”video.mp4”"></video> 

Technically, that’s all you need, but there is much more to HTML5 video. First, let’s take a look at the optional attributes available to the video tag. I’ve listed each attribute along with an example of the syntax.

Autoplay: Instructs the video to begin playing on page load.

 <video width="320" height="240" src="”video.mp4”" autoplay="autoplay"></video> 

Controls: Adds playback controls to the video, such as play and pause buttons.

 <video width="320" height="240" src="”video.mp4”" controls="controls"></video> 

Height & width: Sets the dimensions of the video player.

 <video width="”200px”" height="”300px”" src="”video.mp4”"></video> 

Loop: Instructs the video to restart every time it finishes.

 <video width="320" height="240" src="”video.mp4”" loop="loop"></video> 

Preload: Tells the browser to start downloading the video file as soon as the page loads.

 <video width="320" height="240" src="”video.mp4”" preload="preload"></video> 

Video seems pretty simple and straightforward, doesn’t it? Well, here’s where we get to the difficult part. Not every browser supports video currently, and those that do support video can’t agree on video formats. Ready to get a bit more technical? Keep reading…

Browser Support

As of right now, the video tag is only supported by the more advanced browsers, such as: Chrome, Opera, Safari, and Firefox. Microsoft has promised they will include support in IE9, but current versions of IE will not support it.

This is where it gets tricky. Browsers who do support the video tag can’t agree on the method for video playback. Specifically, they can’t agree on which codec to use. In case you’re unfamiliar with codecs, allow me to explain what they are and why they are important.

What are codecs anyway?

You probably recognize popular video extensions such as mp4, AVI, or mov. Here’s something you may not know: These aren’t video formats at all, instead (much like a ZIP file) they are simply containers which store multiple files (usually compressed audio and video files). When you watch a video, your video player uses a codec to decompress these files and output video to your screen and audio to your speakers. A codec is nothing more than an algorithm that analyzes the data in a file and determines how the data can be removed while still maintaining acceptable quality.

HTML5 sought to standardize one codec that every browser would support for web video and audio playback. For reasons I won’t get into right now, the browser makers couldn’t agree on the one codec. Instead, we’re left with 3 different codecs, all supported in some way by at least one browser. There isn’t one codec that is supported by every browser. This means you’ll need 3 different versions of the same video to ensure your video is viewable across every browser.

The confusing world of codec browser support

Here are the three video containers supported by different browsers:

mp4: Uses the H.264 video codec and the AAC audio codec. Currently supported by the latest versions of Chrome, Safari, and Internet Explorer (9). Lower versions of Internet Explorer do not offer support.

OGG (or OGV): Uses the Theora video codec and the Vorbis audio codec. Supported by the latest versions of Firefox, Chrome, and Opera. It can be manually installed on Safari.

WebM: Uses the VP8 video codec and the Vorbis audio codec. Currently supported by the latest versions of Firefox, Chrome, and Opera. Available via manually installed plugin for Safari and Internet Explorer 9.

If that’s all a little confusing, here’s an image that I’ve taken from Wikipedia and modified a bit. It clearly lists browser support for the different video containers, as well as the associated codecs.

How to use HTML5 video today

This is probably confusing. HTML5 is bringing a new standard to web video but browsers can’t agree on the accepted codec so they each support different types, while certain popular browsers (IE7 & IE8) don’t support any at all??? How do you use the video tag today, while ensuring that every browser will be able to view it?

Good news! It’s possible to use the video tag to create a video viewable across all browsers, including smartphones. Here’s how you do it: First, you will need multiple video types of the same video. This isn’t as hard as it sounds: There are video encoders freely available for converting video from one type to another. Second, we must define the video player attributes using the video tag, and list the video types using the source tag. The browser will determine which video type it can play, and only load the appropriate type. Here’s the syntax:

Code:

<video width=”600” height=”300”>
<source src=”movie.mp4” type=”video/mp4” >
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.webm” type=”video/webm”>
</video>

Now, you may be asking, “What about IE7 and IE8? Those are currently popular browsers, but don’t they only play Flash right now?” Yes, as of right now, Flash is your only option for playing video in IE7 and 8. Fortunately, there’s a fallback option for adding Flash to your code. Since IE7 and 8 don’t recognize the video tag, they treat the video tag as if it’s not even there. However, both versions recognize the object tag, which is how we will add Flash video to a page. Using an object tag embedded in a video tag, we can create a fallback option for Flash that will display your video in IE7 and 8. Here’s the syntax:

Code:

<video width=”600” height=”300”>
<source src=”movie.mp4” type=”video/mp4” >
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.webm” type=”video/webm”>
<object type="application/x-shockwave-flash" data="movie.swf" >
<param name="movie" value="movie.swf" />
		<param name="wmode" value="transparent" />
	</object>
</video>

Now you have a video that you can watch in any browser and on any device, including smartphones.

Conclusion

HTML5 video will free us from plugin prison when it comes to watching videos online. While you can use the video tag right now, the process is a bit more complicated than it needs to be because older versions of IE don’t currently support it, and the other browsers can’t agree on one codec. When that happens, video will be easy to add and easy to view anywhere. Until that happens, using HTML5 video will be a little cumbersome, but it’s nice to know you can use it if you want.

Related Posts:

3 thoughts on “HTML5 Tutorial: Video

  1. I don’t know, my android plays flash sites just fine…I think you’re speaking of just apple right?

    Also, while I was not a huge fan of flash…it was easy on the development budget. Now, at least until the browsers settle on a consensus, a site with plenty of videos is going to have their productivity and budgets going south.

    I can’t imagine waiting on three versions of all our videos each and every time, and the turn over for old stuff…we’re talking thousands and thousands of dollars to convert. :P

    And this is with no guarantees that the browser lords will play nice…they never havbe before! ;)

    Sorry to sound like buzz kill, but this harkens back to the early days of the internet with a WMV, Realplayer, and Quicktime versions all in different bandwidths and blah blah blah….

    While flash was buggy, at least it gave a standard that nobody else ever came up with. It is time to move on, but must it be such a money sink and so sloppy?

    Cheers!

  2. Rob –

    I agree, I would love to have just one video standard. I really don’t want to convert each video into 4 different formats just so everyone can watch it.

    Unfortunately, this is the best way I’ve seen to make cross-browser video. The other option is to only focus on the most popular browsers, which I’m sure many will do.

    I’m still holding out hope that the browser makers will come to some sort of consensus. Hey, I can dream…right?

    Also, I was referring to Apple products with the Flash support. However, I own an Android phone, and I’ve found Flash to run terribly on it. Maybe it’s just my phone, but I don’t even have it installed anymore.

    Steve

  3. I forgot to add one thing —

    If you need to create cross platform video right now, Youtube is the easiest way that I’ve found. Just upload your video to Youtube, and then embed it in your site. It works everywhere, and you don’t need to convert it. As of now, that’s the best way to add video without using Flash.

Leave a Reply

Your email address will not be published. Required fields are marked *