HTML5 new tags: video, track, embed, object, mark, progress, meter, time

HTML5 Logo

<video>

Embed a video into your document without requiring the user to have a plugin installed.

Even if the video and also audio tag are a nice addition, i think that right now it's better to use a javascript library to ensure backwards compatibility for older browsers. Those libraries will also make it easier to use the controls an have a controls layouts that are the same across all types of browser.

Video tag with fallback for flash player using object and embed tags, might look like this:


<video controls="controls" preload="auto" width="640" height="360">
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
    <object>
        <param name='movie'           value='player.swf'>
        <param name='allowfullscreen' value='true'>
        <param name='flashvars'       value='file=video.mp4'>
            <embed src='player.swf'
                    allowscriptaccess='always'
                    allowfullscreen='true'
                    flashvars="file=video.mp4"
            />
    </object>
</video>

HTML5 video players

HTML5video.org has a nice comparison page, video.js seems to be a good standalone HTML5 video player.

Fun with the video tag

If you want to have some fun with the video tag, checkout popcorn.js from mozilla foundation, you might want use it in your next project or visit the mozilla popcorn maker page to have some fun with videos online.

Can i use it today?

HTML5 Video today: take a look at youtube's HTML5 test page, vimeo's HTML5 player announcement or dailymotion's HTML5 page.

To get an overview of which browsers support HTML5 video and what codec they will be able to read, check out the can i use video page.

Yes you can use the video tag today, but you will need to use a polyfill javascript library for older browsers or you do a mix of video tag, with inside of the video tag the object tag to load a flash video player for older IEs and inside of the object the embed tag to load the flash video player for older firefoxes. On mobile smartphones this tags mix is also useful because most browser support the new tags but don't support flash which could be used for desktop PC browsers as fallback.

Fallback

For browser that don't support the video tag you could fallback to a flash player and use the h.264 videos as source. For example, you could use modernizr to detect if the browser supports HTML5, if it does not you load the flash fallback video player.

Codecs

Lots of codecs exist, most browsers support two of them, fortunately we can regroup the browsers into two codecs groups:

safari, chrome and IE support h.264

chrome, opera and firefox support webm and ogv (Ogg Theora)

If you want to know why codecs are not part of the w3c standard anymore read about it on wikipedia and Ian Hickson's response on the whatwg mailinglist.

DRM (Digital rights management)

There is even a proposal for DRM in the works, something the industry wants to have, but lots of users and perhaps some browser vendors don't want.

<audio>

Same as video but for audio ;)


<audio id="example" controls="controls" preload="auto">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mpeg" />
    <object>
        <param name='movie'           value='player.swf'>
        <param name='allowfullscreen' value='true'>
        <param name='flashvars'       value='file=sound.mp3'>
        <embed src='player.swf'
                allowscriptaccess='always'
                allowfullscreen='true'
                flashvars="file=sound.mp3"
        />
    </object>
</audio>

Don't wonder if in other tutorials you find an attribute called "autobuffer" instead of "preload" used here. HTML5 replaced the autobuffer attribute (which had no default value), by preload which can have as values auto, metadata and none.

Read this interesting article, from the creators of cuttherope.IE about HTML5 audio, if you want to learn why they audio tag is not ideal to play lots of concurrent sounds and how they solved the problem. The library they used is soundmanager 2.

Real audio steaming is not possible (yet) using the audio tag, but there is a proposal from adobe.

the codecs questions again:

safari, chrome and IE support mp3

chrome, opera and firefox support ogg (Ogg Vorbis) audio files

Can i use it today?

Similar to what i said for video. If you want to play a track use it today. But if you want to ensure that every browser will play your sound you need to use a fallback player for example one that uses the flash plugin. You could use an opensource library like mediaelement.js. You could also do it yourself by reading an article like this one about implementing the audio tag with a flash player as fallback. If you want to add sounds to a game and play multiple sounds at the same time it's probably not what you want to use and streaming is also something the tag won't be able to handle today.

<track>

Tracks (subtitles) support for the video element. This will allow you to add sub-titles to your videos depending on what locale your user will use. You can use it to add captions to a video. You can use colors in your text, change the font and size of the captions and lots more.

WebSRT != webVTT

You may have heard that tracks support WebSRT, but this is not true anymore, WebSRT is webVTT's predecessor and doesn't exist anymore.

Readinglist

For more information about WebVTT I recommend you visit the website of the w3c's webVTT working group or the html5doctor article about WebVTT. HTML5Doctor also has a nice demo page you may want to check out.

Polyfill?

As for other tags, until every browser fully supports all HTML5 features, you may want to use a javascript polyfill library for webRTT like playr.js, playr.js code can be found on github.

Video introduction to WebVTT

On Youtube there is a good video explaining what WebVTT is.

Can i use it today?

Right now id say no, webVTT is under heavy development, unlike his predecessor webSRT no browser implements webVTT natively, as of today, but this may change in a near future. Even javascript polyfills like playr.js don't support it completely yet.


<video controls="controls" preload="auto" width="640" height="360" class="playr_video">
	<source src="bunny.webm" type="video/webm" />
	<source src="bunny.mp4" type="video/mp4" />
	<track src="bunny.vtt" kind="subtitles" srclang="en" label="English" />
	<p>Your browser does not support HTML5 video.</p>
</video>

<embed> / (<object>)

You probably already used embed in your applications before, but what's new about it, is that now it's a standard (it got deprecated in HTML 4 / xhtml 1, but still every browser continued to support it). In HTML4 the correct tag was object but it wasn't supported in early version of firefox. Embed got introduced by Netscape, and was supported in firefox. To ensure that their resource would get loaded by the plugin, developers used a code snippet where you had an embed inside of an object, browser that don't know the object tag would fallback to the embed tag. A lot of developers also used javascript code or libraries like the swfobject.js to ensure their resource that should be used by the plugin got embedded correctly.

Now in HTML5 you don't need to mix the object and embed tag in documents to include, for example flash, in a page anymore.

Embed and object are very similar, but not the same. Embed will embed a resource for a plugin into a web-page, object can do this too, in that case it's equivalent to embed, but it can do even more. For example use the object tag to include an image an it will be equivalent to img, use it as a nested browsing context, for example to include an html file and it will be equivalent to an iframe.

If you want to use the object tag, be aware, Firefox 9 / IE 9 won't accept flash files as plugin resource, but Opera 11 and Chrome 18 will. All Browser will load HTML files and images using the object tag. If you want to use embed to embed a flash resource all modern browsers support it (Chrome 18 / Firefox 9 / IE 9 / Opera 11).

To see all the differences between the two look at these w3c documents: <embed> w3c page and <object> w3c page.

Can i use it today?

To sum it up, at the beginning there was "object", supported by IE, then Netscape introduced "embed" and you had to mix both to play flash everywhere, but the drawback was that your code was not valid html4 / xhtml 1 because of the embed tag. Then Netscape disappeared and firefox started to grow it's use base, but firefox did not support the same object tag as IE, so the best practice became a mix of two object tags and the use of IE conditional tags, but no embed tag anymore which made the code html4 / xhtml1 valid. Now with HTML5 embed is back, so were are back at the first best practice where a mix of object and embed would be the best practice, object for older IE's, embed for older firefoxes and embed for modern browsers. Eventually you may still use the swfobject javascript for flash to ensure your files can pass the w3c validation, but you then have the problem that flash won't play if the user has deactivated javascript. As said before object can be used to embed not only plugin resources, but i see no advantage in using object compared to more semantic tags like for example the image tag.


<embed src="example.swf">

<object data="example.swf">
    <param name="quality" value="high">
</object>

<object data="example.html"></object>

<object data="example.jpg"></object>

<mark>

This tag is intended to be used if you want to indicate that the marked part of the document that has been highlighted may be relevant to the user's current activity, but may not be part of the original document. For example a user visits your site by clicking on a google search result, then you could use the mark tag to highlight the words in your blog article that were entered in google to do a query.

<progress>

HTML5 progress bar to display the progress of something. You may use the progress bar to display the upload progress of a file, the progress you made so far in a survey or registration process.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>progress tag</title>
    </head>
    <body onload="updateProgress();">
        <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
        <script>
            
            var progressBar = document.getElementById('p');
            
            function updateProgress() {
                
                var newValue = Math.random();
                newValue = newValue * 100;
                
                progressBar.value = newValue;
                progressBar.getElementsByTagName('span')[0].textContent = newValue;
                
                window.setTimeout('updateProgress();', 1000);
                
            }
            
        </script>
    </body>
</html>

<meter>

HTML5 meter that represents a measurement of something. Similar to progress but has more attributes. You might want to use the meter tag to show the quantity of space that's is still free in a directory, or to display any type of value that was measured somewhere / somehow in the past.

meter tag usage example:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>meter</title>
    </head>
	<body onload="updateMeter();">
		<meter value=0 min=0 max="100" low="20" high="80" optimum="50" title=seconds id=m></meter>
		<script>
			
			var meterDOM = document.getElementById('m');
			
			function updateMeter() {
				
				var newValue = Math.random();
				newValue = newValue * 100;
				
				meterDOM.value = newValue;
				
				window.setTimeout('updateMeter();', 1000);
				
			}
			
		</script>
	</body>
</html>

If the optimum is below min the meter color will be red, between min and max yellow and green above max. The colors will be in reverse order if the optimum is below min, so min will be green, middle will be yellow and max will be green. If the optimum is between min and max the color is green else if above or under min / max it will be yellow.Check out the definition of optimum on the w3c website for more use cases and another description.

If the meter belongs to a form, but is placed outside of the form tags, you can add the forms ID into the "form" attribute of meter, to define that meter belongs to that form, like this example:

meter outside of related form:


<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=UTF-8>
        <title>meter form attribute</title>

        <script>
            
            function updateMeter(myValue) {
                
                var meterDOM = document.getElementById('myMeter');
                
                console.log(myValue);

                meterDOM.value = parseInt(myValue);

            }
            
        </script>
    </head>
    <body>
        <meter value=0 form=myForm min=0 max=100 low=20 high=80 optimum=50 title=seconds id=myMeter>meter tag is not suppored</meter>
        <form id=myForm>
            <input type=range min=0 max=100 onChange=updateMeter(this.value)>
        </form>
    </body>
</html>