HTML5 Video Demo

By B Lingafelter Apr 30, 2013 HTML5

Demonstration of HTML5 <video> and <source> elements to serve video to all current browsers without the use of browser plugins. The html5media javascript is included for backward compatibility in older browsers that do not support HTML5, like Internet Explorer 7 and 8.

Attribution: Big Buck Bunny trailer from the Peach open movie project licensed under the Creative Commons Attribution 3.0 license. Copyright © 2008, Blender Foundation http://www.bigbuckbunny.org/.
Unable to play video? Download links: MP4, WebM, Ogg

The Markup

Step 1: Use the HTML5 doctype to serve the page as HTML5

Convert the page to HTML5. Most of the syntax rules still apply except for empty elements (like <img>, <br>, and <meta>); they no longer need to be closed with a "space" and "/".

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page title goes here</title>
</head>
<body>
  <!-- All markup elements go in the body as usual -->
</body>
</html>

Step 2: Add one <video> element and a <source> element for each of the three required video formats

The <video> element shown below, includes several useful attributes: controls adds the native video control elements, like play/pause, progress bar, and volume; preload allows the video to begin downloading when the page loads; poster specifies the path and filename of the image to be displayed before the video plays.

The <source> element specifies the path and filename of the video and its container type. Because the current browsers do not all play the same video formats, you will need to create and specify each of these video formats: .mp4, .webM, and .ogg. Refer to Video Formats below for more information.

You are not required to nest the <video> element inside a <div>, but doing so increases your ability to style the video player.

<div class="vplayer">
<video id="video1" controls preload width="480" height="272" poster="media/bigbuckbunny-poster.jpg">
  <source src="media/bigbuckbunnytrailer-480p.mp4" type="video/mp4">
  <source src="media/bigbuckbunnytrailer-480p.webm" type="video/webm">
  <source src="media/bigbuckbunnytrailer-480p.ogg" type="video/ogg">
</video>
</div>

Step 3: Add a fallback option for older browsers

For older browsers that do not support HTML5 elements, like Internet Explorer 7 and 8, include the html5media.js script in the <head> of the page that contains the <video> element. Read more about html5media script.

<head>
  <title>Page title goes here</title>    
  <script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
  <link href="css/styles.css" rel="stylesheet">
</head>

Video Formats

A video file contains an encoded video stream of images and an encoded audio stream packaged together in a container. The .MP4, .WebM, and .OGG containers are the relevant ones for the web but the video and audio streams in each container are encoded with different codecs. A codec is the algorithm used to encode the video and audio stream and is read, or decoded, by a video player when you watch a video.

The .MP4 container packages the H.264 video codec and the AAC audio codec.
The .WebM container packages the VP8 video codec and commonly the Vorbis audio codec.
The .OGG container packages the Theora video codec and the Vorbis audio codec.

According to Professor Markup in the video chapter of Mark Pilgrim's Dive Into HTML5 online book:

There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

Refer to Mark Pilgrim's Dive Into HTML5 online book for a more detailed explanation of video containers and codecs, and a table view of the codecs and containers supported by current browsers.

Encoding Tools

To encode and convert your videos to the required HTML5 video formats, you will need one or both of the following tools: (Both are free, open-source tools.)

Handbrake - Use to rip and/or encode a variety of formats, like .MOV, .AVI, or .DV, to H.264 in a .MP4 container. Refer to Mark Pilgrim's Dive Into HTML5 online book for step-by-step instructions.

Miro Converter - Use to convert .MP4 to .WebM and/or .OGG container. Simpler than the Firefogg add-on for Firefox but with less options. Refer to Mark Pilgrim's Dive Into HTML5 online book for step-by-step instructions.

Web Server MIME types

If your video works when testing locally but does not work after publishing, your web server may not be correctly configured to serve the proper MIME types. To fix the issue on an Apache server, use the AddType directive in the normally hidden .htaccess file and place the file in the directory where the video files are stored. You can also use the cPanel or other similar interface to manually add MIME types to your web server. Refer to Mark Pilgrim's Dive Into HTML5 online book for a more detailed explanation of MIME types.

Note: The web server you are using for your student account on Butlercc Webhosting is already properly configured to serve the audio and video MIME types you are using. If your video does not work after publishing, there is an issue other than improperly configured MIME types.

ButlerCC Webhosting