Chapter 5. Native Video

Emily Lewis


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


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>
Default video player controls in Firefox 4
Figure 5-1. Default video player controls in Firefox 4


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


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

Get HTML5 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.