How to get moving with HTML5 video
Video on the web used to be a tricky business. To get something playing in a browser involved all sorts of pain working with players, embed code and plug-ins. It was hard enough to get a video up and running and even more of a chore for users who had to download or update their Flash player, or use something even rarer like Quicktime or RealPlayer. Luckily, HTML5 came along with the <video> element, a tag that means it’s dead easy to link to video files in modern browsers.
There are still headaches - different browsers support different video types - but <video> means developers don’t have to build their own video player, or hack someone else's. The initial setup is straightforward but consideration also needs to be given to people who use browsers that don’t support whizzy HTML5 elements. In those cases, Flash still comes into play.
Creating video files
The first rule of <video> is thou shalt always create more than one video file.
If you want to make everyone happy then you need to consider all browsers, old and new, and what happens when they come across the video element. Modern Chrome, Safari, Firefox and Opera browsers will all be happy with <video>, as will Internet Explorer 9 and above (IE8 and below is another story, see ‘Flash fallback’ below), but there are niggles with different video types.
A video file is usually MPEG4 (.mp4, .m4v) but there are some more exotic types that come into play when using HTML5 video. Heard of Ogg (.ogg, .ogv) or WebM (.webm)? MPEG4 is based on Quicktime while Ogg and WebM are open standards and different browsers can only play certain types of video file, mainly because of the patent and license fees that come with H.264 compression used for rendering MPEG4 videos.
A breakdown of browser support for video files:
| Browser | MPEG4 | OGG / WEBM |
| Internet Explorer 9+ | Yes | No |
| Chrome | Yes | Yes |
| Firefox | No | Yes |
| Safari | Yes | No |
| Opera | No | Yes |
More info on the w3 schools video page
There are plenty of free tools out there to take a video file and convert it into the various formats required. Miro Video Converter provides a quick and easy way of ensuring your video can be viewed in any browser.
Coding <video>
Once you’ve rendered out your videos getting them on a web page is nice and simple. The code below is all you need to get started...
<video width="720" height="568" controls> <source src="videofile.mp4" type="video/mp4" /> <source src="videofile.ogv" type="video/ogg" /> <source src="videofile.webm" type="video/webm" /> </video>
Within <video> we have a list of sources referencing different video files. So when Chrome reads this list it will play the mp4 file. Firefox can’t play the mp4 so it falls back to the ogv version, and so on. The MIME (media) type must be set correctly otherwise the browser will not be able to play the video.
Some useful test videos, already rendered into different file types, can be found at TechSlides.
The video tag can also have several attributes defined, such as the width and height of the video and whether it uses the browser’s default controls to play, pause, rewind etc. If you want to get really clever you can use Javascript functions such as play() or pause() to create custom interface buttons.
Other useful video attributes include:
Preload - starts downloading the video when the page loads.
Autoplay - starts playing the video when the page loads (if you really want to annoy people).
Poster - lets you set a jpeg or other image as the holding frame before the video is played.
Flash fallback (it’s not dead yet)
Flash might be on the way out - limited mobile support, cumbersome files - but it comes in very handy when dealing with online videos. If a person is using IE8 then an HTML5 element like video is not supported, so what are they going to fallback to? Enter Flash to save the day. To support crusty old browsers like IE6, 7 and 8 then an embedded Flash movie can be included after the list of sources in <video>.
But creating a Flash movie with it’s own video player interface is costly and time-consuming, you’ll need a copy of Flash CS for a start. One solution is to use a free Javascript plugin such as Flowplayer or VideoJS which handle both HTML5 video and Flash fallback with their own default player skins. Flowplayer also has some handy functionality to add a bit more of a personal touch to your video, allowing you to add your logo and display extra content over the video at the start or when it’s finished playing - very useful for adding calls to action.
In conclusion
The HTML5 video element has made it much easier to get movies playing on the web but, this being the web, there are still plenty of issues to consider and browser quirks to wrestle. This introduction only dips into the deep, dark rabbit hole of video types and codecs. We’ve not even thought about mobile devices and what support iOS and Android offer. Much more information can be found at Dive into HTML5 which has a detailed history of the complex video file.
We also need to consider where to actually host video files so they don’t impact the performance of a web site. Cloud storage is a cheap, scalable solution and we’ll be looking at the benefits in the very near future - watch this space!
