HTML5 and Video Players: A Comparative Analysis

Wednesday Dec 7th 2011 by Tapas Pal
Share:

A comparative analysis of - HTML5 native player, VideoJS and Flash on performance, features, advantages and disadvantages for the developer.

The new HTML5 standard includes many new features for more dynamic web applications and interface development. One such component being specified and implemented is the <video> element. Using HTML5, your videos can be played back on the latest mobile devices and even on older browsers that require Flash.

HTML5 allows web developers to add a video tag in much the same way they would add an image in a web page. For this to work, web browser developers like – Mozilla, Webkit, Opera, etc have to incorporate video functionality into their browsers.

The W3 Consortium (W3C) has provided certain norms and directions on how video should work in browsers. Browser developer should follow those norms, so that the video works consistently across all browsers. But thanks to the technology, such synchronization between a specification and action often do not meet owing to legal, financial choices made by the browser developers.

HTML5 brings a whole new dimension to web world by being able to embed video on web-pages without using any special software. The main objective is that, developers will only need to use one method for embedding a video that is based upon non-monopolistic agenda of open standards.

Now, let’s get down to some bare-bones of these popular players of the web.

Adobe Flash

Flash has a strong base of developers and users. The latest version of the Adobe Flash Player runs on Windows, Mac OS, Linux, Androids, QNX, RIM, and Google TV. Earlier versions - Flash 9 runs on PlayStation 3 and Flash 6 runs on PSP, Adobe Flash Lite runs on Symbian, Maemo Linux, Windows Mobile, and Chumby. Flash does not support Apple iOS including includes iPad, iPhone, iPod Touch and 2nd-gen Apple TV. Since Flash is a closed system, Apple states that it has no plans to allow Flash to run on the iOS platform for the near future.

There is a lack of standard method of embedding Flash. IE uses <object> tag, while Chrome, Opera, Firefox, Safari uses <embed > tag. Thus, this two method of embedding Flash creates lots of confusion and suffers from cross browsers compatibility issues. Now if you plan to include SWF file in the browser for Chrome, Opera, Firefox, Safari, the simplest code will be a follows:

<embed src="whitebird1.swf" width="300" height="300" />

For Internet Explorer the code will be:
<object width='300' height='300'>
   <param name='movie' value='whitebird1.swf'>
</object>
<object> and <embed> tags can be nested to ensure that the video runs in all browsers in the following way:
<object>
   <param name='movie' value='whitebird1.swf'>   
   <embed src='whitebird1.swf' width='300' height='300' />
</object>

In much the same way you can embed other video files format like flv, webm and mp4. This is to give the simplest idea of using Flash Player.

HTML5 Player

HTML5 is perhaps the most open project undertaken by W3C, began in 2003 and, as of January 2011, the standard was in working draft state. It is still in its development stage hence not neatly packaged and contains bugs. Though it is not the only solution for embedding video in the web page yet it has some distinct advantage and a bright future. Currently, not all browsers support its features but the most prominent among them are trying hard to keep up with it in their newest releases. This would bring uniformity in the world of browsers in embedding video. You do not have to install third party proprietary plug-ins for video players like Flash. Embedding video will be just as simple as embedding images in the HTML.

<video poster="robotics.webm" controls="true">        
<source src='robotics.mp4' type='video/mp4; codecs="avc1.4D401E,mp4a.40.2"'/>
        <p>Your browser does not support HTML5</p>
</video>

To include video which deals with all the browsers including HTML5, apply following code:

<video width="560" height="340" controls>
<source src="robotics.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <object>
           <param name='movie' value='robotics.swf'>   
           <embed src='robotics.swf' width='300' height='300' />
    </object>    
    <p>video cannot be played in your browser</p>
</video>
 
The thing to worry about with HTML5 players is the codec support. Users generally view a video as .mp4 and .webm files, but it is not that simple as these file formats are nothing but containers containing audio and video tracks which are interpreted by the players which must understand the codec and send information to the screen and speakers. Not all players decode in same way, this leads to varied user experience in viewing the same video.

In HTML5, the inclusion of two codecs H.264 and Theora, are the most debatable proposition currently going on as to which one is right for the web, as developers are seeking open codec free of patent and licensing constraints. Sadly, neither of them seems to fulfill the criteria exactly. Presently, only Google Chrome supports both of the codecs where as refusal to support H.264 by Mozilla and Opera is heating the debate on and on.

Video JS

VideoJS is nothing but an HTML5 player that is fine tuned to play video in almost all prominent browsers without any compatibility issues. It has three core parts:

  • An embedded code developed by Kroc Kamen
  • A JavaScript Library (video.js)
  • An HTML/CSS skin (video-js.css)

You have to download the latest version of VideoJS, unzip it and upload into your server. Next you have to include the JavaScript and CSS libraries in your HTML page. Now, change the src/href to the appropriate location on your server.

For example:

<head>
  ...
    <script src="myvideo.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="MyVideo JS" charset="utf-8">
  ...
  </head>

Next developers need to add some JavaScript to the HTML page to trigger VideoJS when the page is loaded.

Conclusion

Flash requires a lot of moving parts – HTML page, Flash players, Flash install files and JavaScript. Also with videoJS you have the same problem. HTML5 offers more straight forward coding in comparison to these players. HTML5 lags in comparison to Flash on the issue of performance. Flash is used for about 70% of online games but HTML5 is catching up gradually. HTML5 will reverse this trend sooner or later.

On hardware accelerating issues Chrome + HTML5 came up with least efficient CPU utilization at 25.66%.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved