Flash vs. HTML5 for Streaming Video

The geeksphere has been ablaze regarding Flash on mobile devices for a while now. The argument is that Apple has openly rejected Flash from their iPhone/iPod-Touch/iPad products, claiming that the Flash plugin is a resource hog that uses up too much CPU and hence drains the battery. Apple added fuel to the flame by also claiming it was full of security holes and that Adobe in general was lazy. Meanwhile, Android, Symbian, Windows Phone 7, Blackberry and Bada are all trying to get Flash going, although the release of the first full mobile Flash player has been delayed yet again.

So as of now, Apple mobile devices have no Flash support whatsoever, meaning any website with Flash streaming video (Youtube, Hulu, etc.) or Flash games will not work. Whereas other mobile devices have limited Flash support from legacy Flash players, but most of these are not capable of streaming videos or playing recent Flash games either. Everyone is still waiting for Adobe to come out with 10.1.

The Apple camp argues that there's no need for Flash since streaming videos can be delivered via standards compliant HTML5 encoding. Website developers just need to embrace this new format and dump Flash (or have HTML5 equivalent pages). This will be more friendly to mobile device resource usage and battery life. The non-Apple camp argues that Flash dominates most of the interactive web and they want to access this content from their devices now, not in 5 years time when people get around to using HTML5.

Personally I don't like Flash all that much either and I think open-standards are a better alternative. I was curious about the resource usage argument though, as it seems logical that streaming video, regardless of the encoding format, will consume a lot of CPU and memory, hence draining battery. So I decided to do a little experiment. Youtube already has HTML5 support in beta phase, which you can opt-in for. This allows for making direct comparisons between Flash and HTML5 on a desktop.

First I used regular Youtube with the Flash player to open up 5 different videos in different tabs in Google Chrome. I then used Chrome's internal task manager to monitor memory and CPU usage, first while the videos were playing, and second while all 5 videos were paused. The results are shown in the two screenshots below:



Next, I turned on Youtube HTML5 support, reloaded all the tabs, and repeated the same procedure. The Playing vs. Paused screenshots are shown below.




A quick comparison of results reveals that Flash playing consumes 194MB of memory and 46% of CPU usage. While Flash paused consumes 180MB and only 6% CPU usage. HTML 5 playing consumes 160MB of memory and 33% CPU usage. While HTML5 paused consumes only 131MB of memory and 0% CPU usage.

Note that I only ran this experiment once so results may be skewed by other external factors that I have not accounted for. Also, depending on when I took the screenshots, some videos may have finished downloading in one case but not in the other, which would further skew some values.

This limited test does show however that the desktop Flash plugin is indeed more resource hungry compared to HTML5 (at least for streaming Youtube videos, in Google Chrome, under Windows 7, x64). However, the difference is not all that great (Flash playing consumes roughly 17% more memory and 13% more CPU). Streaming video is a resource intensive task in general as it requires fast download of content and real-time decoding of the video and audio streams. Doing this on a mobile device will drain the battery significantly faster regardless of how it's done. The real difference will come from whoever implements efficient hardware decoding of these AV streams to avoid taxing the CPU.

Comments

  1. Hey.

    Very, very interesting!

    I've been wondering what was going to happen with Flash/HTML5. I looked at your images, but I can't seem to understand them.
    In the top two images (the Flash ones), Youtube uses 78.000k (what unit is this by the way - kilobyte of what?) and the Flash plugin uses 100.000k - so 178.000k. But in the bottom two images (HTML5) it uses 150.000k. I just don't understand the summary. How do you reach the numbers 33.3% and 700%?

    Thanks! Please write some more about HTML5... :-)

    ReplyDelete
  2. To be entirely honest...I can't remember how I calculated those percentages either. I'll update the article to make it clearer.

    ReplyDelete
  3. Thank you for the link. :).Interesting to read.You can embed any audio fromhtml5 media player you can upload any audio and then grab the embed code of that audio and embed it anywhere.

    ReplyDelete

Post a Comment

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word