Video content is a big part of the web, and it’s becoming a regular feature when we do a new web design. With more people viewing websites on mobile devices, a lighter, non-Flash solution is a good idea, especially in cases when Flash isn’t supported at all. HTML5 gives us that solution with the video element. It’s not perfect, but it could be the alternative you need depending on your situation.
So how do you use the video element? Below is the HTML for the video element in it’s simplest form:
There are more attributes we can use, and here’s a quick explanation of what each of them does:
- src: The url of the video you want to play.
- height: The height of the video element.
- width: The width of the video element.
- poster: The url of an image to use as a teaser until the video is played.
When setting a height and width for the video element, the video being played will stretch or shrink to fit, while keeping it’s aspect ratio.
- autoplay: Start playing the video as soon as it’s loaded.
- controls: Add player controls to the video element like play, volume etc.
- loop: When the video has ended, it will begin again from the start.
- preload: Start loading the video straight away, otherwise loading will happen when the video is played.
- There are more attributes, but unlike the ones above, they don’t need a value. Just add them to the video element when that functionality is need. Eg.
<video src="video.mp4" autoplay></video>
Can I actually use it yet?
HTML5 video has pretty good support already, and works in Firefox 3.5, Opera 10.5, Chrome 3.0 and Safari 3.0. Unfortunately it’s not supported in IE yet, but will be in IE9. However, this doesn’t mean you can’t use it if you want video in IE at all. The video element provides a way to include a fallback if a browser doesn’t support it.
You can wrap the video element around text, an image, or even flash:
<video src="/my-video.mp4"> <p>Sorry, but your browser doesn’t support HTML5 video. You can <a href="/my-video.mp4">download the video here instead</a>.</p> </video>
Unfortunately, support for the video element in a browser doesn’t necessarily mean your video will work. What do I mean? Each browser supports a different video format as well. This can be frustrating, as you will need to provide your video in more than one format if you want it to work in more than one browser. We can tell the video element that we have the file in multiple formats by using source tag:
<video controls preload> <source src="/my-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="/my-video.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="/my-video.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
When using the source tag, you no longer need to add the ‘src’ attribute to the video tag.
Below is a list of which file types are supported by which browsers:
For a very detailed guide to file type and code support, take a look at this chapter of Dive into HTML5.
Adding some style