What do you need to know about HTML5 video

HTML5 keeps on stunning the Internet community with revolutionary web features. One of the key HTML5 enhancements is the advanced video support. With a new HTML5 standard, users don’t need any special plugins to stream video in web browsers both on PC or any portable device. Still in spite of the growing popularity of HTML5 standard, most web developers and designers are reluctant to migrate to the new markup language, maybe because of the absence of a complete HTML5 specification or lack of practical information on HTML5 сoding. In this post, I’d like to take a deeper look at HTML5 video element and explain its main points in plain English.

<video> tag vs. <object> tag

The <object> tag referrs to an embedded element within a web page: audio, video, Java applet, ActiveX, PDF, or Flash. The markup for this tag is fairly cryptic. Thus, if you wanted to embed a Flash video into a web page, you had to insert the following code:

<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=420 height=240
<param name="movie" value=player_flv_maxi.swf />
<param name="wmode" value="opaque" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=Wildlife.flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife.flv&margin=0&buffershowbg=0" />

To play this, users can’t do without a Flash player plugin which is ndispensable for all modern browsers except Google Chrome since the player is already pre-installed in the browser.

HTML5 introduces the new <video> tag which replaces the former <object> tag for Flash video embedment. The benefits of using HTML5 <video> tag are numerous. It brings not only minimalism and simplicity of video code, but also the ease of search bots to properly index your video file. Website developers can add a video to a page in the same way they would add an image, since the basic markup necessary for </video><video> in HTML5 is refreshingly simple and straightforward:

</video><video width="320" height="240" controls autoplay poster="video.jpg">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video>

Such code can be easily composed even by a not tech-savvy specialist. In the simplest way the code may be reduced to:<video src="movie.mp4" controls width="320" height="480"></video>

Video Attributes

As you can see, the <video> tag is used just like any other tags in HTML. Between opening and closing tags you can place various attributes to get the video player you want.

Several of the attributes are boolean (e.g. controls, loop, muted) – no value is required. So by including or omitting them, you set the value “true” or “false” respectively.

HTML5 specialists also recommend inserting the following line within video tag:
Video not playing? <a href="pics/video.mp4">Download the file instead.

Controls

The browsers supporting HTML5 video have the video players already built-in. All of them include a standard set of controls: Play, Pause, Seek, Volume. However, each browser provides its own look for the video player: from the minimal approach of Chrome and IE to the more elaborate controls of Firefox, Opera and Safari.

If you want to keep controls the same across all browsers, or integrate the player with our website design, you can create our own controls from scratch. Here are some useful resources:

  • VideoJS is an HTML5 video player built with Javascript and CSS;
  • Sublime Video is a sleek cloud-based HTML5 video player with advanced feature set, a paidware;
  • Projekktor is an open source HTML5 video player built with pure JavaScript; it also uses Flash when there is no native H.264 support;
  • Tutorial “How to build a custom HTML5 video player with jQuery and CSS3” from Opera developers.
  • Video source

    The <video> tag allows multiple <source> elements which can link to one and the same video in different formats, for example:

           <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
           <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
           <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>

    As you see, the source tag has two attributes, src and type. The “type” attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. By default, the browser will use the first recognized format. All modern browsers support at least one HTML5 video format.

    Browser Support

    For up to date information on browser support, you can check out the YouTube HTML5 Page

    Codecs

    There’s a long debate on which video formats/codecs to pursue and consensus hasn’t been reached yet. As a result, in the draft of HTML5 specification any references to a particular codec were removed. Instead, the following creteria to the video codec were put forward:

  • it should have good compression, good image quality, and low decode processor use;
  • be royalty-free;
  • feature hardware video decoder
  • Three codecs were suggested for HTML5 video element: H.264, OGG Theora, and WebM VP8. Here are their advantages and disadvantages.

    H.264

    Pros
    It gives good quality video and small file sizes. It outputs excellent video both for low-bandwidth, low-CPU mobile devices and high-bandwidth, high-CPU modern PCs and everything in between. It’s free for Internet end-users.

    Cons
    The underlying compression mechanisms in H.264 are patented and adopters have to pay royalties for commercial use to a licensing consortium called MPEG-LA.

    OGG Theora

    Pros
    It’s a royalty-free codec and is not encumbered by any known patents other than the original VP3 patents, which have been licensed royalty-free.

    Cons
    Theora generates high quality videos with comparatively larger file sizes. Plus it is a lot harder to find tools to convert to OGG Theora.

    WebM VP8

    Pros
    In 2010, Google acquired On2 – the company behind VP8, and published the video codec specification as open source, and all the patents as royalty-free.

    Cons

    While Google claims that WebM has the highest video quality of all the web codecs, most independent sources find that either H.264 is slightly better or there is very little difference between the two. The problem is that it can be very difficult to find tools to encode video to WebM.

    Until a complete consensus on video codecs issue is reached, web developers have to convert video to all these three formats. There’s some helpful software which deal with HTML5 video preparing:

  • Free Video Converter 3.0 by Freemake.com is a Windows software that encodes both desktop and online video to H.264, WebM and Theora OGG, the resulted videos go together with a sample of HTML5 video embedding;
  • alternatively, you can receive HTML5 source files as a result of video conversion with the help of the video tools listed here.
  • Some webmasters also combine HTML5 <video&ht; element with Flash-based code, so that a video could be played in any browser, including old IE versions.

    No doubt, HTML5 video still has a lot of benefits if compared to Flash. However, it’s still debatable whether H.264, WebM and Theora OGG will remain the default video formats supported in the video element. And since the specification of HTML5 video formats depends a lot on the decisions of Apple, Microsoft and Google corporations, the future of the whole new standard seems vague but still promising.

    Free book: Jump Start HTML5 Basics

    Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

    • http://www.bootleweb.com cmb

      Thanks for this useful and clear summary. Shame about a couple of English errors, how about getting it proof-read first? I’m thinking of “Until a complete consensus on video codecs issue isn’t reached” – opposite meaning; should have been “is”… oh well. Sitepoint articles used to be perfect, as the co, as grown they seem to be letting more things slip through.

      • JRitz

        I rarely read Sitepoint articles any more because of the severe lack of editorial oversight. Also, when I try to point out issues they usually just delete my comment, which further lowers my opinion of them.

        I read this article because I thought it would have an in-depth look at the current state of the multi-format issue. I guess “no news” is technically “news” but otherwise this is another space filler of an article. I REALLY want to see Sitepoint grow into a mature forum for web development news, but it seems to be going in the opposite direction, as you mentioned.

    • Kise S.

      to be honest i dont feel like recoding all my web video library to 2-3 formats, so we encode in h264 and use flash as fallback for browsers that doesn’t support H264

    • LogicEarth

      The current problem I have with HTML5 video, with at least the latest version of Firefox, is performance. Now I have only been facing this issue with Youtube but when ever a video is playing using HTML 5 I cannot watch it full screen even the low resolution 320p stuff. It is so slow dropping frames left and right. But watching same video with higher resolution using Flash it plays perfectly fine with full screen.

      So at the moment, HTML5 video is down right awful on my computer. I’m sure many others with the same level of hardware will have the same issue.

      • Elena

        the standard HTML5 player doesn’t have fullscreen parameter. the workaround is to use custom HTML5 players like VideoJS or Sublime Video

        • LogicEarth

          Right…but whether HTML5 video has true full screen support is irreverent to my point. The performance is just not there to make it worth while over Silverlight or Flash video players. At least, concerning Firefox on my computer.

    • Bob

      Tried it. It didn’t work in IE. It has to work, and work well, on every browser for it to be of use to me. Don’t waste my time with this useless garbage unless it really, really works all the time, everywhere. My clients and I do not have time to wait until the browser become complaint, or the technology works correctly with HTML 5. I shouldn’t have to use JavaScript or hacks to get it to work on all browsers. I hate when this new stuff comes out that is suppose to help and it simply doesn’t work.

    • http://www.savthecoder.com/blog SavTheCoder

      I love the simplicity of HTML5 video, with the exception of codecs (always confused me) and the way IE9 supports it (you need to add an extra meta tag). But other than that, it’s good work so far. Great article!

    • Velmurugan

      How to embed youtube and flv video files using html5 tag? is it possible?
      Currently i am using

    • Velmurugan

      Currently i am using iframe tag to embed youtube videos.
      How to embed youtube and swf video files using html5 video tag? is it possible?

      • Elena

        HTML5 video tags allows only video in h.264, ogg or webm formats. you may add swf just as fallback.

    • frypans

      The best combination I’ve found is to use Flash as the primary player, with HTML5 as the fallback. I cannot understand why anyone would use HTML first and Flash as the fallback, when Flash is far superior in features, performance and cross-browser compatibility – plus it evolves faster than HTML as Adobe add new things such as stage video/3d and better performance.

      The new Flash plugin, 11.3 I think is the version, Adobe re-built the video pipeline, increasing playback efficiency across platforms, including Mac. I know that Mac users complain of high CPU use when using Flash, but this is an outdated complaint, and what they don’t realize is that when you compare Flash in general to technology such as Canvas, CPU utilization is about the same. Check Mike Chambers article for more details on the myths around high CPU use in Flash on Mac. Google “Top Flash Misperceptions”.

      I like HTML5 technology, I’m an HTML/JS developer as my full time job. I know well the strengths of HTML5. Video is currently not one of them, and I’m sorry to say, won’t be any time soon (compared to Flash). Sure, it *sounds* attractive – just whack your video tag in and away you go, but we’re discovering it’s not quite that simple aren’t we.

      For serious video deployment, content managed flexibility, streaming options, security, full screen hardware acceleration, HTML5 is left behind by the more powerful capabilities of Flash.

      I don’t buy into the politics of “Flash is bad because Steve said so”… that’s a bad position to take. Developers shouldn’t be taking emotional sides because Apple doesn’t like Flash. Developers should be using what technology is available to get the content to the most people in the most efficient way, and keep their website visitors happy.

      Modern HTML/CSS and JS is certainly replacing a lot of things Flash used to be the only choice for (animated data viz, interactive objects etc), but for the really interesting stuff, the cutting edge, and good quality HD video handling, then Flash is pretty good. Keep in mind that a “plugin” is not necessarily a bad thing if it delivers what would otherwise be impossible or impractical to do.

    • jhansi

      hello friends,
      when i am using video tag it will not support the mp4 format videos, so i am playing my video with anchor tag and iframe tag but in these tags how to keep the video in paused state after loading into the webpage?