Using HTML5 video

In the old days of HTML4 / XHTML we didn't have any way of easily adding a video, apart from Flash. This opened up a lot of issues such as "does the clients browser have Flash?", and then, are they using a Mac!

Then there were lots of different formats of video to consider like FLV, MP4, WebM etc and various codecs. A lot of the time, using YouTube or Vimeo's embed code is just fine. But what if you want total control over the look and behaviour of the video?

Thanks to HTML5, there is now a video tag that can give you that control without making it a huge task to insert a video in your site.

The HTML5 video Tag

Here are the basics of the video tag:

<video width="500" height="280">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

As you can see, we have a video tag with inner source tags, each one loads the correct video format for various browsers. And here is the browser support for each format:

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

There is also a message that shows for browsers that don't support the video tag.

Other HTML5 Video Options

Adding Controls

Adding play/top controls to the video is really easy too. You simply add the "controls" attribute to the video tag:

<video width="500" height="280" controls>

Without the controls attribute, the video won't have any play/stop buttons or progress bar.

Autoplay

If you want the video to start playing when the page loads, you can simply add the auto play attribute:

<video width="500" height="280" controls autoplay>

You'll probably find this doesn't work on mobile. This is done to save expensive data charges on mobile plans.

Looping

If you want the video to loop - i.e. when if gets to the end, re-play from the start, we have the loop attribute:

<video width="500" height="280" controls autoplay loop>

Poster

Specifying a poster image will give you an image that appears first before the video is played. Helpful if you want a play symbol or some sort of intro "screen":

<video width="500" height="280" controls autoplay loop poster="poster.jpg">

Muted

You can probably guess what this does, that's right it mutes all sound from the video:

<video width="500" height="280" muted>

Click to Play/Pause

You may also want to be able to click your video to play/pause like they do on YouTube. This is especially useful if you have hidden the controls. To do this we use an inline javascript short hand if statement:

<video width="500" height="280" onclick="this.paused ? this.play() : this.pause();">

What this is say is, if the video is clicked, check if it is paused and if it is play the video. If it is not paused, then pause the video. Works great.

Making HTML5 Videos Responsive

We can easily set the video to be full width within it's container in CSS:

video {width: 100%; max-width: 100%}

But what about the height? As it stands it will maintain the height entered in it's height attribute. But if we know we want our video to be 16:9 ratio (widescreen, for example), we can divide 9/16 which gives us 0.5625 and add it into a function that will maintain the correct height, even if the screen is resized:

<script>    
$(document).ready(function(){       
    var $video = $('video');       
    setHeight = function() {           
        $video.attr('height', $video.width()*.5625);  // 16:9 ratio       
    };       
    setHeight();       
    $(window).resize(function(){           
        setTimeout(setHeight(), 200);       
    });    
});    
</script>

I hope you found this useful, please leave a comment if you have any more information you'd like to include about HTML5 video.