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

138 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.

  • Jason Grant says:

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

  • […] Via ← Los usuarios me avisan […]

  • 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.

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

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

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

  • […] Video elements – Tutorial sobre o elemento video do HTML 5. […]

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

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

  • 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

  • […] The Video Element – 介绍 HTML5 全新的视频元素。 […]

  • Have nice content about CSS3 i have use CSS3 it have great features Nice website design

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

  • 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 ?

  • […] The video element Have Your Say Click here to cancel reply. Your Name […]

  • 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.

  • […] I’ve been paying attention to the new <video> element in HTML5. In a nut, it attempts to make embedding a video in a web page just as easy markup-wise as […]

  • […] que he estado siguiendo de cerca el nuevo elemento <video> de HTML5. De forma resumida, intenta que el hecho de incustar vídeo en una página […]

  • […] I’ve been paying attention to the new <video> element in HTML5. In a nut, it attempts to make embedding a video in a web page just as easy markup-wise as […]

  • 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.

  • […] The Video Element – 介绍 HTML5 全新的视频元素。 […]

  • […] The Video Element – 介绍 HTML5 全新的视频元素。 […]

  • 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….

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

  • […] 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. […]

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

  • […] 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 […]

  • […] 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 […]

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

  • […] un tag <nav>… Pas de quoi grimper aux rideaux sur ce coup là. Par contre, les tags <video> et <audio> sont autrement plus intéressants. Avec ces tags on peut insérer des vidéos ou […]

  • […] Lien vers l’article original en anglais […]

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

  • […] tutorial (Mozilla Developer Center)HTML 5 canvas – the basics (Opera Developer Community)The video element (HTML5 Doctor)Introduction to HTML5 video (Opera Developer Community)Native audio in the browser […]

  • […] tutorial (Mozilla Developer Center)HTML 5 canvas – the basics (Opera Developer Community)The video element (HTML5 Doctor)Introduction to HTML5 video (Opera Developer Community)Native audio in the browser […]

  • […] tutorial (Mozilla Developer Center)HTML 5 canvas – the basics (Opera Developer Community)The video element (HTML5 Doctor)Introduction to HTML5 video (Opera Developer Community)Native audio in the browser […]

  • […] The video element (HTML5 Doctor) […]

  • […] fame agrees that yes, it sucks at the moment, but that’s the way it is. Tom Leadbetter, who wrote this piece on HTML5 video for HTML5 Doctor, says he can’t see if he’s missing anything, but did point me to a […]

  • […] The Video Element – 介绍 HTML5 全新的视频元素。 […]

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

  • […] The Video Element – 介绍 HTML5 全新的视频元素。 […]

  • This is a good read. Cheers!

  • […] 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. ;)

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

  • […] of XHTML, allowing web designers to more easily incorporate dynamic web 2.0 technologies such as video and sound into their […]

  • […] HTML5 may well offer a simpler means of delivering video, it isn’t going to solve the question of codecs anytime soon. One thing is clear, whatever […]

  • 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

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

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

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

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

  • dr memals says:

    the attribute is preload not autoload
    http://www.w3.org/TR/html5/video.html

  • 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.

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

  • […] 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: […]

  • […] 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: […]

  • […] 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: […]

  • […] 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!

  • 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.

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

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

  • […] 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: […]

  • […] Html5Doctor TweetArtículos Relacionados:La tecnología detrás de GroovesharkUtilizando y entendiendo […]

  • id meneo says:

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

  • 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.

  • 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!

  • 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?

  • 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.

  • […] 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

  • […] 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.

  • 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..

  • quadir says:

    Really nice article on Video HTML5, but when you are running in sequential order than you need to dispose it clearly.
    Here is the method to dispose it from the DOM effectively.
    http://www.attuts.com/aw-snap-solution-video-tag-dispose-method/

  • Leave a Reply to TemplateLand Blog » Blog Archive » 25 Essential HTML5 Tutorials and Techniques

    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.