Part of the HTML Multimedia Reading List

HTML5 video has the same syntax as HTML5 audio, but tends to have greater engagement with visitors.

The video Element

Today, every modern graphical browser supports the .mp4 (MPEG-4) codec, so that should be the minimal standard offered by your site:

<video src="drone.mp4" controls> 
</video>

The video will appear at its native resolution and size by default.

Like the <audio> element, the controls attribute will produce “built in” UI elements that are specific to the browser, version, platform and operating system. You can make your own UI elements, but they should be carefully considered, and require JavaScript. Also like <audio>, <video> supports the preload, loop and autoplay attributes. With the possible exception of background video, autoplay and loop should be avoided. Most modern browsers will only support autoplay if the muted attribute is also applied:

<video src="drone.mp4" controls autoplay muted> 
</video>

The video element will automatically show the video’s first frame as the default placeholder. Since the first frame is often black, this can lead to large, unappealing black rectangles appearing on your page.

The solution is to use the poster attribute, directed to an image (usually a JPEG screenshot of the video at some interesting point) in the same aspect ratio as the video:

<video src="drone.mp4" controls poster="aerial.jpg"> 
</video>

The poster attribute works best on videos that are not set to autoplay.

Preloading and playsinline

preload

The preload attribute provides “hints” as to how much of the video should be “spooled up” by the browser. It should be emphasized that these are suggestions: the browser may decide not to follow the hint due to network conditions, battery level, and other factors.

The preload attribute can take three values: none, metadata and auto.

  • none: the video should not be preloaded at all.
  • metadata: only information such as the video’s length should be prefetched; video frames may or may not be preloaded.
  • auto: downloading the entire video before the user presses play would be ideal (but again, the browser may not follow the suggestion).

Using the preload attribute may be thought of as taking a bet on user’s interaction with the video. A value of auto (or a blank entry, i.e. just the attribute name, or preload="") should be used if you believe that it’s very likely that the user will play the video. preload="metadata" should be used if the user’s decision to play may be based on the length of the video.

playsinline

By default, pressing play on a video on an iOS will maximize the video to fullscreen size, obscuring the page content when it plays.

In most cases, this will improve the visibility of the video content for the user. But in some cases - such as using the video for a background - you don’t want this behaviour.

The playsinline attribute solves this:

<video src="drone.mp4" 
	preload playsinline muted autoplay> 
</video>

Such a video will play on the device in its original layout, without obscuring the content of the page.

Fluid video

Video should resize just as images do on a web page, using the same CSS technique:

video { 
    width: 100%; 
    height: auto; 
}

As with images, the width property refers to the width of the video relative to its container, assuming standard static layout.

One of the benefits of hosting your own video is that any CSS can be applied to it. Feeling in a film noir mood, and want your videos to be black and white? No need to edit and re-export the video; just apply a CSS filter to it:

video { 
    filter: grayscale(100%) 
}

Supporting Other Formats

While MP4 has universal support, it is almost two decades old, and not terribly efficient compared to more recent alternatives. You may find that converting the video to WebM format yields significant savings in file size and bandwidth costs.

Unfortunately, WebM is not yet universally supported. In that case, you should provide the webm version first as a source, using mp4 as a fallback:

<video controls> 
    <source src="drone.webm"> 
    <source src="drone.mp4"> 
</video>

Note that these are not two different pieces of video content, or a playlist; rather, they are the same video, provided in two different codecs. Browsers that support webm will preferentially download the (smaller, faster to load) .webm file; browsers that do not will load the .mp4 version. Attributes in the video tag will apply to both versions.

You will occasionally see code that includes the MIME type of the video:

<video controls> 
    <source src="drone.webm" type="video/webm"> 
    <source src="drone.mp4" type="video/mp4"> 
</video>

Often this is combined with advice to add the following to your site’s .htaccess file:

AddType video/webm .webm 
AddType video/mp4 .mp4

These steps provided an extra hint to the web hosting server as to what kind of content it was sending to the browser, and helped to ensure it was sent correctly. Today, most servers automatically recognize the video formats, and such steps are unnecessary, although including them doesn’t do any harm in the vast majority of cases.

Video by Ludovic Gibert, used under a Creative Commons Attribution 2.0 Generic License

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.