JUMP START HTML5 (2014)

Chapter 8 Multimedia: Using Native HTML5 Video

Adding video to your HTML documents is just as straightforward as adding audio: use the <video> tag. As with audio, the video element requires a closing tag (</video>) and a src attribute.

Create a new HTML document, and add the code below, changing the value of src to point to the media file of your choice. Save it as video.html, and open the file in your browser.

<video src="/path/to/media.file"></video>

You should see the first frame of your video, and that's it, as shown in Figure 8.1. As with audio, the video element lacks control by default (unless JavaScript is disabled).

Figure 8.1. A video player in Chrome Canary when the controls attribute has not been set. Image from "Big Buck Bunny" by the Blender Foundation, bigbuckbunny.org

To enable controls, we'll need to add a controls attribute, as shown below.

<video src="/path/to/media.file" controls></video>

As with the audio element, this will add a player user interface to the video, so that the user can play, pause, seek, and adjust the volume. Video controls look more or less like their audio counterparts. They usually have an additional control for entering and exiting full-screen playback, and in most browsers a control toggle subtitles and captions. Exactly what the player looks like depends on the browser, and not every browser makes re-styling these controls easy.

Setting Video Dimensions

All videos files have intrinsic dimensions of width and height. Intrinsic dimensions are the "natural" or default height and width of a file. For example, a video file may be 640 pixels wide and 480 pixels high. However, we can tell the browser to limit the size of our video player within our document layout using the width and height attributes. An example follows.

<video src="/path/to/media.file" controls width="427" height="240">

</video>

This will constrain our video to a box that's 427 pixels wide by 240 pixels high. The video file itself will retain its dimensions. But it will be displayed within the space we've defined, as shown in Figure 8.2.

Figure 8.2. We've set our video to be 427 pixels wide by 240 pixels tall. The Google Chrome window is 640 pixels wide. Image from "Big Buck Bunny" by the Blender Foundation, bigbuckbunny.org

Without a known width or height, the default size of an HTML5 video player is 300 pixels wide by 150 pixels high. Once the browser can determine the video's intrinsic dimensions, it will resize the element. If you've used a preload value of auto or metadata, this will happen as the video loads. If you've used a preload value of none, it will happen once the user initiates playback.

Figure 8.3. A default video player in Opera 16 when the preload attribute is set to none

This is similar to the way the img element works. When we don't specify the size of our element box, the box will expand to accommodate the content. Setting a height and width prevents this from happening.

In the example above, we specified the values in pixels, but we could also use percentage values. Let's change our values from the example above to use percentages.

<video src="/path/to/media.file" controls

↵width="100%" height="100%">

</video>

Now the dimensions of our video element will grow or shrink relative to the height and/or width of its containing element.

Setting width and height attributes aren't the only way we can control the size of our video element. We can use CSS instead, as shown below.

video {

width: 427px;

height: 240px;

}

Here we've used the video element selector, which means these styles will apply to every video in our document and on our site. Between our curly braces, we've added a width property and a value of 427px or 427 pixels and a height property with a value of 240px. As with the HTML attributes, we're not restricted to pixel-based values. We could also use percentages, or any other length value permitted by CSS.

If you use CSS, keep in mind that those values will have priority over any width and height attributes in your HTML. If you're not familiar with CSS, SitePoint's book, Jump Start CSS by Louis Lazaris will bring you up to speed.

Percentages for Height

Using a percentage value for height is tricky. It only works when the height of the parent element has also been explicitly set. For example, if the parent element for your video is the body element, you'll need to use CSS to specify its height, as shown below.

body {

height: 100%;

}

Now your video element will expand in height as the body element does. There's a caveat here, however. While the aspect ratio of your video element will change, the aspect ratio of the video will not. When the aspect ratio of the video element differs from that of the video itself, you'll end up with extra room around your video image, as shown in Figure 8.4.

Figure 8.4. The orange stripes at the top and bottom of the video is the difference between the aspect ratio of the video element and the video file

For this reason, it's usually less hassle to use a percentage value for width and let the browser adjust the height automatically. You can also use CSS to set the width and height of a video as shown below.

video {

width: 800px;

height: auto;

}

Here we've used the auto value for our height CSS property. This means our height will be constrained by the aspect ratio and change with the value of our width property. When using CSS, we can use length units such as px, em, and ex. We can use percentage values. And in browsers that support it, we can use viewport units vw and vh.

Setting a Poster Image

If you've used the auto or metadata values for our preload attribute, your video will load the first frame of your video. But if you've used none as a value, your visitors will just see the player. We can do better than that. Let's specify an image placeholder using the poster attribute.

<video src="/path/to/media.file" controls width="427" height="240"

↵poster="/path/to/poster.image">

</video>

The value of the poster attribute must be the URL of an image file. It will be displayed when no video data is available. It's intended to be representative of the video, but it could easily be a corporate logo or simple title frame. In Chapter 6, we mentioned how to extract images from videos using FFmpeg, which you could use for the poster frame. But you could also take a regular screen shot and edit it using an image editor.

Poster Image Dimensions and video Element Dimensions

Poster images have intrinsic dimensions, just as video files do. Initially, the size of the video element will match the width and height of your poster image. Once the browser knows the dimensions of the video it will resize the element to match. To prevent this, either:

1. ensure that your poster image has the same height and width as your video; or

2. specify a height and width for the video element using attributes or CSS.

Almost any image format will work for your poster image, including SVG. Most browsers will constrain the image to the dimensions of the video element, if they are set, and expand to the size of the SVG file if not.

Figure 8.5. Most browsers constrain the dimensions of an SVG poster image to those of the video element. SVG image by Michele Brami from Openclipart.org

Internet Explorer does the opposite, however. It will constrain the poster image to the default 300-by-150 size when the video element lacks a height and width. If the dimensions are set, the SVG image will expand to its full intrinsic size.

Figure 8.6. Internet Explorer doesn't constrain SVG poster images when the video element has a set height and width. SVG image by Michele Brami from Openclipart.org

To work around this, make the intrinsic size of your SVG file smaller than the height and width of your video element.

What We've Learned So Far

Up to this point in the book we've covered the audio and video elements, and most of their important attributes. But what you may have noticed is that your audio and video examples did not work in every browser. If you used MP3 and M4V files, for example, your examples didn't work in Opera 16.

As we discussed in Chapter 6, browser vendors haven't yet agreed to support a standard file format. That means we need to serve our media files in multiple formats. But how can we do that when the video and audio elements only support a single src attribute?

Well the answer is that we can't, exactly. But we can use multiple source elements to supply multiple source files. Each browser will download the file format that it can most likely play. We'll discuss cross-browser video in our next chapter.