In all of the tasks so far, we've looked at support for one video using the WebM format. While this is arguably one of the better formats that is unencumbered with patents (being open source), it means that playback will be limited by default to Opera and Chrome as the other browsers don't support this format by default. In this task, we will take a look at modifying our code to make it work across multiple platforms.
For this task, you need to avail yourself of a copy of the code from the Extending the video code task as we are going to make some changes to this code. Other than this, make sure you have copies of your video in MP4 and OGG formats (while the latter format is not used as much, we will still include it in our code).
- The first step is to crack open your text editor of choice and load up a copy of the code from the Extending the video code 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" /> </video> </body> </html>
- The first 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" /> </video> - We're also going to add in support for OGG format videos:
<video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" /> <source src="trailer_480p.mp4" /> <source src="trailer_480p.ogv" type="video/ogg" /> </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" /> <source src="trailer_480p.mp4" type="video/mp4" /> <source src="trailer_480p.ogv" type="video/ogg" /> </video>
The reason for specifying a number of different sources is to allow the browser to pick the right video to play; not all formats are compatible with all browsers. You will see that we've also specified the MIME types for each video format; this is to help the browser to decide whether it can play that video and also which format the video should be played in. If a MIME type is not specified, then the browser has to start downloading it in order to find out whether it can play the video; this can be wasteful of bandwidth.