HTML5 Video vs. HTML Video

Victoria Kushner

Nowadays, designers and developers have several options for integrating video into a web page. You can design your own video player, use free widgets, embed YouTube video code or buy a fancy flash pop-up player.

There are many forms, shapes and layouts for online video players – all designed to enhance your web presence. But no matter which player you use, the key purpose is to provide quick access to your video content for all your visitors.

That means each user should be able to play video without receiving an unfriendly “Install Flash plug-in to watch this video” message. Alerts like that impair the user experience and raise a website’s bounce rate.

Contemplating this, you might tend towards HTML5 video technology. After all, HTML5 promises to play video directly in the browser without any plug-ins. At first sight, it looks like the ultimate video solution. But before you switch your website video to HTML5, let’s compare the pros and cons of classic HTML video and innovative HTML5 video integration.

Flash is HTML video middleware. It’s now the most traditional way to embed video into a website. The <object> tag and Flash plug-ins help to play video in the browser.

Here’s some typical HTML video embed code:

<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=512 height=384>

<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=movie1.flv&width=512&height=384&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=movie1.flv&margin=0&buffershowbg=0" />

</object>

As with all middleware, Adobe Flash plug-ins lag behind and do require constant updates.

HTML5 does not need any plug-ins or updates. With the new <video> tag you’re able to insert video in a page like this:

<video width="320"

    height="240"

    poster="intro.jpg"

    autoplay
 
    controls

    loop>

    This content appears if the video tag or the codec is not supported.

    <source src="intro.mp4" type="video/mp4" />

    <source src="intro.webm" type="video/webm" />

    <source src="intro.ogv" type="video/ogg" />

    </video>

As you see, when using HTML5, videos should be offered in three main formats: H.264 (.mp4), WebM and Theora OGG. Covering all three formats gives you the best chance of correct playback on all devices.

However, HTML5 does not guarantee playback in all browsers. Internet Explorer 6, 7 and 8 cannot play HTML5 video. This becomes relevant when you know you have site visitors who use such browsers.Therefore, you should thoroughly examine your site traffic statistics to count the percentage of users of Internet Explorer versions prior to HTML5 video migration. Google Analytics is a great tool for this.

It may turn out that 60% of your audience sticks to old-fashioned browsers and thus HTML5 may not be a good video remedy for your website. Alternatively, if the majority of your visitors are mobile web consumers, HTML5 video is worth embedding in your site.

The table below summarizes the most frequent HTML/HTML5 advantages and disadvantages to take into account:

HTML Video vs. HTML5 Video

Markup

Pros

Cons

 HTML Video

Well-known, time-proven markup language Flash plug-in is a must
Supported by all desktop browsers: Internet Explorer, Firefox, Chrome, Opera, Safari Constant plug-in updates
Many video hosting options: own server, YouTube, Vimeo, etc Slow, high-load videos
Lots of video embedding methods: from advanced coding to simple YouTube copy-paste code No video playback on mobiles like iPad and iPhone

HTML5

No plug-ins needed Not supported by Internet Explorer 6, 7, 8
Works on both desktop and mobile devices Requires video conversion
Flexible player settings: users can move and rotate web players No stable specification. You have to study new markup principles

 
At first glance, HTML5 video seems to have more drawbacks than assets. But if you delve into HTML5 video further, you will see that the emerging web technology is not so obscure. It already has a solid toolbox for developers to benefit from.

It’s true that HTML5 video is not supported by Internet Explorer 6,7 or 8. So, for those users, provide a fallback direct link to YouTube or a download so site visitors can watch the standard Flash video:

<video width="640" height="360" controls>

    <source src="__VIDEO__.MP4"  type="video/mp4" />

    <source src="__VIDEO__.OGV"  type="video/ogg" />

    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">

        <param name="movie" value="__FLASH__.SWF" />

        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />

        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback 
            capabilities, please download the video below" />

    </object>

</video>

<p>     <strong>Download Video:</strong>

              Closed Format:         <a href="__VIDEO__.MP4">"MP4"</a>

              Open Format:            <a href="__VIDEO__.OGV">"Ogg"</a>

</p>

Converting HTML5 into the three formats (H.264, OGG and WebM) is not as scary as it might sound. There are several free solutions:

  • HandBrake Video Converter for Mac. Free, this famous video conversion software can deal with HTML5 video conversion
  • Freemake Video Converter 3.0 for Windows. It’s 100% free video converting tool. Select a video, click “HTML5” button and you get video files in all three formats and video player code for embedding. Video Converter by Freemake does all work for you (disclosure: I work for Freemake).
  • Zamzar. Free online video converter. Zamzar encoding is bit slow. Besides, you will get files by email.

So, even the cons do not mean you cannot use HTML5 today.

On the contrary, the HTML cons are actually harder to avoid. The vulnerable Adobe Flash plug-in, inappropriate for handheld gadgets, is a stumbling block for streaming video integration. the most popular mobile hardware does not support Flash video. Recently, Adobe has even canceled further Flash plugin development and turned to the HTML5 / CSS3 eco-system with their Adobe Edge design tool.

Obviously, HTML5 is well on its way to fame and fortune, but it’s too early to declare a complete HTML5 victory over Flash video, as Flash still dominates on streaming web services. At least we should be well equipped to transfer smoothly from one markup to another without traffic losses.

What methods are you using to implement video on a webpage?

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.tyssendesign.com.au John Faulds

    I’ve used http://videojs.com/ which serves HTML5 video for those browsers that can handle it and falls back to Flash video for those that can’t.

  • http://www.wvdrs.org/ Jeff Seager

    Thanks for a timely examination of the difficult choices we face in trying to make video accessible to the greatest number of users. We recently looked at this and essentially opted out for the time being, choosing to create a YouTube channel and embed our uploaded videos. Vimeo and others offer good solutions, too, sometimes with a cost attached although those costs seem fair enough (as you also have more control, and no ads unless you want them).

    Ours is a decent solution for now, as much as I dislike waiting for Microsoft to catch up with everyone else (again). I look forward to an eventual transition to the HTML5 method, though.

  • Peter Andres

    Ya – 2 for http://videojs.com/ we have used that as well. Seems to be a great solution. Hopefully as time goes on the options will get better.

  • Kise S.

    While i like the HTML5 new video tag, i wont be using it unless they start supporting the same codec cross all browsers or at least the PC ones, converting each video to 3 different codecs is time consuming and makes kinda large storage, All browsers makers including the Mobile ones should consider at least supporting one common codec beside the other ones and it should be open source like WebM, or ogg

  • http://yellowshoe.com.au/ Mark

    Seems a little odd not to include a link to the grand daddy of video fallbacks.
    http://camendesign.com/code/video_for_everybody

  • Ralph

    HTML5 video with http://mediaelementjs.com/ it is… fallback solutions to Flash and Silverlight when needed.

  • http://twitter.com/rwaldron Rick Waldron

    Great article! For those interested in programming interactivity into their HTML5 Videos, there is Popcorn.js http://popcornjs.org . Also, Miro http://www.getmiro.com/ is great for converting videos into different formats and http://www.clipconverter.cc/ for liberating video from Youtube.

  • Tim

    For Videoconverters on Linux: Arista is great! Together with the nautilus extension, you can even convert Video with two clicks from within your nautilus.

    Seriously, if you pointing out Win and Mac Software for a task, you also have to point out Linux software. You have some readers, that do not use proprietary Operating Systems to build the free web… ;)

  • http://soluml.com Benjamin Solum

    I’m surprised more people don’t use Youtube to embed video’s. Once you’ve uploaded your video to Youtube, you simply add the Youtube Iframe of your video and you’re set. If the user’s browser supports HTML5 that’s the version they’ll get. If not, it’ll default to Flash. Along with browser compatibility, you get free storage, CDN-esque delivery, and your video’s are indexed and searched on by the #1 video site in the world.

    If all you’re looking to do is show a video to your users I haven’t found anything easier than Youtube.