HTML 5 Tutorial for Web Developers: The Video Element

The HTML 5 specification is from being an official specification. In fact, according to developer Ian Hickson, who is actively working on the spec, says it won’t be ready until 2022. That said, the W3C has just released an overview of the vocabulary and associated APIs for HTML and XHTML, and we’ll bring you the details of the <video> element in this article for web developers.

New Features, Elements and User Agents

In the W3C’s overview, released on May 23rd, new features are introduced for web application developers, and new elements are introduced based on research conducted on current web development practices. Given the nature of the web and mobile devices, extra attention was given to define conformance criteria for user agents, with the goal of improving interoperability.

If you are already familiar with HTML, you will be ready to jump into HTML 5 without much of a learning curve. In the W3C’s document, each of the HTML 5 elements are discussed, including the often discussed <video> element, which we will discuss here.

The <video> Element and Its Attributes

Like most other HTML elements, the <video> tag has several Content attributes associated with it:

• Global attributes
• src
• poster
• preload
• autoplay
• loop
• controls
• width
• height

The src, preload, autoplay, loop and controls attributes are the same for all media elements. They are self-explanitory, that is they define the source of the video, whether to preload, autoplay, loop and/or show controls to the visitor of the page with the video.

The Global attributes are common to all elements, and include:

• accesskey
• class
• contenteditable
• contextmenu
• dir
• draggable
• hidden
• id
• lang
• spellcheck
• style
• tabindex
• title

The <video> element also has a Document Object Model (DOM) interface, which is used like this:

interface HTMLVideoElement : HTMLMediaElement {
           attribute DOMString width;
           attribute DOMString height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

As might be expected, the video element (shown going forward without the opening and closing tags) is used for playing videos on a web page.

Like other elements, web developers can add content within the video element to provide content to older web browsers which do not support the video element. This content can support legacy video plugins, such as Flash, or it can be used to provide links to users of these archaic browsers which allows them to access it through another mechanism.

The Poster Attribute

The poster attribute provides the address (URL) of an image file that shows up while no video data is available. The image is supposed to be a representative frame of the video, usually the first non-blank frame, which provides the user with an idea of what the video is about. When there is no video available, such as when the video is still loading, the user is presented with the poster image, or if that is not provided, they will see nothing.

While a video is playing, should it be paused by the user, the poster frame element represents the frame of the video corresponding to the current playback position. If the video is buffering, the last frame of the video that was rendered will be shown.

Video Width and Height

The video’s playback size will reflect that of the video itself in CSS pixels as defined for the format used–that is, the videoWidth and videoHeight dimension attributes return the width and height of the video in pixels. If they are not defined, it will be 300 pixels for width, and 150 pixels for height.

JavaScript Can Help If the Video Fails

Often a resource is not available, has moved, or otherwise causes a video to not play. Fortunately, JavaScript can be used to detect when a video does not play correctly:

<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>

So Let’s See It Work

After all this discussion, I’m sure you’d like to see some HTML 5 video in action, so here goes (you must use an HTML 5-compatible web browser). This sample is provided by Camen Design, and they have provided a test pageyou can use to test your own browsers and devices as well. The code itself looks like this:

<video width="640" height="360" controls preload="none">
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.MP4" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>
<p>	<strong>Download Video:</strong>
	Closed Format:	<a href="__VIDEO__.MP4">"MP4"</a>
	Open Format:	<a href="__VIDEO__.OGV">"OGG"</a>
</p>

And here it is in action:

As you can see (or if you’re using a browser without HTML 5 support, not see), adding video using the HTML 5 video element is about as easy as adding an image, with a few more attributes available.