Your SlideShare is downloading. ×
Html5 Video Vs Flash Video presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 Video Vs Flash Video presentation


Published on

The slides from a presentation given for the Toronto Flash user group comparing HTML5 video to Flash video.

The slides from a presentation given for the Toronto Flash user group comparing HTML5 video to Flash video.

Published in: Technology

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • There are various plugins that add IE support
  • If browser supports HTML5 but does not support any of the video codecs, the video will fail
  • Transcript

    • 1. HTML5 video vs Flash video (Why HTML5 video won’t kill Flash video) By Mathew Fabb
    • 2. 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
    • 3. 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
    • 4. 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
    • 5. 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
    • 6. 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
    • 7. HTML5 politics
      • Comic: “HTML5 is a Mess” by
    • 8. HTML5 politics
      • Comic: “Larry Ate HTML5” by
    • 9. 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 August 2009.
        • Microsoft have revealed that they will support more of the HTML5 spec in IE9 , but it’s unknown how far they will go
    • 10. 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 ?
    • 11. HTML5 video code
      • Basic example:
        • <video width=&quot;640&quot; height=&quot;360&quot; poster=&quot;poster_image.jpg&quot;>
        • <source src=&quot;video_file.ogv&quot; type=&quot;video/ogg&quot;>
        • <source src=&quot;video_file.mp4&quot; type=&quot;video/mp4&quot;>
        • </video>
      • Fall back to Flash
      • <video width=&quot;640&quot; height=&quot;360&quot; poster=&quot;poster_image.jpg&quot;>
      • <source src=&quot;video_file.ogv&quot; type=&quot;video/ogg&quot;>
      • <source src=&quot;video_file.mp4&quot; type=&quot;video/mp4&quot;>
      • <object width=&quot;640&quot; height=&quot;384&quot; type=&quot;application/x-shockwave-flash“>
      • <param name=&quot;movie&quot; value=&quot;flash.swf?imageposter_image&file=video_file.mp4&quot; />
      • <embed width=&quot;640&quot; height=&quot;384&quot; type=&quot;application/x-shockwave-flash&quot;> src=&quot;flash.swf?imageposter_image&file=video_file.mp4&quot; />
      • </object>
      • </video>
      • Video for everybody!
    • 12. 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
    • 13. 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
    • 14. 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 &quot;mere&quot; 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
    • 15. 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
    • 16. 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
    • 17. 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
    • 18. 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
    • 19. 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
    • 20. 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
      • &quot;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... 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 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 .