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.
trailer_480p
with 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>
<video width="720" height="400" controls="controls">
<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>
<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!
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.