HTML5 Video vs. HTML Video
<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 |
<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&image=__POSTER__.JPG&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.
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
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 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.