Using HTML5 Video

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:

<video src="/my-video.mp4"></video>

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:

  • Ogg Theora – Firefox, Chrome and Opera
  • H.264 – Safari and Chrome
  • WebM – Chrome and Opera
  • For a very detailed guide to file type and code support, take a look at this chapter of Dive into HTML5.

    Adding some style

    While each browser’s video element will be rendered differently from others, we can easily implement our own set of controls in HTML, style them with CSS, and make them work with a little JavaScript. Luckily, there is a JavaScript API for the video element, which means we can do anything it’s controls normally could, but with JavaScript.

    To make styling our own controls even easier, there are several JavaScript libraries that handle all the code for you, and they include base CSS files which are easy to modify. These libraries also take care of adding fallback’s and deal with the differences in browsers for you. They are the easiest way to use HTML5 video for all but the simplest cases.

    So as you can see, the HTML5 video element has all the basic features you would expect in a video player, has wide-spread support in browsers (even if a JavaScript library is necessary to make using it painless) and could be just the solution you need.

Comments are closed.