Demonstration of HTML5
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 "/".
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.
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.
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.
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.)
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.
- HTML5 Audio Demo This solution works in all current browsers, including IE9, but does not work in IE 7 or IE 8. Consider adding jPlayer for playback in older non-HTML5 browsers.
- Dive Into HTML5 - Video from the online version of Mark Pilgrim's book, HTML5: Up and Running.
- VideoJS is an HTML5 Video Player that adds consistent set of player controls, backward compatibility for some older browsers, and a flash fallback for others.
- jPlayer is a jQuery HTML5 Audio & Video Player, and the newest version looks extremely promising although I haven't used it any projects personally. Be sure to grab a copy of the demos to assist you in correct setup.