Until fairly recently web developers have been largely dependent on plugins like Adobe Flash or Microsoft Silverlight when adding video content to their web pages. Whilst these plugins meet the requirements of the task at hand, the approach of having to rely on a plugin for things like video is flawed.
Why can’t the browser just handle playing video? When YouTube was founded in 2005, native video playback just simply wasn’t an option but today there is a solution and it’s called HTML5 video.
In this blog post you are going to learn how to add native video to your web pages using technologies introduced in HTML5.

basic framework:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Video Player</title>
    <style>
        body {
                font-family: sans-serif;
                border: 0;
                margin: 0;
                padding: 0;
        }
        header {
                text-align: center;
        }
        #player {
                display: table;
                width: 100%;
                padding: 4px;
        }
        #player > div {
                display: table-cell;
                vertical-align: top;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 Video Player</h1>
    </header>
    <section id="player">
        <div>
                <!-- The video will appear here-->
        </div>
    </section>
</body>
</html>

The <video> Element

To embed native video in your web pages you need to use the new <video> element. Browsers that support HTML5 video will attempt to load the video from the path that you specify in the src attribute. Just as it would load a picture when you use the <img> element. You can specify height and width attributes to set the dimensions of the video. Note that unlike an <img> element the <video> element does require a closing tag.
<video src="my-video.webm" width="400" height="200"></video>
The example above shows a basic <video> element specifying a single video file. However, you have already learned earlier in this post that you need to supply multiple formats of your video in order to ensure playback support in all major browsers. To supply multiple versions of your video you need to use <source> elements. These should be placed inside your <video> element and should each contain a path to a version of your video file (using the src attribute) and a type attribute that specifies the format.
<source src="my-video.webm" type="video/webm">
When the web browser encounters a <video> element with multiple sources it will select the first file that it knows how to play, ignoring any others. You can also add fallback content to the bottom of your <video> elements. This content will be displayed if the user’s browser does not support HTML5 video.

Video Attributes

In this section you are going to learn about a number of attributes that you can apply to your <video> elements to control built-in browser functionality.

controls

The controls attribute is used to instruct the browser to display its default playback controls for the video (as seen in the figure below). By default the browser will not display any controls. It is worth noting that the design of these controls is not standardized and varies between browsers.
<video src="my-video.webm" width="400" height="200" controls></video>

html5_action_002

loop

When the loop attribute is applied to your <video> element the browser will automatically restart the video when it finishes.
<video src="my-video.webm" width="400" height="200" loop></video>

muted

The muted attribute is pretty self-explanatory. Using this attribute will instruct the browser to mute the video when the page loads.
<video src="my-video.webm" width="400" height="200" muted></video>

Final Thoughts

HTML5 video promises to solve a lot of headaches for web developers that need to reliably embed video content into their web pages. Whilst this is all new in HTML5, browser adoption has been very good. All of the major browsers are supporting HTML5 video in some form. If you still have users on older versions of Internet Explorer it may be worth adding a Flash fallback but it’s certainly safe to go out and start using HTML5 video today.
Are you using HTML5 video in your projects? Let us know in the comments below.