HTML5 Video Element

Until now, showing videos on websites was something that exclusively relied on third party browser plugins, where Adobe’s Flash had largely been the plugin of choice. This plugin-based approach brought several problems along;

• The security of browsers has often been compromised due to security breaches in the third party software
• Adobe Flash has been criticized by many for using unreasonable amounts of resources
• Some third party software is platform dependent
• Given that there was no standard, some businesses cut support for Flash in favor of its own proprietary competitor
• Some businesses developed their own software such as QuickTime and Silverlight, which led to further segmentation of the market. However, Flash’s market share was always miles ahead, which is still the case as of this writing

HTML5’s video element seeks to overcome these limitations by providing a standard way of embedding video into web applications. Some may even have noticed that YouTube is experimenting with HTML5.

The Markup

The markup required for adding a video to a web page is incredibly simple, as the markup follows the same principles as with previous versions of HTML. It can be accomplished with the following markup:

<video src="video.mp4" width="480" height="360" controls="controls">
  Text to display if the browser does not support the video element or video format.
</video>

The controls attribute tells the browser to display video controls such as play/pause and volume. To ensure browser compatibility, one can specify multiple sources to videos in different formats like shown below.

<video width="480" height="360" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />

  Text to display if the browser does not support the video element one of the video formats.
</video>

As it can be seen from the above example, a fallback text can be specified. In fact, this is not limited to being text, but can also be a nested Flash element, which improves browser compatibility even further.

Notice that the video element has multiple source tags. As we shall see, there is currently no agreement on a standard format to be used. The browser will use the first supported format that is encountered.

Assuming that your browser supports the HTML5 video element and the H.264 format, you should be able to see this code in action below.

There are more attributes available to the video tag than those used in the previous examples. These, excluding global HTML attributes, are shown in the table below.

Video formats

Now, everything has a price. Developers now have a simple and standard element to make use of in browsers that support it (all modern browsers), but unfortunately browser compatibility still comes into play; the HTML5 specification does not specify which formats browsers should support. There is an ongoing discussion about which codecs to support, and choosing a patent free codec is of top priority. Several widely used formats, such as H.264, have patented technology and as a result, there is a concern that should one such format be chosen as the standard, there could be patent lawsuits in the future.

Although not convenient, the solution is simple. As previously discussed, it is easy to specify several formats such that browsers can use the one they support, if any. This does require publishers to keep copies of their videos in multiple formats, which is one of the things the video tag was supposed to avoid in the first place. As such, until a standard format has been agreed upon, the main purpose of the HTML5 video element is thus to not require third party software to be installed. As of today, using a combination of the H.264 and WebM format will result in full browser support.

JavaScript API

The standard of the video element provides a great deal of flexibility, meaning that developers can control much of the behavior of the element through attributes and particularly a JavaScript API. Consider the simplified example below for a few examples.

var video = document.getElementById('my-video-element');

// Play video
if (video.paused) { video.play(); }

// Pause video
if (!video.paused) { video.pause(); }

// Set volume to 50%
video.volume = 0.5;

// Set current time to five seconds (navigates the video)
video.currentTime = 5;

// Gets the length of the video
var duration = video.duration;

Note that most properties can be used to both set or get the property value. There are also several events available, such that an event handler can be triggered when the video is paused or begins playing, for instance. The full list of methods, properties and events is outside the scope of this article, but w3schools.com has put together a good reference.

Last Words

While there are still some hurdles that need to be resolved, the HTML5 video tag is indeed a major step in the right direction of a standardized web. For now, however, using the H.264 and WebM formats in combination should ensure support in all major browsers. HTML5 video elements can easily be controlled by JavaScript because a simple and powerful API is available.

As a last note, there is also a HTML5 audio element. This element is almost identical to the video element except for the name of course. Thus, everything you have learned in this article also applies to the HTML audio element. Beautiful, isn’t it?

Thank you for reading.