You want to play native video on your web page.

Use the video element with the addition of a src attribute that references the location of your video file:

<video src="video.ogv"></video>

To display default video player controls (see Figure 5-1), add the Boolean controls attribute:

<video src="video.ogv" controls></video>

Figure 5-1. Default video player controls in Firefox 4

<video src="video.ogv" controls preload></controls>

<video src="video.ogv" controls>
    Your device does not support HTML5 video. <a href="video.ogg">Download the
    Learning to Love HTML5 introductory video</a>.
</video>

<video src="video.ogv" controls>
    <object type="application/x-shockwave-flash"
            data="player.swf?file="video.mp4">
        <param name="movie" value="player.swf?file="video.mp4">
        <a href="video.mp4">Download the Learning to Love HTML5
            introductory video</a>
    </object>
</video>

Unfortunately, video is not as straightforward to implement as it might seem, because not all browsers support the same set of video file formats.

For some open source videos on developing and experimenting with HTML5 video support, search the Internet Archive (see http://www.archive.org/details/movies).

You want to make sure your native video plays on the broadest range of browsers possible.

Use the source child element of video to specify each of your video formats:

<video controls>
    <source src="video.mp4" />
    <source src="video.ogv" />
    Your device does not support HTML5 video.
</video>

As we saw in Table 5-1, using .mp4 and .ogv covers all browsers that support HTML5. But order matters, too. List your source formats from most to least desirable, as browsers will play the first format they recognize.

Beyond specifying the video files themselves, it is good practice to also specify the MIME type for your video files:

<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />

Since file formats are simply containers for different codecs, you should also specify the compression used:

<source src="video.ogv" type="video/ogg; codecs='theora'">

Including this information speeds up rendering of the video since it indicates what kind of content the browser is utilizing without the browser having to download a portion of the file to make its own determination.

Here are some examples of MIME types with codecs:

type="video/ogg; codecs='theora, vorbis'"
type="video/mp4; codecs='avc1.42E01E'"
type="video/webm; codecs='vp8, vorbis'"

Unfortunately, even if you declare your MIME types with the proper codec in your HTML, there can also be challenges related to the MIME types supported by your server. If your server isn’t configured to support the MIME types your video uses, there will be playback issues.

You can, however, configure your server to support video MIME types. Information about Ogg media from the Mozilla Developer Center (https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media) can equally be applied to .webm and .mp4.

If you have your own video but want to convert it to other formats, check out these tools:

You want to specify the width and height of your video player.

Add the width and height attributes, and their corresponding values, to video:

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Your device does not support HTML5 video.
</video>

Browsers render the video player according to the dimensions you assign, not the resolution of your actual video. Using different dimensions might lead to a loss in quality by expanding a video beyond its native resolution; the same goes for scaling down a large video simply to fit into a small space.

So, when possible, use the same dimension values for the video element as for the video file itself, and don’t resize your video with width and height.

Technically speaking, the width and height of a video element do not need to be set as browsers default to inheriting the dimensions of the video file itself. The drawback to this approach is that if the dimensions are not set, browsers won’t know what space to reserve for your video and may have to redraw your page after downloading the video data.

The width and height values need to be set in CSS pixels as integers and not as percentages or other values. Adding dimension values helps browsers more efficiently render your pages, which usually results in a better user experience.

Since you probably don’t want to use width and height to resize your video to something other than its native dimensions, you can instead use encoding software to specify the resolution.

Mark Pilgrim’s “Dive Into HTML5” (see http://diveintohtml5.info/video.html), which provides very detailed instructions about using many of the encoding tools available, and CSS Pixel at http://www.emdpi.com/csspixel.html.

You want to display a still frame, or poster image, before the user starts the video.

Add the poster attribute with the placeholder image file path as the value:

<video controls width="640" height="360" poster="video_still.png">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Your device does not support HTML5 video.
</video>

Poster images can be a nice user enhancement, especially when the video doesn’t load or can’t be displayed.

Consider a single-source .mp4 video viewed in Firefox, as shown in Figure 5-2.

Figure 5-2. Since Firefox doesn’t support .mp4 files, the browser displays a dark gray box if there is no poster image specified

Unfortunately, different browsers handle poster images differently:

Figure 5-3. Safari 5 resizes the video to match the aspect ratio of the poster image, making it important to ensure your images are sized correctly

John Foliot points out the lack of accessibility of the poster attribute in a blog post at http://john.foliot.ca/the-current-problem-with-the-poster-attribute-of-the-video-element/. Keep this limitation in mind when using poster.

You want your video playback to loop automatically.

Add the loop Boolean attribute to video:

<video controls width="640" height="360" loop>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Your device does not support HTML5 video.
</video>

As of this writing, Firefox does not support loop unless the user has the Media Loop add-on (https://addons.mozilla.org/en-US/firefox/addon/media-loop-45730/) installed. All other browsers will loop natively.

That said, use loop thoughtfully. Consider how your users will experience a video that loops and whether that experience will be appropriate for your particular video and pleasant for your audience.

Not all Firefox users will know about the Media Loop add-on, much less have it installed. If you desperately need looping to work across all browsers, you can consider a JavaScript-based solution: http://forestmist.org/2010/04/html5-audio-loops/.

You want to embed a video from YouTube, but you want a better preview of how the video might appear than the default selection key (see Figure 5-4).

Figure 5-4. When selecting which size video you want to embed, YouTube offers static illustrations that lack context

In this Sample Design, we use canvas (see Chapter 9) to create a better and more contextual preview of what video may look like at different sizes (see Figure 5-5).

Figure 5-5. Using scaling, different sizes of the single video instance are drawn on the canvas in Firefox

<video id="origVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Your device does not support HTML5 video.
</video>

<button title="Generate Preview" onclick="generatePreview();">Generate
    Preview</button>

<canvas id="previewMed"></canvas>
<canvas id="previewSm"></canvas>

<script>
    function generatePreview(){
        var video = document.getElementById('origVideo'),
        var canvas1 = document.getElementById('previewMed'),
        var context1 = canvas1.getContext('2d'),
        var canvas2 = document.getElementById('previewsSm'),
        var context2 = canvas2.getContext('2d'),

        canvas1.width = 320;
        canvas1.height = 180;
        canvas2.width = 160;
        canvas2.height = 90;

        video.addEventListener('play', function(){
            drawVideo(this,context1,context2);
        },false);

        video.play();
    }

    function drawVideo(video,canvas1,canvas2) {
        if(video.paused || video.ended) return false;
        canvas1.drawImage(video,0,0,320,180);
        canvas2.drawImage(video,0,0,160,90);
        setTimeout(drawVideos,25,video,canvas1,canvas2);
    }
</script>

if(video.paused || video.ended) return false;

canvas1.drawImage(video,0,0,320,180);

canvas2.drawImage(video,0,0,160,90);

object.drawImage(source,x,y,width,height);

setTimeout(drawVideos,25,video,canvas1,canvas2);

Here’s the complete markup and script for this example:

<video id="origVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Your device does not support HTML5 video.
</video>

<button title="Generate Preview" onclick="generatePreview();">Generate
    Preview</button>

<canvas id="previewMed"></canvas>
<canvas id="previewSm"></canvas>

<script>
    function generatePreview(){
        var video = document.getElementById('origVideo'),
        var canvas1 = document.getElementById('previewMed'),
        var context1 = canvas1.getContext('2d'),
        var canvas2 = document.getElementById('previewsSm'),
        var context2 = canvas2.getContext('2d'),

        canvas1.width = 320;
        canvas1.height = 180;
        canvas2.width = 160;
        canvas2.height = 90;

        video.addEventListener('play', function(){
            drawVideo(this,context1,context2);
        },false);

        video.play();
    }

    function drawVideo(video,canvas1,canvas2) {
        if(video.paused || video.ended) return false;
        canvas1.drawImage(video,0,0,320,180);
        canvas2.drawImage(video,0,0,160,90);
        setTimeout(drawVideos,25,video,canvas1,canvas2);
    }
</script>

With native video offered through HTML5, web developers now have the ability to dive deep into a video file and make enhancements to the user experience that were once the domain of proprietary technologies.

HTML5 Doctor offers demos and detailed descriptions of other ways to use canvas and video together at http://html5doctor.com/video-canvas-magic/.