Throughout this chapter, we've looked at the various elements required to play back HTML5 video in your pages. Whilst the code will work in modern desktop browsers, it will likely fail on handheld devices—we are going to rectify this in our next task.
For this task, you will need to ensure that you have videos that are of a suitable size for playback on mobile devices; you can try using a free conversion service such as Online-Convert.com at http://www.online-convert.com to convert the videos down to a preset size depending on which platform(s) you want to support.
Open up your text editor of choice and add in the following lines replacing
trailer_480pwith the name of your video:<!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 first change we need to make is to the poster—iOS 3.x doesn't like the poster attribute, so unfortunately this needs to be removed:
<video width="720" height="400" controls="controls">
iOS 3.x is fussy about the order in which the videos appear—as it (and other handheld devices) can only play back MP4 format videos, this needs to appear as the first video source:
<video width="720" height="400" controls="controls"> <source src="trailer_480p.mp4" type="video/mp4" /><source src="trailer_480p.webm" type="video/webm" /> <source src="trailer_480p.ogv" type="video/ogg" /> </video>Android < 2.3 doesn't like the type attribute, so we need to remove it from the MP4 source tag (the only container Android currently supports). Here, the type attribute has been removed and the relevant codecs for the other two video source tags have also been added:
<video width="320" height="240" controls> <source src="vid.mp4"> <source src="trailer_480p.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="trailer_480p.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
The changes made in this task are designed to get around some browser or OS quirks that still exist as well as the (still) limited support for video formats on the mobile platform. This task highlights one of the reasons HTML5 video can still be confusing for some—this is still largely due to HTML5 being an emerging technology for which support is still evolving.
The key to this task is that while the changes required are simple to make, you should expect to have to make changes in the future, until HTML5 for the mobile platform has matured. For example, as you will have seen from this task, support only exists for the MP4 format for most mobile platforms—this is likely to remain until mobile devices appear with hardware decoders for the WebM format built in. When this happens, it would mean that there would be no need to have to include the MP4 format as the first source; it is likely that the order would then not matter, although that is up to the mobile device manufacturers!
Note
If you are interested in the state of developments for the WebM project and particularly in respect of hardware support, then it is worth reading the WebM blog at http://blog.webmproject.org.