You are on page 1of 20

HTML5 video vs

Flash video
(Why HTML5 video won’t kill Flash video)
By Mathew Fabb
Who Am I
 I’m a Flash/Flex developer that has been
doing Flash work from the tail-end of
Flash 4 and the beginning of Flash 5
 I am currently a Flex developer at
StickerYou
 I was a technical editor on Wrox’s
Professional Flex 3
 Authored by:
Joseph Balderson (aka JoeFlash),
Andrew Trice, Peter Ent,
Joe Berkovitz, Tom Sugden,
Todd Prekaski, David Hassoun, and
Jun Heider.
 I’m NOT a video expert
HTML5 Primer
 HTML Timeline:
 HTML 4.0
 December 1997 - W3C Recommendation
 HTML 4.01
 December 1999 - W3C Recommendation
 XHTML 1.0
 January 2000 - W3C Recommendation
 XHTML 1.1
 May 31, 2001 - W3C Recommendation
 XHTML 2.0
 Is still a working draft and likely will never be implemented by
browsers
 In July 2009 the W3C let the Working Group’s charter expire
HTML5 spec
 Some were not happy with the direction of
XHTML 2
 Apple, Mozilla and Opera founded the
WHATWG (Web Hypertext Application
Technology Working Group) and started work
on HTML5 in 2004
 April 2007 WHATWG convinced the W3C to
start a new HTML working group (HTML WG)
and implement the HTML5 as it’s starting
point
HTML5 spec
 Stages of the spec are:
 First Public Working Draft
 W3C is scheduled to reach in June 2007
 Reached it in February 2008
 Last Call Working
 W3C is scheduled to reach in Q2 of 2008
 WHATWG though it would be reached by October 2009
 Still waiting to reach this stage
 Candidate Recommendation
 W3C is scheduled Q3 of 2008
 Proposed Recommendation
 W3C is scheduled Q3 of 2008
 Recommendation
 W3C is scheduled Q3 of 2010
HTML5 spec
 Currently waiting Last Call Working Draft
 Then there's Candidate Recommendation, Proposed
Recommendation, Recommendation
 It's estimated by HTMLWG that the final recommendation
will be reached in 2012 to 2013.
 It's estimated by the WHATWG that the final
recommendation will be reached by…

 2022
 or later!
 Currently lots of conflict and politics between the W3C’s
HTML WG and WHATWG
HTML5 politics
 Comic: “HTML5 is a Mess” by CSSquirell.com
HTML5 politics
 Comic: “Larry Ate HTML5” by CSSquirell.com
HTML5 video
 That said, currently pieces of HTML5 are “ready” today available
in certain browsers
 This includes video tag
 The following browsers support HTML5 video tag:
 Mozilla Firefox 3.5+
 Google Chrome 3.0+
 Apple Safari 3.2+
 Opera 10.50 beta
 Will IE9 support the video tag?
 Microsoft has gotten more involved with the HTML5 spec as of Au
 Microsoft have revealed that they will support more of the HTML5
, but it’s unknown how far they will go
HTML5 video codecs
 Big issue with the HTML5 spec is that it does not refer which video
codec to use
 Currently there’s a debate between Ogg / Theora and h.264 codecs
 HTML5 browsers that support Ogg / Theora:
 Mozilla Firefox 3.5+
 Google Chrome 3.0+
 Opera 10.50 beta
 HTML5 browsers that support H.264:
 Google Chrome 3.0+
 Apple Safari 3.1+
 If IE eventually supports the video tag, which video codec will they
support?
 H.264? Ogg / Theora? Or perhaps VC-1?
HTML5 video code
 Basic example:
<video width="640" height="360" poster="poster_image.jpg">
<source src="video_file.ogv" type="video/ogg">
<source src="video_file.mp4" type="video/mp4">
</video>

 Fall back to Flash
<video width="640" height="360" poster="poster_image.jpg">
<source src="video_file.ogv" type="video/ogg">
<source src="video_file.mp4" type="video/mp4">
<object width="640" height="384" type="application/x-shockwave-flash“>
<param name="movie" value="flash.swf?imageposter_image&file=video_file.mp4" />
<embed width="640" height="384" type="application/x-shockwave-flash">
src="flash.swf?imageposter_image&file=video_file.mp4" />
</object>
</video>

 Video for everybody!
HTML5 video vs Flash video
 Why HTML5 video won’t kill Flash video
 Many obstacles in the way of HTML5 video (full
browser support, codecs, etc.)
 While this obstacles are overcome Adobe
continues to innovate and add more to Flash
video
 There are important features that Flash video has,
which the HTML5 video tag does not
 Browsers will catch up on some of the features,
while others I’m not sure if the gap will ever close
 HTML5 will likely have it’s place in the market, but just won’t
completely replace all Flash video
Protecting the content
 Top reason why plugins will continued
to be used by content owners for video
 Flash has RTMPE and other variations
to protect video content steams without
them catching on the client
 HTML video tag points to the video source,
which can easily be downloaded
 Most browsers include “Save Video As…”
when user right-clicks over a video element
 Feature not important to YouTube videos,
but very important tv networks and movie studios
 Sites like Hulu, Amazon On Demand, HBOGo will NEVER see a HTML5 version
unless:
 Change in content owners perspective on ownership (not likely)
 Browsers actually manage to get a protective system together
 Unlikely since they can’t even agree on codecs
Full screen video
 Flash has been doing full-screen since Flash Player 9 Update 1 (Nov. 2006)
 Full screen has gotten better, faster in later versions of Flash, taking advantage of
multi- core processors to decode video
 Full screen video support is available in:
 Firefox 3.6
 Webkit nightly builds
 (aka Safari & Chrome support coming soon)
 The HTML5 spec says this about full screen video:
 “User agents should not provide a public API to cause videos to be shown full-
screen. A script, combined with a carefully crafted video file, could trick the user
into thinking a system-modal dialog had been shown, and prompt the user for a
password. There is also the danger of "mere" annoyance, with pages launching
full-screen videos when links are clicked or pages navigated. Instead, user-
agent-specific interface features may be provided to easily allow the user to
obtain a full-screen playback mode.”
 This means no JavaScript API for full screen video
 Web creators won’t be able to add a full screen button such
as it’s done in Flash
Full screen video
 Instead browsers vendors will be responsible for an
interface (roll-over button/icon, right-click, etc.) to
allow users to go to full screen,
 Full screen video access will likely be accessed
differently from browser to browser
 Here are also some full screen video JavaScript
hacks that open a chromeless window with video
element at 100% of the space
 Plus there’s some add-ons for the current version of
Chrome and Firefox 3.5 to allow full screen video
GPU
 Flash Player 10.1 now supports using the GPU for video
decoding for certain hardware on Windows machines
 Specific hardware from NVIDIA, AMD/ATI, Intel, Broadcom
with likely growing support in later Flash versions.
 See Flash Player 10.1 release notes for all supported systems
 Mobile devices that include Flash Player 10.1 should all
support GPU video decoding
 Macs are not supported because there’s no public API
 Linux is not support because here’s no clear API
GPU
 HTML5 video currently doesn’t use the GPU on
Windows or Linux
 Mac is a different story, as browsers use
QuickTime to render video, which has access to
the GPU
 This has resulted in Mac users pointing out how
much less CPU HTML5 video takes compared to
Flash
 However, Linux and Windows users using
HTML5 video have seen big jumps in CPU
 End result is no video solution currently gives
GPU speed boost to all users
Peer-to-peer video
 Adobe was able to add P2P to Flash thanks to the buy of Amicima)
 Microsoft’s Silverlight doesn’t even have this feature yet
 Although there is an additional plugin (not from Microsoft) to add this to Silverlight
 With Flash Player 10.1 , there’s now the capability to multicast
 This will radically decrease
the price of creating live
streaming events
 This will likely mean a lot
more live streaming events
 Perhaps browsers will one
day add this feature, but
it doesn’t even seem to be
on the radar yet
 Of course lots of potential in
web applications for sharing
video in small groups
Other Flash video features
 Adaptive-bit-rates
 Introduced with Flash Player 10.1
 Apple has added similar functionality to the iPhone OS 3.0
 Cue points
 Might be able to do with tracking the video time changing in JavaScript and then
calling functions when certain times are meet
 Currently doesn’t seem to be a clean way to do it (at least that I could find online)
 Alpha video (aka green screen)
 Can’t find any info about this being supported in the video tag any time soon
 Currently not available in browsers (but could be in the future) but now available in Flash
Player 10.1:
 Stream reconnect
 Better buffering to help seeking video faster
Links!
 Video for EVERYBODY! – Great for using HTML5 video and Flash video together
 CSSquirel for commentary and comics on the web standards world and more.
 Last Week In HTML5 - At times NSFW and very immature, but still provides a good look at the crazy politics of the HTML5
world.
 Adobe's John Dowdell’s blog, which occasionally contains interesting commentary on HTML5.
 WHATWG blog
 "When can I use...” a chart of when new HTML features will be supported across all major browsers
 Adobe Stratus 2 - Adobe's new server that enables peer-to-peer connectivity in Flash.
 WHATWG FAQ
 W3C's HTML working group schedule for HTML5
 Adobe's article on How to protect video content explaining how RTMPE works
 Just for the fun of it... IsHTML5ReadyYet.com

NOTE: it’s good to never believe articles at face value, especially those without a proper source. It’s quite surprising how
often tech news gets the details wrong. A lot of what I learned is because articles seemed off and I ended up digging for
more details.

 My own personal blog, can be found at MatthewFabb.com where I hope to turn these slides into a longer blog posting
eventually. Final last plug for StickerYou! It includes a Flex 4 app, where you can
create your own custom die-cut vinyl stickers.