HTML5 Cookbook

Chapter 5. Native Video

Emily Lewis

Introduction

HTML5’s new embedded content elements offer designers and developers more options for including media in our sites.

Similar in nature to audio, the video element shares many of the same attributes, has a similar syntax, and can be styled and manipulated with CSS and JavaScript. And just like audio, video has some implementation challenges.

5.1. Adding HTML5 Video

Problem

You want to play native video on your web page.

Solution

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

Note

Native player controls look different in different browsers. Style your own controls with JavaScript and CSS (see Recipe 5.6).

Preloading

The preload attribute allows you to suggest to the browser whether and how it should download the video:

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

You can skip the attribute and let the browser decide, or give browsers a “hint” with specific values (refer back to Recipe 4.1, for details):

• preload="auto" or, simply, preload

• preload="metadata"

• preload="none"

Fallback content

You should also make it standard practice to include fallback content with video:

<video ...