Understanding HTML5 video formats

show more Understanding HTML5 video formats provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth show less
please wait ...

Understanding HTML5 video formats

Working with video and audio formats can be a little tricky. There are a number of different formats to choose from and there are multiple parts involved, including audio and video codecs and container formats. A video format is made up of three pieces. You have your container format, which is where you get your file extension from. Then inside the container you have your video data which is compressed or encoded using a video codec and you also have your audio data which is encoded using an audio codec. So the video and audio data are stored separately, which is why a container format is needed. For HTML5 we have three video formats: the MP4 H.264 format, Ogg Theora and WebM.

The MP4 format is made up of the MPEG-4 container format, the H.264 video codec, and the AAC audio codec. The MP4 format is the format supported by Safari including the iPhone and iPad which use Mobile Safari, and also Internet Explorer 9. Flash supports the MP4 format as well in versions 9 and above, which most users that have Flash will also have at least version 9. It's a great high-quality format and outside of web browsers it's a very popular format on hand-held devices. So if you have a camera or phone that can capture digital video, there is a good chance of storing it in the MP4 format.

It's a closed format and there are potential licensing fees around it. If you plan on charging to view the videos you're encoding, you probably owe MPEGLA some royalties. Otherwise, if you're providing the video for free on the Internet, you should be in the clear. If you have any questions around this, you can check out the royalty summary here on the MPEGLA's site. The Ogg Theora format is made up of the Ogg container format, the Theora video codec, and the Vorbis IO codec. The Ogg Theora format is free and open source and is supported by Firefox, Opera and Chrome.

It was the format used when Opera created the very first implementation of the video tag. The Theora codec is based on the VP3 codec that was open-sourced by On2 Technologies. On2 is the same company that was purchased by Google to create the WebM format. Ogg is a decent format but it requires bigger file sizes to achieve the same quality as the other two formats. The WebM format is made up of the WebM container format, the VP8 video codec, and Vorbis audio codec. Like Ogg, the WebM format is also free and open source and is also supported by Firefox, Opera and Chrome, but later versions of those browsers because it only became available on 2010.

It can be supported by IE 9 through an additional installation of WebM, but I won't expect most of you users to go and do that. WebM is of comparable quality to the MP4 format, but it's also completely free. So it has the best chance of becoming the official format of HTML5 video, if there ever is one. As I mentioned, WebM was created after Google bought On2 Technologies for their VP8 codec. You've never heard of On2, they've actually had a pretty significant impact on Web video. Their VP3 codec was used to create Ogg Theora. Their VP6 codec was the popular codec for Flash FLV files for many years and their VP8 codec is now the basis of the WebM format.

So just a little interesting bit of web video history for you. So anyway, with all these format choices, how do we decide which formats to create and provide for our users? I am going to run through some potential strategies for you. First of all, if you're doing something interesting with JavaScript in HTML5 and you want as many of your users as possible to see it, you probably want to create all three formats. With WebM you don't actually gain any extra user support over having an Ogg format, but it is a higher-quality format. So the user experience will be better. I also want to point out that you can use the same MP4 file for your Flash fallback that you use for Safari IE and the iOS devices.

As long as it's using the baseline profile for H.264, which I'll talk more about in the movie on encoding MP4s. If three formats is just too much work or even too expensive if you're doing a lot of videos, you have to go with the MP4 and Ogg formats. I would love to recommend just skipping to using WebM since it's a better format than Ogg, but there is an issue with how HTML5 browsers detects sources. We know that when older browsers don't support HTML5 video, they'll fall back to our fallback content. But when we're talking about browsers that do support HTML5, if you embed HTML5 video and don't provide a source that the browser supports, it won't fallback.

So if we provided a WebM source and no Ogg source, all those slightly older browser versions that support Ogg but not WebM will show a broken video image instead of falling back to Flash. So until none of those browser versions are in use anymore, you'll have to stick with Ogg. Finally, if all you care about right now is using HTML5 to support the iPhone and iPad since they don't support Flash, there is an option to just use the MP4 format, but again it runs into this issue of HTML5 browsers not falling back when there isn't a source they support.

To make this work you'll need to detect when the user's device is an iOS device and when it is, deliver HTML5; otherwise deliver Flash. This detection can be done on the server side of your site in PHP or whatever back-end language you're using or you can use JavaScript which can be a little trickier. So if that's your goal, I recommend looking into a JavaScript library like VideoJS to handle that part. So hopefully you now have a better understanding of video formats and how to use them. Next, we'll look at HTML5 audio formats.

Understanding HTML5 video formats
Video duration: 5m 10s 2h 7m Intermediate


Understanding HTML5 video formats provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth

Video Web
please wait ...