HTML5 VS. HTML
HTML was developed by the W3C until 2004, when members of the HTML working group grew disturbed with the direction the W3C was going with HTML. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called WHATWG (Web Hypertext Application Technology Working Group) devoted to evolving the Web. They started by working on a new specification of HTML – HTML5.
Why Should We Learn HTML5
HTML5 is the newest specification for HTML, and many browsers are going to start supporting it in the future. One nice thing about HTML5 is that it attempts to stay backwards compatible. So if we don’t want to learn it just yet, we don’t need to.
If we build Web applications we will eventually want to learn HTML5. There are a lot of new attributes and tags built just for Web applications. For instance, there are a number of new event handlers for drag and drop:
- ondrag
- ondragstart
- ondragend
- ondrop
And many more.
At this point in time, there is not a lot of support for HTML5, but that support is growing all the time. By staying abreast of the changes we’ll be prepared when they become widely available for use.
HTML5 vs. Flash: The Battle for Rich Media
Comparing HTML5 with Flash is like comparing apples and oranges. HTML5 is a specification and Flash is software. But there has been so much buzz in the IT world about these 2 technologies that it’s worth taking a detailed look. HTML5 is the new specification for Hyper Text Markup Language (HTML) which is the language of the web. This latest specification includes native support for audio and video which is why Flash is threatened. Adobe Flash, on the other hand, has owned rich media on the web for more than a decade and has become virtually ubiquitous. The battleground for the debate between HTML5 and Flash is rich media, or more specifically, streaming video. But let’s start with a primer on HTML5 and Flash and then we will move on to comparing the technologies.
HTML5
HTML5 is currently in development and is the next generation of the HTML standard. The HTML5 specification is governed by the Web Hypertext Application Technology Working Group (WHATWG). Members of the group include folks from Apple, Mozilla, Opera Software and others. The new group came about because they were disappointed with the direction of the prior group, W3C. As it turns out, both groups are working on the HTML5 specification.
We have already seen HTML editors include HTML5 add-ons which is good for software developers. One of the key features in HTML5 is that it is backward compatible to HTML4. Everything that worked in HTML4 will continue to work in HTML5. Upgrading an HTML page from HTML4 to HTML5 couldn’t be easier. Simply change the doctype to “HTML”. It looks like this: “<!DOCTYPE HTML>“. Our page is now an HTML5 page.
HTML5 includes a host of new mark-up elements to improve structure, such as:
<article>Designed for external content like a blog, forum, or any other content from an external source<header>Can be used as an introduction of a document or section<nav>Designed for a section of navigation<section>Designed for a section in a document like chapters, headers, footers, or any other sections of the document
The most talked about part of the HTML5 specification is the new media elements. This is where HTML5 and Flash cross paths. HTML5 supports audio and video without the use of any add-ons such as the Flash Player.
The HTML5 new media elements include (partial list):
<audio>Used for multimedia content, such as sound, music or audio streams<video>Used for video content, such as a movie clips or video streams
WHATWG recently announced that it would be removing the section from the HTML5 specification, stating which codec would be required. It came to this conclusion because they didn’t feel that all vendors could agree on a single codec. They instead left the codec “undefined”. This is similar to the image tag in earlier versions of HTML. The image tag supports multiple formats such as JPEG and GIF.
HTML5 Compatibility
Browser support for the HTML5 specification continues to increase, with 4 out of the top 5 browsers currently supporting some or all of the HTML5 specification. This is the list of the top 5 browsers in the order of HTML5 compatibility.
- Firefox
Mozilla has been an early adopter of the HTML5 standard. Beginning with Firefox 3.5, we started to see the first support of the HTML5 standard. This corresponded to the 1.8.1 version of the Gecko engine, the heart of Firefox. Mozilla continued adding more support for HTML5 with subsequent releases of their browser. The current release, Mozilla Firefox 3.6.9 (Gecko engine 1.9.2) has virtually full support for the HTML5 specification, including audio and video. Mozilla also offers a mobile web browser which is based on the same engine as the regular web browser. - Chrome
Google Chrome was released in 2008. The current Chrome version is 6.0.472.55. Google Chrome has solid support when it comes to HTML5. With the exception of just a couple of features, it supports pretty much everything including audio and video. Google has a number of mobile applications for phones but they don’t have a mobile version of Chrome just yet. Chrome only runs on the Microsoft Windows operating system. - Safari
Apple’s Safari browser began supporting HTML5 in version 4. The current release, Safari 5.0.2 for Windows and Mac, has broad support for HTML5. Apple has been outspoken in their preference for the open source video standard which is included in HTML5. Safari is the standard browser in all of Apple’s products, including the iPhone, iPod Touch, iPad, and their desktop and laptop computer products. - Opera
Opera Software released Opera 10.6.2 of its browser recently and it has wide support for the HTML5 specification. The rendering engine is Opera Presto 2.6. The mobile version of Opera includes version 5 (BlackBerry, Windows Mobile/Pocket PC, iPhone) and version 10.1 (Symbian, Windows Mobile). While the Opera Mobile browsers have some support for HTML5, it doesn’t include audio and video support. - Internet Explorer
Microsoft Internet Explorer is the only browser with a current version that does not support HTML5. Internet Explorer 8 supports HTML4. However, Internet Explorer 9, which is due out in late 2010 or early 2011, will enter public beta in September 2010. Internet Explorer 9 is expected to have broad support for HTML5, including audio and video. From a mobile standpoint, Windows Mobile 7 is due out later this year and also includes support for HTML5.
HTML5 Browser Statistics – Market Share
It’s really important for a software developer to have a full understanding of the popularity of the different browsers when considering whether to implement HTML5. It takes lots of additional code to handle multiple browser and multiple browser versions. Each browser has its own idiosyncrasies and we often need to code around them.
Flash
Adobe Flash is a cross platform technology used for animation, video and interactivity. The technology is most pervasive on the web and is delivered by the Adobe Flash Player. Flash has been around for years and was originally released by Macromedia and later purchased by Adobe. The current release of Flash Player is 10.1. In recent years, Flash has become the standard for delivering rich content on the web including video. YouTube uses Flash as their default video player but they have announced support for HTML5 as an alternative.
The Flash Player but runs in a browser. All major browsers accommodate a Flash Player add-on therefore virtually all browsers are compatible with Flash. Flash manipulates graphics, can support audio and video, and can capture input from the mouse, keyboard, microphone and webcam. Flash uses ActionScript, which is an object-oriented programming language. Flash can be run on many platforms including web browsers, mobile devices and standalone electronic devices. The Flash developer can use Adobe Flash Professional to build and deploy Flash application. In addition, there are converters available that can convert pretty much any video format to Flash.
Flash Compatibility
The Flash Player is a cross browser add-on and Adobe makes a player for Windows, Mac, Linux and Solaris (UNIX). The Adobe Flash Player runs in the following browsers:
- Windows Internet Explorer
- Mozilla Firefox
- Apple Safari
- Google Chrome
- Opera Software Opera
- AOL
- Seamonkey
HTML5 vs. Flash
Embedding Video
The <video> tag in HTML5 offers a lot of flexibility. It’s nice having so many options available in native HTML code as opposed to dealing with the syntax required by the video player we choose. Adding a video to a page using HTML5 is a really simple and straight forward process.
Here is the HTML5 code generated by Dreamweaver to embed a video with a couple of player controls and have it auto start:
<video autoplay="autoplay" controls="controls" src="myvideo.ogg">our browser doesn't support HTML5 video </video>There are only 2 moving parts, the video and the HTML page.
Here is the same scenario using Flash. It’s pretty difficult to hand code the embedding of a Flash video. Most HTML text editors should have HTML5 support. We encoded the same video with the Flash format and used Dreamweaver to embed it in a web page. Here is the code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="scale" value="noscale">
<param name="salign" value="lt">
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&stream Name=myvideo.flv&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if we don't want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="800" height="600">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="scale" value="noscale">
<param name="salign" value="lt">
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&stream Name=../Desktop/timetracking&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</object>
In addition to the complex coding required for Flash, there are a number of moving parts in this scenario including the video, the HTML page, the Flash Player SWF file, Flash install files and a JavaScript file. That’s a lot of moving parts.
HTML5 clearly offers a more straight forward coding scenario. But to be fair, Dreamweaver has set up the Flash instance for multiple versions of browsers and a method to install the Flash Player. But it’s still much more complex when compared to HTML5.
Gaming
When it comes to gaming, performance can be a factor. A lag here or there in the course of a long video can be overlooked. But gamers won’t tolerate lagging in an online game.
Flash is used for about 70% of all online games so HTML5 has some catching up. Mobile gaming, on the other hand, may still be up for grabs. Steve Jobs drew a line in the sand by making HTML5 the choice for both the iPhone, iPod Touch, and iPad browsers. The explosion of the mobile market for games could be a game changer for HTML5 and the battle for rich media.
Mobile Gaming manufacturers are beginning to develop games using HTML5. Spil Games out of the Netherlands announced that they are going to port their online games to HTML5 so mobile users can play their favorite games on their mobile devices. Spil Games is a leader in online gaming with 130 million unique monthly visitors. Expect other game developers to follow suit. The mobile gaming market is just too big to ignore.
While Flash still owns the mobile gaming market, HTML5 will reverse this trend in the next 3 – 5 years. HTML5 should ultimately win the mobile gaming battle but Flash will dominate for the next few years.
Performance
Steve Jobs claims that Flash is a CPU hog. This is the reason he points out as to why Flash support is not being included in Apple’s new products like the iPhone and iPad. Jan Ozar from the Streaming Learning Center took on this challenge. Jan took a very simple use case in formulating his comparison. He played a YouTube video in the regular Flash based player and then in the new HTML5 player. He measured the CPU Utilization during the video playback. Not every browser could be included in the test because they all don’t support both Flash and HTML5 video playback.
It turns out that the key to this comparison is in hardware acceleration. Hardware acceleration is hardware that can actually speed up communications, storage and retrieval, mathematical operations and graphics. It’s a separate piece of hardware from the CPU.
In tests for the Mac operating system, Safari performed much better with HTML5 video. Flash CPU Utilization was 37.41% or 202% higher than HTML5. Chrome was inefficient across the board using the Mac OS, posting CPU Utilization in the 50% range for both the Flash Player 10.0 and the Flash Player 10.1. This number means that approximately half of the processor was tied up playing the video for the Chrome browser. Full test results on Mac.
As it turns out, Apple doesn’t expose access to the hardware acceleration components like Windows does. Theoretically, if Flash could access the hardware acceleration component, it could be much more efficient and even potentially match the CPU Utilization of HTML5.
Windows, on the other hand, allows access to the hardware acceleration components. The Chrome browser came up short in the test. Playing a video using Chrome and HTML5 was the least efficient method in terms of CPU Utilization at 25.66%. The results for Chrome were much better using the 10.1 version of the Flash Player. Full test results on Windows.
It is logical to conclude that if Apple were to open up hardware acceleration, Flash could match HTML5 in terms of performance. Let’s call performance even between HTML5 and Flash, at least for now.
Open vs. Proprietary
This is a no-brainer. HTML5 is a specification only and the WHATWG group is trying to push rich media to be part of every browser. While Adobe keeps Flash a step ahead of HTML5, Adobe is a single company and Flash is proprietary software. In theory, Adobe can do whatever they want to do with Flash technology. While it’s unlikely they would make decisions that would go against what’s good for their customers, they could. On the proprietary argument, HTM5 gets the nod.
Platform Maturity
Flash has been around since 1996. HTML5 is actually still in development. In the short term, Flash will keep the edge because it is so far ahead of HTML5 in so many ways. Adobe, however, is a single company. There are multiple companies involved in HTML5 and even more interested in the openness of this specification. In the long run, HTML5 will improve and continue to evolve. We have seen where technology can change at web speed. Not too many years ago, Internet Explorer dominated the browser market. Then Mozilla developed the Firefox browser and it took off. Firefox now dominates the browser market. Flash wins the maturity argument.
Conclusion
We looked at HTML5 vs. Flash in terms of video, the gaming industry, performance, complexity, as well as other variables. HTML5 won a couple and Flash won a couple. I am convinced that Flash will continue to dominate video on the web, at least in the short term. Opening up licensing restrictions was a good move by Adobe but Flash is a proprietary platform and doesn’t perform as well on a Mac. But Flash is just too far ahead of HTML5 for now. HTML5 is still in development and that train has been moving really slowly as HTML5 has been in development for more than 5 years.
It’s not such a clear picture in 5 years. HTML5 will continue to evolve and companies like Spil Games will emerge with HTML5 clearly part of their strategic direction. It’s too early to say that Flash will eventually be replaced by HTML5, but one thing is for sure, the added competition can only help end users. Options are always good and that breeds innovation. Flash will be the winner in the short term but in the long term, HTML5 could pose a series threat. We will all need to keep an eye on the HTML5 vs. Flash debate as I am sure it will continue to be in the next blog post
