When the <video> tag was first unveiled, a wave of excitement swept through the web developer community. Prior to the <video> tag, offering videos on a web page meant using a plugin like Flash, QuickTime, or RealPlayer. There was no standards-compliant way to embed videos in a webpage.
The <video> tag eliminated all those worries. It offered developers an opportunity to embed videos directly to their web pages. However, the <video> tag also brought developers face to face with the issue codecs ‐ a challenge from which plugins and third party services had previously shielded them.
As HTML5 becomes widespread, <video> tag will most likely become more common place. This article will tell you how to use it to embed videos in HTML5, how to handle different video formats, and what do to about browsers which don’t understand the <video> tag.
The <video> Tag
The <video> tag was introduced to make it possible to embed videos directly into a web page. Prior to this tag, it was impossible to play videos directly in a web browser. You needed a plugin like Adobe Flash Player because browsers didn’t have the inherent capacity to do so. That is why older browsers like IE 7 can’t play videos without a little help from plugins. They are not built for it.With the <video> tag, browsers are supposed to have an inbuilt capability to play videos – thereby forever eliminating the need for video plugins.
At the simplest level, a basic implementation of the <video> tag looks like this:
<video src="my_video.mp4" width ="500" height="350" controls>
<strong> HTML5 video element not supported </strong>
</video>
src ‐ the URL of the video file.
width ‐ the width of the video display in pixels
height ‐ the height of the video display in pixels
controls ‐ a simple control panel at the bottom of the video display. It typically contains a play/pause button, a volume control, a progress bar and a full-screen maximization button. If you don’t include the “controls” attribute, the video will be displayed without a control panel.
The text between <video> and </video> tags: This is intended for browsers which don’t support the <video> tag. The text contained will be displayed. Later, we shall consider options of how to deal with such browsers.
That is a basic implementation of the video tag. In a browser which supports the <video> tag, it will display like this:
In a browser that doesn’t support the <video> tag, it will display this:
HTML5 video element not supported
Attributes of the <video> tag
The video tag implementation given above is sufficient for the most basic uses of the <video> tag. In fact, you can copy it the way it is, change the src value to reference your video file, and you will have successfully embedded a video in HTML5. However, sometimes you need more control over their videos. The tag comes packed with many attributes for controlling different aspects and behavior of the video.
Among the common attributes are the following:
| attribute | description | Value(s) | Example |
|---|---|---|---|
| poster | A picture which covers the video display before it starts playing |
URL of the image | poster = “images/loading.png” |
| autoplay | As soon as the video finishes loading, it should begin playing | autoplay | autoplay Or autoplay=”autoplay” |
| loop | As soon as the video fishes playing, it should begin playing again. The video should keep playing unless the user stops it |
loop | loop Or loop = “loop” |
| preload | Whether the video should be loaded immediately the web page loads.
These values mean the following: metadata means the browser should load the video’s metadata (e.g format, |
auto none metadata |
preload Or preload=”auto” |
| muted | The audio output of the video should be muted | muted Or muted = “muted” |
The tag also supports standard HTML attributes such as id, class, style, title, accesskey and lang. it also supports universal HTML5 attributes like draggable, hidden, dropzone and data.
The only thing which is a little weird are the attributes which seem to double as values (Example: muted=”muted”, loop = “loop” and autoplay=”autoplay”). Such attributes are specified in XHTML compatible way. For being HTML5 compatible, the single values (Example: muted, loop and autoplay) are sufficient.
Here is a <video> implementation we saw earlier. However, it’s been souped up with more attributes : poster, preload, autoplay, and loop )
<video src="my_video.mp4" width ="500" height="350"
controls autoplay preload loop poster="images/preload-icon.png" >
<strong> HTML5 video element not supported </strong>
</video>
The way some of the attributes are set up i.e. “controls autoplay preload loop” looks rather strange. It runs contrary to the standard HTML model of attribute="value". If you prefer the more familiar syntax, you can rewrite that section as controls="controls" autoplay="autoplay" preload="preload" loop="loop" . It will work just fine.
Video Formats
The main weakness of the <video> tag is that it has brought web developers into the complex world of video codecs. Now codecs are little encumbrances which are typically reserved for professional video editors. To the lay person, a codec is a video format (although in actual sense, it is something far more complex. If you are the curious type, you can read all about it, see this page).
Now, different browsers support different video formats. Early adopters were actually furious when they realized that unlike with Flash, the <video> tag requires more than one format for each single video.
But that is generally a challenge with most native browser implementations, each browser vendor does things their own way, and developers have to pick up the pieces. Any developer worth his or her salt will place browser incompatibilities into perspective. When it comes to video formats, it is actually kind of straightforward.
There are three video formats (or codecs if you like) which are supported by the major browsers on the market. These are:
- MP4
- WebM
- Ogg
Now, if you want details on each of these formats, you can visit this link . For now, you need to know which browser supports which format. The specifics are given in the table below:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Opera | No | Yes | Yes |
| Safari | Yes | No | No |
| Internet Explorer | Yes | No | No |
From the table, it is obvious that MP4 is the most widely supported format. The only browser which doesn’t support the MP4 format is Opera, and it supports the other two. Therefore, including MP4 with any of the other formats will make your video play on all browsers.
To embed each format, you use the <source> tag as follows:
<source src="my_video.mp4" type="video/mp4">
<source> – this is a tag which is typically used to specify multiple media resources for media elements.
src ‐ this is a URL of the video. It can be a static or relative URL; or a path to the video file
type=”video/mp4″ ‐ this is the MIME type of the video.
These are the mime types of the video formats mentioned above:
MP4 video/mp4
WebM video/webm
Ogg Video/ogg
The MIME type is used by the browser to determine whether or not to load the video file from the server. Before attempting to load, a browser checks the Mime type. If it is incompatible, then it does not even bother loading it. If it is compatible, then it loads it, and skips all the other files which follow. Therefore you must make sure that you specify the correct MIME type.
Once you have everything in place, you simply insert each <source> tag between the opening and closing <video> tags. Here is an improved version of our implementation, with coverage made for different video formats.
<video width ="500" height="350"
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
<strong> HTML5 video element not supported </strong>
</video>
So, that’s how to handle the different formatting issues. It is quite straightforward really. The only challenge might be getting your videos into different formats. There are several online services and desktop tools that does video conversions. You can use to convert to common video formats like AVI into MP4, Ogg or WebM. See:
The above implementation will make your videos to play on every browser which supports the video tag. This includes even mobile versions of most standard browsers. This will make your video available to close to 90% of web users. However, there is one problem. It doesn’t work with browsers which don’t support the <video> tag. You need to plan for those ones also.
A Fall Back Option For Older Browsers
Older browsers don’t understand the <video> tag. Although some like the IE 8 are quickly fading from the market, you can never know which browser version a visitor to your web page is using. The smartest option is to plan for them.
When it comes to videos, the best option is to embed a Flash video as a fallback position for older browsers. Basically, you use the <object> tag to insert a .,swf file right before the closing tag of the <video>.
Here is our implementation, with an allowance made for browsers which do not support the <video> tag.
<video width ="500" height="350"
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
<object width ="500" height="350"type="application/x-shockwave-flash" data="flash_file.swf">
<param name="movie" value="flash_file.swf">
</object>
</video>
The above implementation is perfect for effectively handling almost every browser on the planet. It covers different video formats, and provides a fallback position for legacy browsers. In many respects, it is sufficient.
However, those who prefer to cover every eventuality will ask a question like: what if the user doesn’t have Adobe Flash Player? Well, in this case, you have two options: you can advise them to download and install Flash Player, or you can give them the option of downloading the video.
To provide a download option, you can carry out two options. First, you provide an image file as the final fallback option for those without a Flash Player. You do this by adding an <img> before the final <video> closing tag. The purpose of the image is to actually alert the user that there is supposed to be a video in that position. Secondly, you provide a download link for the video.
With these two modifications in mind, our implementation will now look like this:
<video width ="500" height="350"
controls autoplay preload loop poster="images/preload-icon.png">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
<object width ="500" height="350"type="application/x-shockwave-flash" data="flash_file.swf">
<param name="movie" value="flash_file.swf">
</object>
<img width="500" height="350" src="my_fallback_image.jpg" alt="embedded video"
title="cannot play video. Please download the video from the link below" >
</video>
<a href="my_video.mp4"> Download Video </a>
In a nutshell, this is how to embed videos in HTML5. As you may have noticed, it is not that difficult. In fact, you can copy the above implementation directly onto your web page, set the properties to your preference, and you will be good to go.
Video and Accessibility
One unfortunate aspect of web video is complete absence of accessibility support in the current implementations. Though web video is gaining popularity very fast, the Accessibility features are yet in its infancy.
The keyboard accessibility in video players are lagging. When the video controls are customized, there is no keyboard support at all.
Another aspect is the lack of captioning features. HTML5 tag does not contain any built-in mechanism for captioning, descriptions, transcripts, or other media alternatives.
Related Reading
- Future Web Accessibility: HTML5 <video>: webaim.org
- VideoSub – a standards compliant way to add video subtitles to HTML5 video tags
- The track element allows authors to specify explicit external timed text tracks for media elements: whatwg.org
- Multimedia Accessibility: w3.org
Read More:
- The video element: w3c.org
- FrontEnd Masters HTML5 Media In depth workshop
- Introduction to HTML5 Video : dev.opera.com
- Flash and the HTML5 <video> tag: Youtube API Blog
- Understanding HTML5 Video Formats:About.com
- Building HTML5 video controls with JavaScript:Peter Gasston
- HTML5 Video Browser Compatibility – CanIUse.com
- Videos for the Web with HTML 5 – elstel.org
- HTML5 Video Player Comparison : Philip Bräunlich and Gerrit van Aaken
- Video for Everybody!
HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms.
- VideoJS – HTML5 Video player in JavaScript
HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven’t been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies. - HTML Video Codec Support in Chrome: The chromium blog
- Media formats supported by the HTML audio and video elements in Firefox:developer.mozilla.org
- Opera Supports the WebM Video Format:dev.opera.com
- HTML5 Video Support in IE9 Mobile