HTML5 Video vs. HTML Video

Share this article

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&
  playeralpha=100&title=movie1.flv&margin=0&buffershowbg=0" />

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"





    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" />

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




 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


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" />



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

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

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

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?

Frequently Asked Questions (FAQs) about HTML5 Video vs HTML Video

What is the main difference between HTML5 video and HTML video?

HTML5 video is an improvement over the previous HTML video. The HTML5 video tag was introduced to make embedding videos in a webpage easier, eliminating the need for third-party plugins like Flash. On the other hand, HTML video required the use of these plugins to play videos. HTML5 video also supports multiple video formats, making it more versatile and user-friendly.

Why should I use HTML5 video instead of HTML video?

HTML5 video has several advantages over HTML video. It doesn’t require any third-party plugins to play videos, which improves the loading speed and performance of your webpage. It also supports multiple video formats, providing more flexibility in terms of the type of content you can embed in your webpage. Moreover, HTML5 video is compatible with all modern browsers, ensuring that your videos can be viewed by a wider audience.

How can I embed a video using HTML5?

Embedding a video using HTML5 is straightforward. You simply use the

Can I control the size of the video player in HTML5?

Yes, you can control the size of the video player in HTML5 by using the “width” and “height” attributes in the

What video formats are supported by HTML5?

HTML5 supports several video formats, including MP4, WebM, and Ogg. This means you can embed a wide variety of video content in your webpage using the HTML5 video tag.

Is HTML5 video compatible with all browsers?

HTML5 video is compatible with all modern browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, it’s important to note that not all video formats are supported by all browsers. For example, Internet Explorer doesn’t support the WebM format.

Can I add subtitles or captions to my HTML5 video?

Yes, you can add subtitles or captions to your HTML5 video by using the tag. This tag allows you to specify a text track for your video, which can be used for subtitles, captions, descriptions, or chapters.

Can I autoplay my HTML5 video?

Yes, you can autoplay your HTML5 video by adding the “autoplay” attribute to the

Can I loop my HTML5 video?

Yes, you can loop your HTML5 video by adding the “loop” attribute to the

Can I control the volume of my HTML5 video?

Yes, you can control the volume of your HTML5 video by using the “volume” property in JavaScript. This property allows you to set the volume of the video between 0.0 (silent) and 1.0 (maximum volume).

Victoria KushnerVictoria Kushner
View Author

Victoria Kushner is a blogger and PR manager at Freemake, developer of the Free HTML5 Video Converter. She writes about modern multimedia software and promotes it on social networks.

HTML5 Dev Centervideo
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week