Microsoft Tech

HTML5 Video vs. HTML Video

Victoria Kushner
Share

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?