HTML5: Working with the Video element
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:
- 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.
- The player decodes the video files and then displays a series of frames within the player screen.
- 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>
</video>
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>
</video>
<!-- 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.