Throughout most of this section, we've looked at code that will allow you to play a number of different videos. In most cases, the browser will work out automatically which video to play; in some instances, it may not get it right or refuse to play any of the videos listed in the code. In this task, we take a look at how to specify a codec for each video, which will help the browser determine how to play the chosen video properly.
All we need for this is a copy of the code from the previous task—the codecs should already be present on your PC if you installed them in the first section of this book.
- The first step is to crack open your text editor of choice and load up a copy of the code from the Adding cross-browser support task:
<!doctype html> <html> <head> <title>HTML5 Video Test</title> </head> <body> <video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" type="video/webm" /> <source src="trailer_480p.mp4" type="video/mp4" /> <source src="trailer_480p.ogv" type="video/ogg" /> </video> </body> </html>
- The next step is to add support for the MP4 format (used by all browsers except Firefox and Opera), so alter your code as follows:
<video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" /> <source src="trailer_480p.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" /> </video>
- We're also going to add in support for OGG format videos as follows:
<video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" /> <source src="trailer_480p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="trailer_480p.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
- The eagle-eyed amongst you will spot that the type and codec settings for the WebM format are not present, so let's correct that now:
<video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src='trailer_480p.mp4; type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src='trailer_480p.ogv; type='video/ogg; codecs="theora, vorbis"' /> </video>
Working with codecs, particularly within the HTML5 arena, can open up a real minefield of confusion. The key to understanding it is that enabling codec support increases the likelihood that a browser will be able to correctly determine whether it is able to play that particular video correctly.
In the previous code, I've specified some typical codecs that can be used—while the codecs for WebM and Ogg are straightforward, the one for MP4 (or MPEG-4) is less so; the codec used here represents the Baseline profile for H.264 and the Low-complexity profile for AAC.
It is perfectly possible to use a number of different codecs with particular video types—one good example is the MP4 format. Care should be exercised when choosing an appropriate codec. If one is chosen that is not a popular codec, then it is possible that the video may not play. The reason for this is that if the browser recognizes the file type (either inline in the code or via the .htaccess file), but doesn't "see" the appropriate codec installed, it will then refuse to play the video.