Join Steve Heffernan for an in-depth discussion in this video Understanding HTML5 video formats, part of HTML5: Video and Audio in Depth.
- View Offline
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.
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.
- Understanding the differences in media formats
- Preloading, autoplaying, and looping in HTML5
- Setting a video's width and height attributes
- Displaying subtitles and captions
- Generating embed code with an embed code builder
- Encoding files using HandBrake, Firefogg, and VLC
- Creating a load progress bar
- Recognizing Android and iOS issues