HTML5: Working with the Video element

Ryan Boudreaux looks at the <video> element in HTML5 and discusses the current state of adoption rates for HTML5-supported codecs among the popular browsers.</video>

The HTML5 video <video> element is similar to the HTML5 audio <audio> element in its delivery of online multimedia content as a video player; however, the element does have several additional attributes relating to the way in which video is presented online, primarily evident in the way video files are transmitted into digital formats. All video file formats are actually container files, similar to a compressed zip file containing multiple files, and synchronized to play together with the combination of both audio and video creating a multimedia presentation. Essentially a "video" is actually a series of frames for the visual effect along with audio files for sound effects.

Video codecs

Video codecs allow video players to decode the streaming media files; in essence, when you are "watching a video" your online video player is performing at least these three functions simultaneously:

  1. The player translates the data within the separate files by verifying the container format, and then determining the available tracks which might include the video, video effects, text overlays, video overlays, audio mix, and voice recorded tracks.
  2. The player decodes the video files and then displays a series of frames within the player screen.
  3. The player decodes the audio streams and processes the sound frequencies to the audio device and speakers connected to your computer.

Without getting too much into the differences between all the video container file compression formats, below is a list of several popular codecs available today which, when utilized within the HTML5 <video> element, are viewable in certain browsers (more on that later):

  • MPEG4 or H.264 typically with an extension of .Mp4 or .M4v
  • Ogg with the .Ogv extension also called "Theora"
  • WebM or VP8 is a royalty-free open audio-video compression format with the .WebM extension

Adoption rate

In fact, there are hundreds of video codecs available, and this contributes to the complexity for finding a standard video format which all browsers can agree upon, and continues to be the primary reason for a slower adoption rate for the HTML5 <video> element. However, several content providers are making inroads into HTML5 Video online presentation including Blip.tv, Vimeo, and YouTube. For instance, YouTube announced on their blog on April 19, 2011 that all new videos will now be transcoded into WebM for audio and video on the web, in particular, for easier viewing on mobile devices.

The HTML5 Video element in its simplest form is represented in this clean and minimal fashion:

<video src="video.mp4" poster="video.gif" controls>
   <!-- Fallback statement -->
   <p>Your browser does not support the video element. </p>

The source attribute points to the file itself; the poster attribute points to a screen capture of the video which is displayed on the player screen before the file is played; and controls provides typical play stop and start, sound volume levels, and depending on the browser, an option to open in a new screen, and a full screen view.

Multiple sources

The current HTML5 video specification does not indicate which video formats browsers should support within the video element. User agents are free to support any video formats they feel are appropriate. Since there is no one-size-fits-all solution at this time for cross-browser support of all video/audio file formats and codecs, it means is that as a web developer, you will have to provide multiple sources of the same project -- in effect, you will have to encode your video files across multiple formats.

However, to ensure you get the most viewers to render your videos using HTML5, you should employ at least three sources in your video element code, as shown in the example below. Take note that the codecs are listed for each source to assist the browser in making the file format/codec selection within the source tree. Browsers will parse the source tree in the order listed until a compatible format is found, or the fallback statement gets displayed.

<video poster="video.gif" controls>
   <source src='video.webm' type='video/webm; codecs="vp8.0, vorbis"'>
   <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
   <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
   <!-- Fallback statement -->
   <p>Your browser does not support the video element.</p>
<!-- Fallback Flash code -->

As an additional option for fallback support, Flash Video can be added, which would necessitate having to transcode the file into .FLV or .FL4 container format and including the fallback Flash code along with the HTML5 video element.

Browser support

Testing your HTML5 videos in multiple browsers can become a taxing process, therefore, here is a matrix of popular browsers to help identify the codecs which browsers support when using the HTML5 <video> element  video player.

On January 11, 2011, Google's Chromium Project announced on their blog that support for closed codecs, in particular the H.264 (MPEG4), would be removed from future releases of Chrome. The blog post mentioned that the removal was their effort to increase use of the license-free HTML5 <video> element by directing their resources toward the adoption of open-source codecs such as VP8 and Theora.

Several websites are testing the HTML5 video player with different codecs for compatibility viewing within various browsers, including this demo video using VP8/WebM, using a 2-minute test file which was encoded with a WebM VP8 video converter.

It seems that there is still a lot of ground to cover between the various video content providers and the differences among the popular browsers' adoption rates for HTML5-supported video codecs. For now the challenges facing web developers and utilizing the HTML5 video element with universal cross-browser compatibility means having to offer more than a few sources of the same video file.


Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...


I am not getting the VP8 video to play on Firefox 6.0.2. Mostly just shows an X. Got the play bar to come up once (don't know how), but it never played. Bill


Or that browsers will have one built in. I don't look forward to what this will do to processor consumption and bandwidth.


I am running right now in Windows 7. Firefox uses the Windows file associations. When VLC was installed, it claimed virtually every video and audio codec. To view it in Firefox, I had to go into the windows control panel, and switch WebM to Firefox in the file associations. Then it ran in Firefox. VLC still did a better job of it, though. Overall, I think that I will still stick with VLC for viewing WebM. Still, HTML 5 has great promise. Whenever Microsoft gets around to using WebM in it's browser, we will have a winner. Right now, the combination of Firefox and Chrome gives WebM almost the same share as the combination of IE plus Safari. Microsoft has a history of going where the customers are. I hope that they will include the ability to view WebM in IE soon. After all, it's free, and sometimes gives superior performance. WebM in HTML 5 will allow for a great future. Now, what about real 3D over a browser?


I am also using Firefox 6.0.2. It didn't start in Firefox. I did start it though in VLC just fine. It played flawlessly in VLC. I guess the HTML 5 integration in Firefox is still a project under construction. I tried the suggestion of bhkolts, and it didn't give me an option for firefox. I settled for VLC. VLC continues to play anything I throw at it.


Bill, I to am using Firefox 6.0.2 also, and experienced the same "X". I also use NoScript and told NoScript to temporarily allow this page. That got me to the "X". Then right clicking in the video window an choosing "View Video", then in the download box ticked "open with" and selected Firefox. The video downloaded and played in Firefox. It was a little choppy at times but all in all not bad. Hope this helps. Barry


Browsers are not allowed to "auto-play". When compared to current handling of Flash content the new HTML5 websites will be much easier on the resources. In fact I have no idea where you are coming from. The current state of Web 3.0 animated everything drives me insane. I use NoScript to shut the whole thing down. Due to the fact that HTML5 can play a video without any client side scripting I will be able to view a video in this new format while still blocking javascript. It looks good to me.

Editor's Picks