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!

What's in this article

    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">
    

    Alternative to the Poster image

    If you don't want to add a poster you can set the video to show a frame at a certain number of seconds in from the start.  For example, we can show a frame from 3 seconds in by adding #t=3:

    <source src="<?php echo $video_item["videopmfour"]->urls["relative"]; ?>#t=3" type="video/mp4">
    <source src="<?php echo $video_item["videowebm"]->urls["relative"]; ?>#t=3" type="video/webm">

    It works really well:

    html5-videos-frame.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.

    But what if you want to do more?

    We can call a function and add it below:

    <video width="500" height="280" onclick="this.paused ? this.play() : this.pause(); clickVideo();">
    
    ...
    
    <script>
        $(document).ready(function(){     
            clickVideo = function(){
                console.log('clicked');
            };
        });
    </script>
    

    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.

    Join the discussion

    Want to have your say on this topic? Start by posting your comment below...

    Who are we?

    We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.

    We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.

    Tell me more

    Keep up to date

    Call us