Using HTML 5 Rich Media Tags
May 12, 2011 In Development By Matthew DavidToday, people will watch more than 2 billion movies on the Internet. That’s right, two billion. Video is a big deal. Fortunately, HTML5 will make it easier for you to add video when you use a new HTML element called VIDEO.
The new video element is similar to the IMG element for images—it sits within the HTML BODY tag inserted in a webpage. To include video, you just add the following:
<video src="myMovie.mp4" ></video>
The above example links to an MPEG4-encoded video. That’s it. No fussing with plugin OBJECT tags and parameters. Just one line using a simple, powerful HTML5 element.
This new VIDEO element has instigated a war of words about which video format the VIDEO element should play. There are three formats jostling for votes (MPEG4, Ogg and WebM). The good news is, the top 5 web browsers now support VIDEO, including Internet Explorer 9.
In this article, I’ll introduce you to:
- The HTML5 VIDEO element
- The attributes used to control content within the element
- How to encode HTML5 Video
- Whether or not you should be using HTML5 Video in your website
Controlling video with VIDEO tags
As we’ve seen, adding a VIDEO element requires only one line in your HTML. The following example adds opening and closing tags for the VIDEO element. The first tag includes an SRC attribute that points to a supported HTML5 video file (in this example we’re pointing to a MPEG4 video):
<video src=”myMovie.mp4” ></video>
That’s it. If you want to get more sophisticated you can use the following attributes for the VIDEO element:
- Autoplay – the video will play immediately if already downloaded in your cache
- Controls – a simple playback head will be added with VCR-like play and pause controls
- Height and Width
- Loop – you can loop the video
To get the most out of your video playback you’ll want to use some of the attributes listed above. For instance, if you want your video to start playing when the Web page has finished loading, you should use the AUTOPLAY attribute as follows:
<video src="myMovie.mp4" autoplay></video>
The video won’t automatically play if you don’t include it.
NOTE: the autoplay attribute doesn’t work with Mobile Safari on the iPhone and iPad.
A second useful attribute to add is the “controls” attribute.
<video src="myMovie.mp4" autoplay controls></video>
Try viewing the controls attribute in IE9, Chrome, FireFox, Opera or Safari—you’ll notice it looks different in each browser. Each browser uses a different playback video engine, and each engine has its own default control style. This can make it difficult to present a video playback experience that’s consistent from one browser to another.
Luckily, there’s a way to override this issue using JavaScript and CSS.
Controlling the VIDEO element with JavaScript
You can control the VIDEO element with JavaScript. This means you can control media using your own custom controls. The following example will show you how to add a custom Play/Pause button to your video.
Start out with a blank HTML5 page:
<!DOCTYPE HTML> <html> <head> <title>Video in HTML5</title> </head> <body> </body> </html>
In the BODY section, add the VIDEO element and link to a video file:
<video autoplay > <source src="myMovie.mp4"> </video>
You can see here that the video file doesn’t have any attributes that control playback. You can add those controls programmatically with JavaScript. Let’s start by adding the controls that play the movie:
<a href="#" >Play/Pause</a>
After the VIDEO element, add the following JavaScript:
<script>
var video = document.getElementsByTagName('video')[0];
</script>
This script gives the VIDEO element a name you can reference. The final step is to add a script to the ANCHOR tag:
<a href="#" onclick="if (video.paused) video.play(); else video.pause()">Play/Pause</a>
The ANCHOR element uses an onclick event to trigger an IF/ELSE JavaScript command. If the button is pressed and the video hasn’t been played, then the video will start to play. Else, if the video is playing and the button is selected it will pause the video. Altogether your code will look like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Video in HTML5</title>?
</head>
<body>
<video autoplay >
<source src="myMovie.mp4">
</video>
<script>
var video = document.getElementsByTagName('video')[0];
</script>
<br />
<a href="#" onclick="if (video.paused) video.play(); else video.pause()">Play/Pause</a>
</p>
</body>
</html>
An additional benefit of using JavaScript to control the presentation of your controls is that you can use CSS to style them. Here is a basic style applied to our video controls:
<!DOCTYPE HTML> <html> <head> <title>Video in HTML5</title> <style type="text/css">
a {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: large;
text-decoration: none;
color: #C0C0C0;
}
h1 {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 24pt;
color: #C0C0C0;
}
body {
background-color: #000000;
}
</style>
</head>
<body>
<h1 align="center">Video with Custom JavaScript Controls</h1><p align="center">
<video autoplay >
<source src="myMovie.mp4">
</video>
<script>
var video = document.getElementsByTagName('video')[0];
</script>
<br />
<a href="#" onclick="if (video.paused) video.play(); else video.pause()"> Play/Pause</a>
</p>
</body>
</html>
There are other controls you can add to your VIDEO element. You can add a playback head to track where you are in the video, for example, as well as fast-forward and rewind. There’s no doubt that as HTML5 VIDEO element matures, we’ll develop tools for quickly creating skins and themes for video players.
Encoding Video and Audio for Web Delivery
Before HTML5, you would have to use a combination of OBJECT and EMBED elements to add video to your webpage. Video requires support of a plugin such as Adobe’s Flash. HTML5 sidesteps support for third-party plugins (such as Windows Media Player, Flash or RealPlayer) by adding video CODECs directly to the browser. A CODEC (Compression/Decompression) is the technology that allows video files to be converted into smaller, streamed files. Currently three CODECs are gaining support in HTML5. They are the H.264 video standard and two open-source solutions: Ogg Theora video and webM.
The H.264 support, also known as MPEG4, is the video and audio format supported on your iPhone and used by many companies. Unfortunately, MPEG4 has patents that protect the technology. This has lead to confusion about whether or not you can freely use MPEG4 video in your webpages. The patent group managing MPEG4, the MPEG-LA group, has stated they will NOT charge royalties for the use of MPEG4 video embedded into webpages. Check out the comprehensive FAQ Microsoft put together here: http://www.microsoft.com/windows/windowsmedia/licensing/mpeg4faq.aspx ).
The alternatives to H.264 are Theora and webM formats. Technically, H.264 is cleaner at higher resolutions (you’d have to be a videophile to see the difference), but overall the quality difference between H.264 and Theora/WebM is minimal. Ultimately, consumers of video/audio content will determine which CODEC will become the format of choice.
The challenge we face now is identifying which browser supports which video format. Here’s a brief breakdown:
| MPEG4 | OGG THEORA | WEBM | |
| Firefox | No | Yes | Yes |
| Chrome | No | Yes | Yes |
| Safari | Yes | No | No |
| IE9 | Yes | No | Yes (only if CODEC is installed separately on computer) |
| Opera | No (except for Linux installations where GStreamer plays back the media) | Yes | Yes |
Follow the Conversation
17 comments so far. You should leave one, too.
A great way to display videos on a website, gives you so many possibilities to customize, but far to early to use in commercial projects. even skipping support for IE6 was hard, we still see people come to our website using IE6. there are just too many people out there using old browsers ...
Martin,
You make a good point. An area where I see growth for HTML5 Video is not in traditional desktop computers, but on mobile devices. In many ways, Android and iOS phones are years ahead for HTML5 support over many desktops - for the simple reason SmartPhones started with HTML5 and are not reliant on updates. I am very much looking forward to seeing HTML5 support in Windows Phone 7 "Mango" when it comes out.
Great comment!
Rob,
Great comment. The challenge with SMIL is support. I was actually part of the original SMIL development back in 2001 before it became part of the W3C standard (even wrote a cool JavaScript SMIL generator). The problem then, as now, is support. Today, the good news is that most modern browsers support SMIL through SVG. You can see the support in this link: http://caniuse.com/#svg-smil
Md
I can't wait to use those HMTL5-tags. Not only because of better performance, but also because of the possibility the get control about the custom controls...
@WebDesign You can use the new HTML5 Video/Audio elements today. All Smartphones support them and most Web browsers (about 20% are still on IE8, but the number is getting smaller all the time).
Have fun!
I'm just starter for programming.
It's helpful.
Urgent Care In Queens NY-Walk In Welcome
Wow
Great information.
Visit Most convenient clinic Urgent Care In Queens NY-Walk In Welcome
can video tag works on iPAD ??
Yes, video tags work on the iPad now.
really interesting article - have passed this onto my developers for digestion - many thanks
For live streaming video how its work?
shall i write like this
My target is IE9,iPad,Andriod please give me an idea for live streaming video
Many thanks for these great instructions, I was looking for exactly. I have already tried a lot but nothing worked. Very important for me was the function with the iPad.
Many thanks again!
Here is an example of a live streaming video trick in HTML5: http://stackoverflow.com/questions/5858936/html5-live-streaming
Yes, thank for the details a million! Have to discover anybody organizing Tea Party. I wants to participate in organizing.
Cheers for this content, guys, continue to keep up the good work.
Hello there, I should say it is a clever posting. I'll certainly be seeking in on this web site yet again soon.
Hi! Your publish rocks and can be a great study!