Monday, December 3, 2012
Friday, November 30, 2012
Final 4 Title Choices
1. "The Dawn of HTML5: No More Sad Puzzle Pieces?"
2. "Flash Me: Working Out The Kinks of Sad Puzzle Pieces."
3. "Flash Wars: The HTML5 Battle of Online Interactivity"
4. "Rich Media Throwdown: Which will be more prevalent in the future?"
2. "Flash Me: Working Out The Kinks of Sad Puzzle Pieces."
3. "Flash Wars: The HTML5 Battle of Online Interactivity"
4. "Rich Media Throwdown: Which will be more prevalent in the future?"
Monday, November 26, 2012
Titles
Title Ideas:
Title Words:
- "Win, Lose or Draw"
- "Flash vs. HTML5: Who will become the online victor of interactivity?"
- "The dawn of HTML5: No more sad puzzle pieces?"
- "Flash Me: Working out the kinks of sad puzzle pieces."
Title Words:
- Flash
- HTML5
- War
- Internet
- Interactivity
- Multimedia
- Dominate
- Online
- Rich Multimedia
- Win
- Lose
- Take Over
- Plug-in
- Issues
- End Users
- Web Development
Friday, November 2, 2012
Tuesday, October 23, 2012
JavaScript Alert Box Code for Bryan
JavaScript Popup Boxes
Alert Box
- An alert box is used to make sure information reaches the user
- When an alert box pops up, the user must click "OK" to proceed
<head>
<script type="text/JavaScript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
(Where it says alert("I am an alert box!"); - you can input your own text/info)
Alert Box
- An alert box is used to make sure information reaches the user
- When an alert box pops up, the user must click "OK" to proceed
<head>
<script type="text/JavaScript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
(Where it says alert("I am an alert box!"); - you can input your own text/info)
Friday, October 19, 2012
Just the facts:
Forbes:
HTML: Builds websites
Flash is embedded in them
HTML5 doesn't exist yet (scheduled for 2014)
< 1/2 of all browsers are HTML5 compliant
Video Elements:
HTML5: Basic Players
Flash: Advanced Players
Evolution:
HTML => HTML5/CSS3
Allows web designers to use custom fonts, gradients, rounded corners/transitions
ReadWriteWeb:
HTML5 (Web markup language) eliminates the need for an Adobe plugin
Better flash performance - dependent upon whether or not it could access hardware acceleration
Flowing Data:
Browser Market Share:
99% Flash
40% HTML5
1% ioS
HTML5 Ready:
44% IE
27% Firefox
15% Chrome
7% Safari
5% Mobile
2% Opera + Others
PROS/CONS:
FLASH:
PROS:
Established
Unified Platform - reaches 99% browsers
Apps developed for Flash - fewer technical restrictions and greater speed
85% Most visited sites use Flash
75% Web videos published for Flash Players
CONS:
Some mobile browsers (esp. ios Safari) lack support for technology
HTML5:
PROS:
Synthesis - new/existing technologies (JavaScript, CSS3, Canvas, SVG) = Broad potential developer base
CONS:
Development landscape = lawless
Known inconsistencies between browser implementations of core features
Lacks established and unified methodology = increases development needed for cross-browser compatibility
ZDNet:
Adobe VP - Danny Winokur
HTML5: Universally supported on mobile devices
Best solution: Creating and developing content in browser across mobile platforms
Key players in HTML community: Google, Apple. Microsoft, RIM
ars technica:
Adobe working on establishing same position as HTML5 with program "Edge Animate"
Offers Timelines, Events and Library of animations
Allows for creating animated and interactive content without requiring programming skills
Filling important tooling gaps for HTML5
wix.com blog:
70% Web Games made in Flash
75% Web videos viewed in Flash Player
98% Enterprises rely on Flash Player
85% Most visited websites use Flash
HTML5: Better for SEO
Becoming standard for creating general websites
Flash: Better security (2 levels of encryption)
cnet:
Perhaps the most visible HTML5 aspect is built-in support for audio and video, but there are other HTML abilities under way: storing data on a computer for use by an application, Web Sockets for periodically pushing updates to a browser, Web Workers for letting Web programs perform multiple tasks at once, and Canvas for better two-dimensional graphics.
Flash advantages:
Hot Topics:
A BATTLE FOR THE HEARTS AND MINDS OF DEVELOPERS (AND AUDIENCES!)
I think it’s critical to first frame and understand this discussion with the broader political economy of Internet software platforms. Most of the debate and discussion over HTML5 vs. Flash vs. Native Apps has little to do with what is the right technical approach, or whether something is open or closed, it has to do with the expressions of power and control that drive the businesses of the Internet’s dominant platform companies — Apple, Adobe, Google and Microsoft.
Each of these companies seeks to create unique runtimes and APIs that provide a strategic wedge that can drive other aspects of their business. At one level this is a battle for the hearts and minds of developers and ISVs, but these developers are merely a means to an end. Gaining broad adoption for their runtime platforms translates into their ability to create massive derivative value through downstream products and services. For Apple, this is hardware and paid media (content and apps) sales. For Google, this is about creating massive reach for their advertising platforms and products. For Adobe, this about creating major new applications businesses based on their platform. For Microsoft, it is about driving unit sales of their core OS and business applications.
WEB APPS AND CONTENT
I’m often asked “Will HTML5 replace Flash?” on the Web. The quick answer is no. However, there is a lot of nuance here and it’s helpful to make the distinction between two broad classes of content applications that are deployed in browsers.
First, there are what I would call Web Productivity Apps. These kinds of applications require responsive, cross-platform, desktop like and highly interactive experiences. They often require seamless integration with existing web content and data. For several years, the Flash Platform was the best platform for creating these types of applications (per above). However, in the past several years, HTML+JavaScript (Ajax) and now HTML5 have created a highly compelling framework to build these applications, and for a large number of web productivity apps, the HTML5 approach will become the preferred model. The best examples are Google Apps, Salesforce.com, and even Microsoft’s forthcoming Office Online. There are also a class of Web Productivity Apps where Flash is the preferred runtime, especially those that involve working with and manipulating media such as images, audio and video. We, like many companies, are pragmatic and use both Flash and HTML as the technology needs require. Other examples of this include rich data visualization applications, where Flash has gained prominence inside of enterprises because of its rich data and visualization features.
The second broad class of applications are what I would call Rich Media Apps. These kinds of applications include largely consumer-facing, audience and media centric experiences. In particular, this includes online video, rich media advertising and marketing, and online games (casual games). All of these kinds of applications are highly focused on having a great and immersive experience that just works, and the creators of these apps are very focused on audience reach — anything that impedes 100% consumer acceptance is a significant concern. Here, Flash is dominant. The unique runtime characteristics of Flash, combined with its incredible reach, has led these types of apps to become highly dependent on Flash, and massive amounts of the broadband economy are dependent on it. It seems unlikely that HTML5 would be at all positioned to replace Flash for these categories, though it is clearly worth watching how consistent rich media runtimes find their way into the HTML5+ standard. Right now, it is a non starter.
THE HANDHELD DISRUPTION
Much of the above classes of content applications are in reference to the PC/Browser-based Web. The explosive growth in hand-held computing has introduced an entirely new dynamic into the content and app run-time battles which in turn will have a cascading impact on the PC Web. Hand-held computing includes smartphones (iPhone, Android, Nokia, et. al), portable music/entertainment devices and tablet computing devices (iPad and Android devices).
In many respects, the successful launch and growth of these devices has created an entirely new and largely blank canvas for content and applications. First, these devices offer new native services and OS-specific features (location, multi-touch UI, local media, wireless networking APIs, cameras, offline) that are giving birth to a massive new class of non-Web Apps that are built using proprietary native-code APIs and runtimes. Because of always-on broadband connectivity and easy to discovery App Stores, there has been rapid adoption of these new “disposable content apps”.
Hand-held platforms create a new opportunity for platform vendors to disrupt runtime hegemony from platforms that have seen ascendance on the PC/Web, and controlling these new run-times and developer adoption of these runtimes has a direct impact on these platform vendors ability to own audience relationships and monetization opportunities. For example, a web-centric, HTML5-centric handheld world favors Google because it can leverage it’s existing dominance in search and web advertising. A proprietary App-centric universe favors Apple because it can become the primary gatekeeper to reaching the mobile audience and already has a pole position in integrating payments and advertising into content applications.
In the case of hand-held platforms, however, it seems quite apparent that it is not a zero-sum game. Three runtime platforms will gain adoption and often even inter-mingle — HTML5 content and apps, Native Apps (that may contain Flash and HTML content), and HTML5 apps that contain and leverage Flash Player. There is a rich pallet of capabilities emerging, and each developer will need to consider what will be appropriate for their specific audience or application. It is also clear that the adoption of these diverse run-time platforms has the real potential to reconstitute fundamental relationships to audiences and monetization systems.
VIDEO AS A CORNERSTONE ISSUE
I’m also often asked “Will HTML5 Video replace Flash Video?”. Posited as a winner-take-all, absolute, the answer is clearly no. But like the nuance of HTML5 vs. Flash on the Web, there is also a very nuanced and complex evolving landscape in the video format world.
On the PC/Web, video has gained enormous momentum as a fundamental media type for all content on the Web. This has largely been driven by the adoption of Flash Video, which has approximately 75% market-share for online video. For most web and content app developers, this is fine, it is a great run-time and offers an excellent user experience and Adobe has done a very good job keeping the platform contemporary with the most demanding needs of video delivery and quality.
It is the rapid emergence of hand-held devices, however, that is bringing this issue to the forefront. With massive growth in hand-held web browsing from smartphones, iTouch devices and the pending iPad product, this has raised a deeper issue for media publishers who are eager to have their content be accessible to end-users. In particular, it is the show-down between Apple, Google and Adobe over who can control video formats on these devices that is creating challenges. Again, this is not about “what is the right technical solution”, it is about the political economy of who controls the formats that in turn lead to owning downstream audience and monetization opportunities.
The basic idea behind HTML5 video is that there would be a common video format that could be placed and rendered into any compatible web browser, conceptually replacing the need for the Flash run-time to render video in browsers. But there are enormous challenges with this, some political, some technical and some based on audience behavior.
First, right now, there is a lack of common approach among browser makers on what format to use for the HTML video object. This lack of agreement represents a proxy for broader political battles. Apple promotes MPEG-4/H.264, which it uses for it’s device platforms. Microsoft promotes VC-1, it’s own standard video codec. Google has yet to fully weigh-in on what format to support, which leads me to speculate that they will soon introduce a new format, based on On2 VP8, but under a broad open source license to the format and technology. Firefox, with 24% share of the browser market, proposes to use the open source Ogg Vorbis codec. What few people realize is that while H.264 appears to be an open and free standard, in actuality it is not. It is a standard provided by the MPEG-LA consortsia, and is governed by commercial and IP restrictions, which will in 2014 impose a royalty and license requirement on all users of the technology. How can the open Web adopt a format that has such restrictions? It can’t. Google will make an end-run on this by launching an open format with an open source license for the technology, which according to industry experts delivers almost all of the same technical benefits as H.264. All of this is a long way of saying that there is still significant format tension and that it will take a long time for it to be resolved in next-gen browsers.
Second, but related, is the raw reality of browser adoption and churn cycles, and the fact that online video publishers will only adopt standards that have extremely broad adoption. Until penetration rates consistently reach 80%, it will be hard for publishers to switch and adopt a single, new solution. It is more likely that HTML5 Video adoption will reach that critical mass on hand-held devices before it does on the PC/Web.
Third, and equally important, is the more practical issue of the massive industry-wide ecosystem support for Flash Video. From advertising formats, to business logic for the interaction of video with ads and analytics, hundreds of 3rd party technology companies who have built solutions around online video that are built on Flash, not to mention high quality design and authoring tools that sit at the center of a large labor market for Flash design and development; all of this creates inertia for Flash and a relatively high industry-wide switching cost.
But stepping back and looking at this specifically in the context of hand-held computing, where Apple is politically motivated to block the Flash runtime, it is apparent video publishers will be driven to build and operate solutions that leverage HTML5 Video on mobile and iPad browsing environments.
IT’S ALL ABOUT REACH
Whether on the supply side of content and applications, or on the distribution and run-time side of the equation, what is abundantly clear is that reach is still king. For platform makers, these battles will continue as they all seek to drive sufficient reach for their open and proprietary standards such that they can exploit this distribution for their core commercial goals. Likewise, and more important, whatever standards and models deliver the broadest reach will ultimately drive what is adopted by publishers, developers and ISVs.
While it is easy to take a binary position in the future of content applications and run-times, it is evident that the competing interests of platform vendors, consumers and app and content publishers will ensure that this remains a fragmented and competitive environment for many years to come.
w3schools:
What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
How Did HTML5 Get Started?
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
What is SVG?
SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.
Locate the User's Position
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
Video on the Web
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
Audio on the Web
Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
What is HTML5 Web Storage?
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.
What is Application Cache?
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server
About.com
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>". Your 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
To learn more about the new elements in HTML5, see the article, What's New in HTML 5 by Jennifer Kyrnin (About.com).
There has been discussion around the codecs required to actually play the audio and/or video. The term codec refers to any technology used in compressing and decompressing data 1(COmpressing/DECompressing). 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.
The 2 codecs used in HTML5 are H.264 and Ogg Theora. Both are supported by the current version of HTML5.
H.264
The H.264 codec is a video compression standard developed and governed by the MPEG Licensing Association (MPEG LA) which is a partnership between the ITU-T Video Coding Experts Group (VCEG) and the ISO/IEC Moving Picture Experts Group (MPEG). The H.264 codec is used across many applications from compressed video for internet streaming applications to HDTV broadcast and digital cinema applications. H.264 is also one of the compression standards used in Blu-ray Disc format. Google, YouTube, Vimeo and Apple have all announced their support for the H.264 standard.
One of the key issues regarding the H.264 is licensing. In August 2010, MPEG LA announced that they will not charge a royalty fee for videos encoded using H.264, provided that the videos are free to the end user until at least 2016. This is really good news for supporters of H.264.
Ogg Theora
The Theora codec is a video compression framework developed by the Xiph.Org Foundation. The mission of the Xiph.Org Foundation is to protect the foundations of internet multimedia from control by private interests. All of the foundation's projects support open standards and are license free. Ogg is the media container that delivers the video and was also developed by the Xiph.Org Foundation. The open source community has been outspoken in its support for Ogg Theora. In addition, both Mozilla and Opera Software support the Ogg Theora video format.
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, you 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 you often need to code around them.
As you can see, most of the major browsers have versions in the marketplace that support HTML5 with the exception of Internet Explorer. But with more than 30% of the world using Internet Explorer, you need to consider this fact. As it turns out, only 65% of all browsers being used today are compatible with HTML5. Once Internet Explorer 9 is released in the coming months, this number will increase significantly. But in the meantime, you will need to consider this in your development.
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.
The file format used by Flash is Flash Video (FLV) for video and Shockwave Flash (SWF). In an effort to compete against open standards, Adobe announced in 2009 that they were removing the restrictions on the use of SWF and FLV formats. Interestingly, in 2007, Adobe announced partial support for the H.264 standard.
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
Flash Penetration Statistics
According to Adobe, Flash Player penetration is near 100%. In mature markets, Adobe claims that 99.3% of all browsers have Flash Player 8 or better. They also claim that 97.5% of all browsers have Flash Player 10. There are many people who dispute that 99% of every computer running a browser has the Flash Player installed. In response, Adobe spokespeople suggest that you should survey your end users to obtain your specific usage statistics.
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 you choose. Adding a video to a page using HTML5 is a really simple and straight forward process.
I launched Adobe Dreamweaver CS5 to see exactly what code is generated when you add a video to a web page. I set up an empty HTML page and inserted a video using HTML5 and Flash. The format of the video I embedded in the HTML5 test was Theora Ogg. 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">Your browser doesn't support HTML5 video</video>
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.
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 IT news.
PCMag.com:
Definition of: rich media
Information that consists of any combination of text, images, audio, video and animation. Also called "multimedia.
slideshare:
HTML5 / CSS3 are not mature enough to be globally used in businesses but still have the potential to replace Flash in animation, video and web applications that do not involve high interactivity in the very close future.
Animations can be done in HTML5/CSS3 but are done in a more superior manner in Flash in terms of performance.
BBC News:
"We've needed to rely on third parties like Adobe Flash or QuickTime and had to embed this inside web pages. What HTML5 will do is remove them from the equation so this stuff is supported natively," he says.
Put simply it means that there's now much less chance that customers visiting a website will come across a black hole in the middle of the page, or get endless prompts to "download a plug-in" which may take several minutes to install.
By then it is often too late. The consumer has already clicked on a competitor's website.
The success of these products globally means many companies cannot ignore the need to re-code their entire websites in HTML5, especially the multimedia content.
New horizons
Aaron Gustafson, author of the book Adaptive Web Design, says the versatility and dynamic nature of HTML5 means it can be used in new ways in different environments including the office and kitchen.
Google is pushing HTML5 hard, not surprising since the greater impact that web pages and apps have, the more advertising it can sell.
HTML5 also represents another step to the "semantic web", a web structure championed by Tim Berners-Lee that cross-references, reacts to and displays multiple information sources from the internet in real time.
Companies favour HTML5 because it can also replicate experiences previously only available inside an app, on the web. This is especially true for the mobile environment.
And a lot of brand names don't like being part of someone else's ecosystem because they lose control of pricing and subscribers. The Financial Times recently announced it will shut off its iPad app completely following the success of its HTML5 web page.
Danny Winokur, the general manager of the Interactive Development Business at Adobe, says the future of Flash is not in doubt, especially since protecting high quality assets with DRM (Digital Rights Management) is not yet possible in HTML5.
"Flash is allowing things like 3D immersive gaming that you would normally see on an Xbox or Playstation to come into a web browser," he says.
"That's something that HTML may eventually be able to do but it has a long way to go. Flash will pioneer those most advanced cases like HD feature-rich cinema graphic content that needs to be copy-protected."
Ideally of course the end user will not notice, or even care, that the web is being powered by a new updated set of code.
If HTML5 does its job properly, no-one outside the web development community will ever know about it!
PRO: HTML5
Websites that update in real time - use "Web Socket"; No longer need serious engineering teams to do this
More convenient to produce captivating photo/video displays for marketing purposes
The "plug-in needed" requirement is removed when using HTML5
The ability for a cross-platform experience
You can load a website on a mobile device, PC or TV and it will look exactly the same and follow through on functionality.
Immediate Challenges:
Mobile devices have different requirements than PCs
Adobe will continue to develop Flash just not for mobile devices
HTML5 offers little in the way of copyright protection
It can take years for consumers to update from old browsers (which don't support HTML5 standards)
Future:
Browsers have to upgrade much more frequently to keep up with newer HTML5
HTML: Builds websites
Flash is embedded in them
HTML5 doesn't exist yet (scheduled for 2014)
< 1/2 of all browsers are HTML5 compliant
Video Elements:
HTML5: Basic Players
Flash: Advanced Players
Evolution:
HTML => HTML5/CSS3
Allows web designers to use custom fonts, gradients, rounded corners/transitions
ReadWriteWeb:
HTML5 (Web markup language) eliminates the need for an Adobe plugin
Better flash performance - dependent upon whether or not it could access hardware acceleration
Flowing Data:
Browser Market Share:
99% Flash
40% HTML5
1% ioS
HTML5 Ready:
44% IE
27% Firefox
15% Chrome
7% Safari
5% Mobile
2% Opera + Others
PROS/CONS:
FLASH:
PROS:
Established
Unified Platform - reaches 99% browsers
Apps developed for Flash - fewer technical restrictions and greater speed
85% Most visited sites use Flash
75% Web videos published for Flash Players
CONS:
Some mobile browsers (esp. ios Safari) lack support for technology
HTML5:
PROS:
Synthesis - new/existing technologies (JavaScript, CSS3, Canvas, SVG) = Broad potential developer base
CONS:
Development landscape = lawless
Known inconsistencies between browser implementations of core features
Lacks established and unified methodology = increases development needed for cross-browser compatibility
ZDNet:
Adobe VP - Danny Winokur
HTML5: Universally supported on mobile devices
Best solution: Creating and developing content in browser across mobile platforms
Key players in HTML community: Google, Apple. Microsoft, RIM
ars technica:
Adobe working on establishing same position as HTML5 with program "Edge Animate"
Offers Timelines, Events and Library of animations
Allows for creating animated and interactive content without requiring programming skills
Filling important tooling gaps for HTML5
wix.com blog:
70% Web Games made in Flash
75% Web videos viewed in Flash Player
98% Enterprises rely on Flash Player
85% Most visited websites use Flash
HTML5: Better for SEO
Becoming standard for creating general websites
Flash: Better security (2 levels of encryption)
cnet:
Perhaps the most visible HTML5 aspect is built-in support for audio and video, but there are other HTML abilities under way: storing data on a computer for use by an application, Web Sockets for periodically pushing updates to a browser, Web Workers for letting Web programs perform multiple tasks at once, and Canvas for better two-dimensional graphics.
Flash advantages:
Flash is a single browser plug-in that provides consistency from one computer to the next. And unlike with browsers, where Microsoft's 2001-era Internet Explorer 6 has only recently been dethroned as the most-used browser, most people upgrade to new Flash versions relatively rapidly.
Flash video can use a variety of "codecs" for encoding an decoding video as it's sent from server to viewer. Viewers don't need to know anything beyond how to click a video's "play" button, a contrast to Net video's incompatibility-fraught early days.
But with HTML5, though, there are two prevailing codecs right now: H.264, supported by Apple's Safari and Google's Chrome, and Ogg Theora, supported by Firefox, Chrome, and, according to plan, Opera. IE, the dominant browser, doesn't support any at HTML5 video at present.
Indeed, it's probably wiser to take a deep breath and accept that both technologies will prevail and neither will conquer the other any time soon.
Perhaps the gulf isn't as wide as it appears. Don't forget that Adobe has HTML authoring tools as well, and its AIR (Adobe Integrated Runtime) software foundation includes not just a Flash player, but also the WebKit HTML-handling engine that's also in Safari and Chrome. Adobe has a big investment in Flash, but count on its HTML interest increasing as that technology matures.
Hot Topics:
A BATTLE FOR THE HEARTS AND MINDS OF DEVELOPERS (AND AUDIENCES!)
I think it’s critical to first frame and understand this discussion with the broader political economy of Internet software platforms. Most of the debate and discussion over HTML5 vs. Flash vs. Native Apps has little to do with what is the right technical approach, or whether something is open or closed, it has to do with the expressions of power and control that drive the businesses of the Internet’s dominant platform companies — Apple, Adobe, Google and Microsoft.
Each of these companies seeks to create unique runtimes and APIs that provide a strategic wedge that can drive other aspects of their business. At one level this is a battle for the hearts and minds of developers and ISVs, but these developers are merely a means to an end. Gaining broad adoption for their runtime platforms translates into their ability to create massive derivative value through downstream products and services. For Apple, this is hardware and paid media (content and apps) sales. For Google, this is about creating massive reach for their advertising platforms and products. For Adobe, this about creating major new applications businesses based on their platform. For Microsoft, it is about driving unit sales of their core OS and business applications.
WEB APPS AND CONTENT
I’m often asked “Will HTML5 replace Flash?” on the Web. The quick answer is no. However, there is a lot of nuance here and it’s helpful to make the distinction between two broad classes of content applications that are deployed in browsers.
First, there are what I would call Web Productivity Apps. These kinds of applications require responsive, cross-platform, desktop like and highly interactive experiences. They often require seamless integration with existing web content and data. For several years, the Flash Platform was the best platform for creating these types of applications (per above). However, in the past several years, HTML+JavaScript (Ajax) and now HTML5 have created a highly compelling framework to build these applications, and for a large number of web productivity apps, the HTML5 approach will become the preferred model. The best examples are Google Apps, Salesforce.com, and even Microsoft’s forthcoming Office Online. There are also a class of Web Productivity Apps where Flash is the preferred runtime, especially those that involve working with and manipulating media such as images, audio and video. We, like many companies, are pragmatic and use both Flash and HTML as the technology needs require. Other examples of this include rich data visualization applications, where Flash has gained prominence inside of enterprises because of its rich data and visualization features.
The second broad class of applications are what I would call Rich Media Apps. These kinds of applications include largely consumer-facing, audience and media centric experiences. In particular, this includes online video, rich media advertising and marketing, and online games (casual games). All of these kinds of applications are highly focused on having a great and immersive experience that just works, and the creators of these apps are very focused on audience reach — anything that impedes 100% consumer acceptance is a significant concern. Here, Flash is dominant. The unique runtime characteristics of Flash, combined with its incredible reach, has led these types of apps to become highly dependent on Flash, and massive amounts of the broadband economy are dependent on it. It seems unlikely that HTML5 would be at all positioned to replace Flash for these categories, though it is clearly worth watching how consistent rich media runtimes find their way into the HTML5+ standard. Right now, it is a non starter.
THE HANDHELD DISRUPTION
Much of the above classes of content applications are in reference to the PC/Browser-based Web. The explosive growth in hand-held computing has introduced an entirely new dynamic into the content and app run-time battles which in turn will have a cascading impact on the PC Web. Hand-held computing includes smartphones (iPhone, Android, Nokia, et. al), portable music/entertainment devices and tablet computing devices (iPad and Android devices).
In many respects, the successful launch and growth of these devices has created an entirely new and largely blank canvas for content and applications. First, these devices offer new native services and OS-specific features (location, multi-touch UI, local media, wireless networking APIs, cameras, offline) that are giving birth to a massive new class of non-Web Apps that are built using proprietary native-code APIs and runtimes. Because of always-on broadband connectivity and easy to discovery App Stores, there has been rapid adoption of these new “disposable content apps”.
Hand-held platforms create a new opportunity for platform vendors to disrupt runtime hegemony from platforms that have seen ascendance on the PC/Web, and controlling these new run-times and developer adoption of these runtimes has a direct impact on these platform vendors ability to own audience relationships and monetization opportunities. For example, a web-centric, HTML5-centric handheld world favors Google because it can leverage it’s existing dominance in search and web advertising. A proprietary App-centric universe favors Apple because it can become the primary gatekeeper to reaching the mobile audience and already has a pole position in integrating payments and advertising into content applications.
In the case of hand-held platforms, however, it seems quite apparent that it is not a zero-sum game. Three runtime platforms will gain adoption and often even inter-mingle — HTML5 content and apps, Native Apps (that may contain Flash and HTML content), and HTML5 apps that contain and leverage Flash Player. There is a rich pallet of capabilities emerging, and each developer will need to consider what will be appropriate for their specific audience or application. It is also clear that the adoption of these diverse run-time platforms has the real potential to reconstitute fundamental relationships to audiences and monetization systems.
VIDEO AS A CORNERSTONE ISSUE
I’m also often asked “Will HTML5 Video replace Flash Video?”. Posited as a winner-take-all, absolute, the answer is clearly no. But like the nuance of HTML5 vs. Flash on the Web, there is also a very nuanced and complex evolving landscape in the video format world.
On the PC/Web, video has gained enormous momentum as a fundamental media type for all content on the Web. This has largely been driven by the adoption of Flash Video, which has approximately 75% market-share for online video. For most web and content app developers, this is fine, it is a great run-time and offers an excellent user experience and Adobe has done a very good job keeping the platform contemporary with the most demanding needs of video delivery and quality.
It is the rapid emergence of hand-held devices, however, that is bringing this issue to the forefront. With massive growth in hand-held web browsing from smartphones, iTouch devices and the pending iPad product, this has raised a deeper issue for media publishers who are eager to have their content be accessible to end-users. In particular, it is the show-down between Apple, Google and Adobe over who can control video formats on these devices that is creating challenges. Again, this is not about “what is the right technical solution”, it is about the political economy of who controls the formats that in turn lead to owning downstream audience and monetization opportunities.
The basic idea behind HTML5 video is that there would be a common video format that could be placed and rendered into any compatible web browser, conceptually replacing the need for the Flash run-time to render video in browsers. But there are enormous challenges with this, some political, some technical and some based on audience behavior.
First, right now, there is a lack of common approach among browser makers on what format to use for the HTML video object. This lack of agreement represents a proxy for broader political battles. Apple promotes MPEG-4/H.264, which it uses for it’s device platforms. Microsoft promotes VC-1, it’s own standard video codec. Google has yet to fully weigh-in on what format to support, which leads me to speculate that they will soon introduce a new format, based on On2 VP8, but under a broad open source license to the format and technology. Firefox, with 24% share of the browser market, proposes to use the open source Ogg Vorbis codec. What few people realize is that while H.264 appears to be an open and free standard, in actuality it is not. It is a standard provided by the MPEG-LA consortsia, and is governed by commercial and IP restrictions, which will in 2014 impose a royalty and license requirement on all users of the technology. How can the open Web adopt a format that has such restrictions? It can’t. Google will make an end-run on this by launching an open format with an open source license for the technology, which according to industry experts delivers almost all of the same technical benefits as H.264. All of this is a long way of saying that there is still significant format tension and that it will take a long time for it to be resolved in next-gen browsers.
Second, but related, is the raw reality of browser adoption and churn cycles, and the fact that online video publishers will only adopt standards that have extremely broad adoption. Until penetration rates consistently reach 80%, it will be hard for publishers to switch and adopt a single, new solution. It is more likely that HTML5 Video adoption will reach that critical mass on hand-held devices before it does on the PC/Web.
Third, and equally important, is the more practical issue of the massive industry-wide ecosystem support for Flash Video. From advertising formats, to business logic for the interaction of video with ads and analytics, hundreds of 3rd party technology companies who have built solutions around online video that are built on Flash, not to mention high quality design and authoring tools that sit at the center of a large labor market for Flash design and development; all of this creates inertia for Flash and a relatively high industry-wide switching cost.
But stepping back and looking at this specifically in the context of hand-held computing, where Apple is politically motivated to block the Flash runtime, it is apparent video publishers will be driven to build and operate solutions that leverage HTML5 Video on mobile and iPad browsing environments.
IT’S ALL ABOUT REACH
Whether on the supply side of content and applications, or on the distribution and run-time side of the equation, what is abundantly clear is that reach is still king. For platform makers, these battles will continue as they all seek to drive sufficient reach for their open and proprietary standards such that they can exploit this distribution for their core commercial goals. Likewise, and more important, whatever standards and models deliver the broadest reach will ultimately drive what is adopted by publishers, developers and ISVs.
While it is easy to take a binary position in the future of content applications and run-times, it is evident that the competing interests of platform vendors, consumers and app and content publishers will ensure that this remains a fragmented and competitive environment for many years to come.
w3schools:
What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
How Did HTML5 Get Started?
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
What is SVG?
SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.
Locate the User's Position
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
Video on the Web
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
Audio on the Web
Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
What is HTML5 Web Storage?
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.
What is Application Cache?
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server
About.com
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>". Your 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
To learn more about the new elements in HTML5, see the article, What's New in HTML 5 by Jennifer Kyrnin (About.com).
There has been discussion around the codecs required to actually play the audio and/or video. The term codec refers to any technology used in compressing and decompressing data 1(COmpressing/DECompressing). 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.
The 2 codecs used in HTML5 are H.264 and Ogg Theora. Both are supported by the current version of HTML5.
H.264
The H.264 codec is a video compression standard developed and governed by the MPEG Licensing Association (MPEG LA) which is a partnership between the ITU-T Video Coding Experts Group (VCEG) and the ISO/IEC Moving Picture Experts Group (MPEG). The H.264 codec is used across many applications from compressed video for internet streaming applications to HDTV broadcast and digital cinema applications. H.264 is also one of the compression standards used in Blu-ray Disc format. Google, YouTube, Vimeo and Apple have all announced their support for the H.264 standard.
One of the key issues regarding the H.264 is licensing. In August 2010, MPEG LA announced that they will not charge a royalty fee for videos encoded using H.264, provided that the videos are free to the end user until at least 2016. This is really good news for supporters of H.264.
Ogg Theora
The Theora codec is a video compression framework developed by the Xiph.Org Foundation. The mission of the Xiph.Org Foundation is to protect the foundations of internet multimedia from control by private interests. All of the foundation's projects support open standards and are license free. Ogg is the media container that delivers the video and was also developed by the Xiph.Org Foundation. The open source community has been outspoken in its support for Ogg Theora. In addition, both Mozilla and Opera Software support the Ogg Theora video format.
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, you 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 you often need to code around them.
As you can see, most of the major browsers have versions in the marketplace that support HTML5 with the exception of Internet Explorer. But with more than 30% of the world using Internet Explorer, you need to consider this fact. As it turns out, only 65% of all browsers being used today are compatible with HTML5. Once Internet Explorer 9 is released in the coming months, this number will increase significantly. But in the meantime, you will need to consider this in your development.
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.
The file format used by Flash is Flash Video (FLV) for video and Shockwave Flash (SWF). In an effort to compete against open standards, Adobe announced in 2009 that they were removing the restrictions on the use of SWF and FLV formats. Interestingly, in 2007, Adobe announced partial support for the H.264 standard.
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
Flash Penetration Statistics
According to Adobe, Flash Player penetration is near 100%. In mature markets, Adobe claims that 99.3% of all browsers have Flash Player 8 or better. They also claim that 97.5% of all browsers have Flash Player 10. There are many people who dispute that 99% of every computer running a browser has the Flash Player installed. In response, Adobe spokespeople suggest that you should survey your end users to obtain your specific usage statistics.
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 you choose. Adding a video to a page using HTML5 is a really simple and straight forward process.
I launched Adobe Dreamweaver CS5 to see exactly what code is generated when you add a video to a web page. I set up an empty HTML page and inserted a video using HTML5 and Flash. The format of the video I embedded in the HTML5 test was Theora Ogg. 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">Your browser doesn't support HTML5 video</video>
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.
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 IT news.
PCMag.com:
Definition of: rich media
Information that consists of any combination of text, images, audio, video and animation. Also called "multimedia.
slideshare:
HTML5 / CSS3 are not mature enough to be globally used in businesses but still have the potential to replace Flash in animation, video and web applications that do not involve high interactivity in the very close future.
Animations can be done in HTML5/CSS3 but are done in a more superior manner in Flash in terms of performance.
BBC News:
"We've needed to rely on third parties like Adobe Flash or QuickTime and had to embed this inside web pages. What HTML5 will do is remove them from the equation so this stuff is supported natively," he says.
Put simply it means that there's now much less chance that customers visiting a website will come across a black hole in the middle of the page, or get endless prompts to "download a plug-in" which may take several minutes to install.
By then it is often too late. The consumer has already clicked on a competitor's website.
The success of these products globally means many companies cannot ignore the need to re-code their entire websites in HTML5, especially the multimedia content.
New horizons
Aaron Gustafson, author of the book Adaptive Web Design, says the versatility and dynamic nature of HTML5 means it can be used in new ways in different environments including the office and kitchen.
Google is pushing HTML5 hard, not surprising since the greater impact that web pages and apps have, the more advertising it can sell.
HTML5 also represents another step to the "semantic web", a web structure championed by Tim Berners-Lee that cross-references, reacts to and displays multiple information sources from the internet in real time.
Companies favour HTML5 because it can also replicate experiences previously only available inside an app, on the web. This is especially true for the mobile environment.
And a lot of brand names don't like being part of someone else's ecosystem because they lose control of pricing and subscribers. The Financial Times recently announced it will shut off its iPad app completely following the success of its HTML5 web page.
Danny Winokur, the general manager of the Interactive Development Business at Adobe, says the future of Flash is not in doubt, especially since protecting high quality assets with DRM (Digital Rights Management) is not yet possible in HTML5.
"Flash is allowing things like 3D immersive gaming that you would normally see on an Xbox or Playstation to come into a web browser," he says.
"That's something that HTML may eventually be able to do but it has a long way to go. Flash will pioneer those most advanced cases like HD feature-rich cinema graphic content that needs to be copy-protected."
Ideally of course the end user will not notice, or even care, that the web is being powered by a new updated set of code.
If HTML5 does its job properly, no-one outside the web development community will ever know about it!
PRO: HTML5
Websites that update in real time - use "Web Socket"; No longer need serious engineering teams to do this
More convenient to produce captivating photo/video displays for marketing purposes
The "plug-in needed" requirement is removed when using HTML5
The ability for a cross-platform experience
You can load a website on a mobile device, PC or TV and it will look exactly the same and follow through on functionality.
Immediate Challenges:
Mobile devices have different requirements than PCs
Adobe will continue to develop Flash just not for mobile devices
HTML5 offers little in the way of copyright protection
It can take years for consumers to update from old browsers (which don't support HTML5 standards)
Future:
Browsers have to upgrade much more frequently to keep up with newer HTML5
Subscribe to:
Posts (Atom)