The video element

by .

Edited May 2014 to change deprecated autobuffer attribute to preload, warn against using autoplay and update browser support.

The <video> element is new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

It works in all modern browsers (IE9 and above).

The ‘old’ way

Ugh, look at this horrid code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Yuck. And as you know, you need Flash for this. Or it is often delivered via JavaScript as well so it is not perfect.

The HTML 5 way

Nice, clean, minimal code:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls preload>
<p> Try this page in a modern browser! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
  </video>

Autoplay

The video tag has an attribute that allows the video to play when the page loads.

<video src="abc.mov" autoplay>
</video>

But autoplay is bad ok? Youtube and the like autoplay their videos. But before you push the launch button for your HTML 5 site, strongly consider whether it should autoplay a video; it’s especially annoying for those without headphones, and those using screenreaders. Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download.

Download

If the browser doesn’t know what to do with video tag, or if there is a display error, you should offer a download to the video instead, inside the video element.

preload

The preload attribute is used when autoplay is not used. It is a hint to the browser whether to download some, all or none of the video before a user decides to play the video.

It takes one of three values:

  • preload="none" tells the browser not to download any of the video. This saves bandwidth.
  • preload="metadata" tells the browser to download metadata, such as length of the video or its format.
  • preload="auto" tells the browser to do as it sees fit. This may change depending on whether a device is on wifi, 3G, data roaming etc. If you just use preload on its own, this defaults to preload="auto"

In all cases, the browser takes this attribute as a hint, not a command. If both autoplay and preload are used, then preload is ignored.

Poster

Use the poster attribute to display a frame of the video (as a .jpg, .png, whatever), in case the video doesn’t load for some reason. It can be a local image or elsewhere on the web

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

You should use the poster attribute because you don’t want the user to see nothing.

Controls

Adding this attribute means you can use your own play/pause/etc buttons for your video.

Subtitles

Subtitling is provided with the <track> element and a webVTT file.

Current issues

Codecs

I won’t claim to be a video/audio codec expert but there are a few outstanding issues in this area, which this article does a good job explaining.

UPDATE: See Video: the track element and webM codec for more information about codecs.

Further reading

137 Responses on the article “The video element”

Rich says

http://camendesign.com/code/video_for_everybody

Has a good treatment of this tag- a recommended read. Not sure if tags work here, so won’t paste the code, but he uses an mp4 and ogg video with a flash fallback, which works on every browser including IE6 and the iPhone.

    Rich Clark says

    That is a great write up from @Kroc yeah we’ve all been paying close attention to the work he’s been doing and look forward to reading more.

Jason Grant says

is probably the most promising ‘feature’ of the HTML5 spec. I’m excited about this one.

Brian Lang says

I’m reading your site in Google Reader via RSS.
Articles such as this where you use a tag in the title of the document simply show up in Google Reader as The element. The tag itself gets rendered. Perhaps you could encode the titles using the Html entities lt and gt?

    Rich Clark says

    Hi Brian

    Thanks for bringing this up, it’s something we’ve spotted and aim to fix. The titles were encoded that way but don’t seem to be escaping properly, it’s something I’m going to look into this weekend.

    Cheers

    Rich

MySchizoBuddy says

It works in Google Chrome 3 (its a development version at the time of this writing)

zcorpan says

The last snippet is not valid HTML5 because param is a void element and thus the end tag is not allowed. You can use /> syntax in HTML5 though.

Hikari says

hehe the XHTML object code was nice :P

I believe that the biggests advantage for the video element is to be able to easily (for the webmaster, for the browser developer and for the visiting user) embed video on sites.

What I mean is that today we can just upload a png or even a gif image to our site, or to imageshark if we don’t wanna pay for the bandwidth, and use a simple img element to show it. With videos, otherwise, there is no easy way to upload a mkv, avi or even mp4 to our site and easily show it inside HTML. I won’t even talk about free video hosting services that would let we offer a direct link to it, without forcing user to visit their site and wait 60 seconds for the download…

That forces us to use youtube services to host and deliver an embedded player for it. We are forced to use this horrible, worse than that bad old .rm, FLV format.

The only other options are to host the file ourselves and give a simple anchor link for downloading it. But youtube proved that this approach is not as good as browser embedded player… unfortunately we need a way to lock visitors on our site until they are done downloading and watching the video (yes, I HATE this idea, but that’s the way to get popularity), so that they leave comments about it.

What I wanted to do is leave an embedded video player together with a direct link to it, and have it on a free host elsewhere :P

Lisa says

Thanks, i am struggling to get this working under IE & FF, however Safari is picking up the code fine, are the extra scripts i need running to make it compatible for other browsers ?

Alex says

“So far, the video tag needs to link to a physical file (see example at the top). What we need here is a way to just import, say a YouTube video, using the video tag, like we did with the embed tag.

Uhh, you do realize http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&amp; is a physical file? It’s just not the file that has the actual video in it, so it would make no sense for the video element to support it.
should work (although it didn’t work for me), since it points to the actual MP4 file on YouTube.

JuggieBuggie says

Physical file

So far, the video tag needs to link to a physical file (see example at the top). What we need here is a way to just import, say a YouTube video, using the video tag, like we did with the embed tag.

You never ever did that with embed. You started a plugin that imported a Flash file that would cause the video file to download and play.

The problem is not caused by html5, it’s caused by youtube, which is hiding its video files behind a temporal session id. If Youtube would drop that and instead expose stable URLs for the video files the problem would be solved. But it will not do that, because Youtube wants the branding of the surrounding flash based player, because Youtube is not for fun – it’s for making money. So if you would like to present video without having to complie to Youtubes money making goals: don’t use Youtube.

david cow says

%d

iw says

It’s amazing. Everybody is talking about marvelous video tag… Guys calm down. Don’t you see that the object tag has already all the power you need. Nobody needs another tag! It would be better if borwsers implemented fully the object tag functionality and… voila with a single object you could embed audio/video/whatever – read the W3C html/xhtml standard it’s all there – but no browser fully implements it….

[...] The video element he video element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it. [...]

Så utvecklar du för iPad | lillbra.se says

[...] Så om du använder dig av Flash så kommer det inte att visas. Använd istället html5-element som <video> eller <audio> för bild och ljuduppspelning, eller javascript och css-animationer för [...]

Tune in to YouTube with jQuery « Ackernaut says

[...] for markup, I look forward when the support of the HTML5 <video> element is standard and we are no longer embedding Flash videos. As for the plugin, I look forward to the [...]

Let’s HTML5 | Peter Mikhael says

[...] Video elements – A useful article from HTML 5 Doctor on the Video element [...]

Angelo Beltran says

This is a good read. Cheers!

Mon player vidéos | Stvn Brgs says

[...] pages sur le futur de la video : HTML5 Doctor | Dive Into Html5 | HTML5 Rocks … [...]

Si ++ says

The “yuck” object code you posted is unnecessarily bloated, that should be obvious to you unless of course you’re not Flash developer, in which case you really shouldn’t be comparing Flash and HTML5. Also, making a point that the use of JavaScript “isn’t perfect” is laughable, how many HTML websites DON’T use JavaScript in one way or another these days?


video(“path/to/video”)

<!– without javascript, with css – note: no tag is needed –>

The audio and video elements are a nice addition to HTML though :-)

Si ++ says

Nice… you’re blog removed my code examples. Anyway, most non-noob developers will know what I’m talking about. ;)

Jeremy says

Any idea if/how HTML5 is going to include streaming video or adaptive bit rate technologies?

Bruce Lawson says

You can already stream Ogg and webM format video. I’ve no idea about h264/ mp4 video

Ravindra Tiwari says

This was great help for the videos of mp4 format but, hope we will be able to roolback the videos which are from 2008.

Html5 Solution says

[...] The Video Element – An introduction to the new video element in HTML 5. [...]

Bruce Lawson says

Yup, we wrote the article when autobuffer was the name of the attribute. It got renamed, as everyone typed “autobugger” by mistake, which is a physical impossibility.

We’ll correct it. Thanks for spotting it.

30+ Must Try HTML 5 Tutorials and Techniques | Webwibe says

[...] The Video Element The video element is brand new in HTML 5 and allows you to play a movie within your website! The data of this element is supposed to be video but it might also have audio or images associated with it: [...]

Kasper Rasmussen says

This is a very cool feature of HTML5, I think it’s one the best features. The web is going to a lot easier to build on, with these cool things – HTML5 ROCKS!

Ashley Sheridan says

Si++, I think you’re missing the point. That example object code is what is produced by Flash by default. I’ve known plenty of Flash developers who leave that alone most of the time, ergo it’s rubbish code which is still prevelant.

Also, you say most sites use Javascript. While that is true, it’s only half the picture. Search engines don’t (in the main) see Javascript generated content, and even the website preview you see in Google (which does render Javascript content) is a seperate process from their actual spiders. Also, subtitles are intended as an alternative to the main content (be it video or audio) The main reason for people needing those subtitles is due to some form of disability which prevents them from enjoying the original content. How many speech or Braille browsers do you know of that handle Javascript?

It’s a good idea to have a standard way of implementing things like subtitles in media, as it meets the WAI guidelines and benefits your site in terms of SEO. Seems a bit like a no-brainer to me, something that any “non-noob” should know.

id meneo says

Thanks for this explanation, but i cannot manage to make the video tag work…
I’ll take the object one instead.

Ashley Sheridan says

id meneo, if you’re having problems getting the video tag to work, it’s most likely some sort of codec issue I would guess.

First, make sure you’re using a browser that supports it, something like Firefox 3.5+, Safari, Chrome, Opera, Konqueror or IE9+.

I find it good to use a video tag with several nested source tags for the two formats you’ll need, followed by a line of text in the video tags. If you see the text, your browser doesn’t support the tag.

If you just see a grey box where the player should be, it’s likely that the video format is wrong. Certain browsers can only play certain formats. For best results, encode the video once to H264 (.mpg), and again to OGG Vorbis (.ogv). Modern browsers will be able to play one of these, and a Flash player as a fallback can play the H264 clip for older browsers.

Bruce Lawson says

Ashley,
I’d recommend encoding to webM rather than Ogg Vorbis. Opera, Firefox and Chrome understand both formats, but webM is optimised for Web and has better compression/ fidelity. Manufacturers are also working on hardware decoders for webM; they aren’t for Ogg.

Ashley Sheridan says

Ogg Vorbis is supported by Firefox 3.5+, whilst WebM is only supported by Fx4. As my response was just made in order to help id meneo solve his/her issue with getting the video tag to work, introducing extra codecs on grounds of superior quality would have only confused the matter. Certainly, the best method is to use all 3 formats (H264, Ogg & WebM) but if you run into a problem at such an early stage, just getting a basic example working is surely more worthwhile?

id meneo says

Thx Ashley for your advice.
I never thought to use Vorbis!?

I’ve tried mp4 and flv on this video html5 test page.
It doesn’t work with FF4… I don’t know what I’m doing wrong…

id meneo says

OMG the mp4 is working with Chrome!
Quick, nice and no javascript, I love it!

Ashley Sheridan says

Fx doesn’t support H264 at all, and no browser supports Flash Video in a video tag. Go with the H264 for Safari & IE and OGG for the rest. That way, you’re covered. You can add WebM later if you wish, but it’s not absolutely necessary, it’s more of a quality/bandwidth saver for some browser visitors.

id meneo says

Ok, I got it know. Should I put brower conditions in my html? <!–[IF etc?

Ashley Sheridan says

No, conditional comments are only recognised by IE anyway.

What you should do is use a video tag with several source tags inside it and no src attribute on the video tag. That way, you’re offering the different formats of the video you encoded and browsers are able to pick the one they know about.

LONO Creative – HTML5 says

[...] THE VIDEO ELEMENT IN HTML5 A great introduction to the new video support offered by HTML5. [...]

Yotam Ofek says

Correct me if I’m wrong, but I think that a little parsing of the Youtube page will lead you to the actual movie file’s URL.

Yotam

Video en HTML5 says

[...] Html5Doctor google_ad_client = "ca-pub-4287467260533781";/* Final Articulos */google_ad_slot = [...]

Rankability says

html 5 is a breath of fresh air. Usefull info here – our developers have started to adopt some of these principles mentioned here for embedding videos.

Daniel says

I think the “controller” attribute you’re using is supposed to be “controls” for it to actually work (you’re setting it to false, so it doesn’t matter in that case. “controls” is false by default AFAICT, :D )

Trolleur says

just rename object to video html 5 fags

Prabhakar says

The video tag is explained in a brief manner.

Thanks for the article.

Albert Wiersch says

The example still shows the “autobuffer” attribute. Shouldn’t this be “preload”?

Coen Diepenbroek says

Would using multiple video tags in the same document WITHOUT the preload attribute still stretch the client’s bandwith?

Also, is it possible just to use the width attribute and let the browser figure out the height?

bruce says

Coen

it could do, but preload only hints to a browser. So a browser could notice that it’s on a slow network and not preload anything, regardless of what the author specifies.

” is it possible just to use the width attribute and let the browser figure out the height” – what did your testing indicate?

GG says

iw,

Try this:

1. Disable Adobe Flash
2. Use the object tag
3. Scratch your head and say “Where’s that video gone?”

Or try this:

1. Use an Android device – without Flash – and navigate to the website
2. Scratch your head and say “Where’s that video gone?”

Lastly try this:
1. Convert the SWF to a MP4
2. Use the <video> tag
3. Say “That’s where the video went!”

iw says

GG,

With all do respect object tag has nothing to do with Flash… You can include ANY type of content assuming that the browser supports it.

Jacques says

Great Article Tom.

How would you Markup HTML5 Videos with Microdata (Schema.org ) ??

Thanks for your time,

Cheers..

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.