I think you will agree that this is pretty simple. With 2 lines of code, you have embedded a video in your page and it's ready to go. There are only 2 moving parts, the video and the HTML page.
I ran the same scenario using Flash. It's pretty difficult to hand code the embedding of a Flash video so I am glad I have Dreamweaver available. Most HTML text editors should have HTML5 support. I 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 you 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.