HTML5 video vs Flash video (Why HTML5 video won’t kill Flash video) By Mathew Fabb
Who  Am I <ul><li>I’m a Flash/Flex developer that has been doing Flash work from the tail-end of Flash 4 and the beginning...
HTML5 Primer <ul><li>HTML Timeline: </li></ul><ul><ul><li>HTML 4.0  </li></ul></ul><ul><ul><ul><li>December 1997 - W3C Rec...
HTML5 spec <ul><li>Some were not happy with the direction of XHTML 2 </li></ul><ul><li>Apple, Mozilla and Opera founded th...
HTML5 spec <ul><li>Stages of the spec are: </li></ul><ul><ul><li>First Public Working Draft </li></ul></ul><ul><ul><ul><li...
HTML5 spec <ul><li>Currently waiting Last Call Working Draft </li></ul><ul><li>Then there's Candidate Recommendation, Prop...
HTML5 politics <ul><li>Comic: “HTML5 is a Mess” by CSSquirell.com </li></ul>
HTML5 politics <ul><li>Comic: “Larry Ate HTML5” by CSSquirell.com </li></ul>
HTML5 video <ul><li>That said, currently pieces of HTML5 are  “ready” today  available in certain browsers </li></ul><ul><...
HTML5 video codecs <ul><li>Big issue with the HTML5 spec is that it does not refer which video codec to use </li></ul><ul>...
HTML5 video code <ul><li>Basic example: </li></ul><ul><ul><li><video width=&quot;640&quot; height=&quot;360&quot; poster=&...
HTML5 video vs Flash video <ul><li>Why HTML5 video won’t kill Flash video </li></ul><ul><ul><li>Many obstacles in the way ...
Protecting the content <ul><li>Top reason why plugins will continued  to be used by content owners for video </li></ul><ul...
Full screen video <ul><li>Flash has been doing full-screen since Flash Player 9 Update 1 (Nov. 2006) </li></ul><ul><li>Ful...
Full screen video <ul><li>Instead browsers vendors will be responsible for an interface (roll-over button/icon, right-clic...
GPU <ul><li>Flash Player 10.1 now supports using the GPU for video decoding for certain hardware on Windows machines </li>...
GPU <ul><li>HTML5 video currently doesn’t use the GPU on Windows or Linux </li></ul><ul><li>Mac is a different story, as b...
Peer-to-peer video <ul><li>Adobe was able to add  P2P to Flash thanks to the buy of Amicima) </li></ul><ul><li>Microsoft’s...
Other Flash video features <ul><li>Adaptive-bit-rates </li></ul><ul><ul><li>Introduced with Flash Player 10.1 </li></ul></...
Links! <ul><li>Video for EVERYBODY!  – Great for using HTML5 video and Flash video together </li></ul><ul><li>CSSquirel  f...
Upcoming SlideShare
Loading in...5
×

Html5 Video Vs Flash Video presentation

6,938

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,938
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
142
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • http://lastweekinhtml5.blogspot.com/
  • http://lastweekinhtml5.blogspot.com/
  • 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
  • Html5 Video Vs Flash Video presentation

    1. 1. HTML5 video vs Flash video (Why HTML5 video won’t kill Flash video) By Mathew Fabb
    2. 2. Who Am I <ul><li>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 </li></ul><ul><li>I am currently a Flex developer at StickerYou </li></ul><ul><li>I was a technical editor on Wrox’s Professional Flex 3 </li></ul><ul><ul><li>Authored by: Joseph Balderson (aka JoeFlash), Andrew Trice , Peter Ent , Joe Berkovitz , Tom Sugden , Todd Prekaski , David Hassoun , and Jun Heider . </li></ul></ul><ul><li>I’m NOT a video expert </li></ul>
    3. 3. HTML5 Primer <ul><li>HTML Timeline: </li></ul><ul><ul><li>HTML 4.0 </li></ul></ul><ul><ul><ul><li>December 1997 - W3C Recommendation </li></ul></ul></ul><ul><ul><li>HTML 4.01 </li></ul></ul><ul><ul><ul><li>December 1999 - W3C Recommendation </li></ul></ul></ul><ul><ul><li>XHTML 1.0 </li></ul></ul><ul><ul><ul><li>January 2000 - W3C Recommendation </li></ul></ul></ul><ul><ul><li>XHTML 1.1 </li></ul></ul><ul><ul><ul><li>May 31, 2001 - W3C Recommendation </li></ul></ul></ul><ul><ul><li>XHTML 2.0 </li></ul></ul><ul><ul><ul><li>Is still a working draft and likely will never be implemented by browsers </li></ul></ul></ul><ul><ul><ul><li>In July 2009 the W3C let the Working Group’s charter expire </li></ul></ul></ul>
    4. 4. HTML5 spec <ul><li>Some were not happy with the direction of XHTML 2 </li></ul><ul><li>Apple, Mozilla and Opera founded the WHATWG (Web Hypertext Application Technology Working Group) and started work on HTML5 in 2004 </li></ul><ul><li>April 2007 WHATWG convinced the W3C to start a new HTML working group (HTML WG) and implement the HTML5 as it’s starting point </li></ul>
    5. 5. HTML5 spec <ul><li>Stages of the spec are: </li></ul><ul><ul><li>First Public Working Draft </li></ul></ul><ul><ul><ul><li>W3C is scheduled to reach in June 2007 </li></ul></ul></ul><ul><ul><ul><li>Reached it in February 2008 </li></ul></ul></ul><ul><ul><li>Last Call Working </li></ul></ul><ul><ul><ul><li>W3C is scheduled to reach in Q2 of 2008 </li></ul></ul></ul><ul><ul><ul><li>WHATWG though it would be reached by October 2009 </li></ul></ul></ul><ul><ul><ul><li>Still waiting to reach this stage </li></ul></ul></ul><ul><ul><li>Candidate Recommendation </li></ul></ul><ul><ul><ul><li>W3C is scheduled Q3 of 2008 </li></ul></ul></ul><ul><ul><li>Proposed Recommendation </li></ul></ul><ul><ul><ul><li>W3C is scheduled Q3 of 2008 </li></ul></ul></ul><ul><ul><li>Recommendation </li></ul></ul><ul><ul><ul><li>W3C is scheduled Q3 of 2010 </li></ul></ul></ul>
    6. 6. HTML5 spec <ul><li>Currently waiting Last Call Working Draft </li></ul><ul><li>Then there's Candidate Recommendation, Proposed Recommendation, Recommendation </li></ul><ul><li>It's estimated by HTMLWG that the final recommendation will be reached in 2012 to 2013. </li></ul><ul><li>It's estimated by the WHATWG that the final recommendation will be reached by… </li></ul><ul><ul><li>2022 </li></ul></ul><ul><ul><ul><li>or later! </li></ul></ul></ul><ul><li>Currently lots of conflict and politics between the W3C’s HTML WG and WHATWG </li></ul>
    7. 7. HTML5 politics <ul><li>Comic: “HTML5 is a Mess” by CSSquirell.com </li></ul>
    8. 8. HTML5 politics <ul><li>Comic: “Larry Ate HTML5” by CSSquirell.com </li></ul>
    9. 9. HTML5 video <ul><li>That said, currently pieces of HTML5 are “ready” today available in certain browsers </li></ul><ul><ul><li>This includes video tag </li></ul></ul><ul><li>The following browsers support HTML5 video tag: </li></ul><ul><ul><li>Mozilla Firefox 3.5+ </li></ul></ul><ul><ul><li>Google Chrome 3.0+ </li></ul></ul><ul><ul><li>Apple Safari 3.2+ </li></ul></ul><ul><ul><li>Opera 10.50 beta </li></ul></ul><ul><li>Will IE9 support the video tag? </li></ul><ul><ul><li>Microsoft has gotten more involved with the HTML5 spec as of August 2009. </li></ul></ul><ul><ul><li>Microsoft have revealed that they will support more of the HTML5 spec in IE9 , but it’s unknown how far they will go </li></ul></ul>
    10. 10. HTML5 video codecs <ul><li>Big issue with the HTML5 spec is that it does not refer which video codec to use </li></ul><ul><li>Currently there’s a debate between Ogg / Theora and h.264 codecs </li></ul><ul><li>HTML5 browsers that support Ogg / Theora: </li></ul><ul><ul><li>Mozilla Firefox 3.5+ </li></ul></ul><ul><ul><li>Google Chrome 3.0+ </li></ul></ul><ul><ul><li>Opera 10.50 beta </li></ul></ul><ul><li>HTML5 browsers that support H.264: </li></ul><ul><ul><li>Google Chrome 3.0+ </li></ul></ul><ul><ul><li>Apple Safari 3.1+ </li></ul></ul><ul><li>If IE eventually supports the video tag, which video codec will they support? </li></ul><ul><ul><li>H.264? Ogg / Theora? Or perhaps VC-1 ? </li></ul></ul>
    11. 11. HTML5 video code <ul><li>Basic example: </li></ul><ul><ul><li><video width=&quot;640&quot; height=&quot;360&quot; poster=&quot;poster_image.jpg&quot;> </li></ul></ul><ul><ul><li><source src=&quot;video_file.ogv&quot; type=&quot;video/ogg&quot;> </li></ul></ul><ul><ul><li><source src=&quot;video_file.mp4&quot; type=&quot;video/mp4&quot;> </li></ul></ul><ul><ul><li></video> </li></ul></ul><ul><li>Fall back to Flash </li></ul><ul><li><video width=&quot;640&quot; height=&quot;360&quot; poster=&quot;poster_image.jpg&quot;> </li></ul><ul><li><source src=&quot;video_file.ogv&quot; type=&quot;video/ogg&quot;> </li></ul><ul><li><source src=&quot;video_file.mp4&quot; type=&quot;video/mp4&quot;> </li></ul><ul><li><object width=&quot;640&quot; height=&quot;384&quot; type=&quot;application/x-shockwave-flash“> </li></ul><ul><li><param name=&quot;movie&quot; value=&quot;flash.swf?imageposter_image&file=video_file.mp4&quot; /> </li></ul><ul><li><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; /> </li></ul><ul><li></object> </li></ul><ul><li></video> </li></ul><ul><li>Video for everybody! </li></ul>
    12. 12. HTML5 video vs Flash video <ul><li>Why HTML5 video won’t kill Flash video </li></ul><ul><ul><li>Many obstacles in the way of HTML5 video (full browser support, codecs, etc.) </li></ul></ul><ul><ul><ul><li>While this obstacles are overcome Adobe continues to innovate and add more to Flash video </li></ul></ul></ul><ul><ul><li>There are important features that Flash video has, which the HTML5 video tag does not </li></ul></ul><ul><ul><ul><li>Browsers will catch up on some of the features, while others I’m not sure if the gap will ever close </li></ul></ul></ul><ul><ul><li>HTML5 will likely have it’s place in the market, but just won’t completely replace all Flash video </li></ul></ul>
    13. 13. Protecting the content <ul><li>Top reason why plugins will continued to be used by content owners for video </li></ul><ul><li>Flash has RTMPE and other variations to protect video content steams without them catching on the client </li></ul><ul><li>HTML video tag points to the video source, which can easily be downloaded </li></ul><ul><ul><li>Most browsers include “Save Video As…” when user right-clicks over a video element </li></ul></ul><ul><li>Feature not important to YouTube videos, but very important tv networks and movie studios </li></ul><ul><li>Sites like Hulu, Amazon On Demand, HBOGo will NEVER see a HTML5 version unless: </li></ul><ul><ul><li>Change in content owners perspective on ownership (not likely) </li></ul></ul><ul><ul><li>Browsers actually manage to get a protective system together </li></ul></ul><ul><ul><ul><li>Unlikely since they can’t even agree on codecs </li></ul></ul></ul>
    14. 14. Full screen video <ul><li>Flash has been doing full-screen since Flash Player 9 Update 1 (Nov. 2006) </li></ul><ul><li>Full screen has gotten better, faster in later versions of Flash, taking advantage of multi- core processors to decode video </li></ul><ul><li>Full screen video support is available in: </li></ul><ul><ul><li>Firefox 3.6 </li></ul></ul><ul><ul><li>Webkit nightly builds </li></ul></ul><ul><ul><ul><li>(aka Safari & Chrome support coming soon) </li></ul></ul></ul><ul><li>The HTML5 spec says this about full screen video : </li></ul><ul><ul><li>“ 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.” </li></ul></ul><ul><li>This means no JavaScript API for full screen video </li></ul><ul><li>Web creators won’t be able to add a full screen button such as it’s done in Flash </li></ul>
    15. 15. Full screen video <ul><li>Instead browsers vendors will be responsible for an interface (roll-over button/icon, right-click, etc.) to allow users to go to full screen, </li></ul><ul><li>Full screen video access will likely be accessed differently from browser to browser </li></ul><ul><li>Here are also some full screen video JavaScript hacks that open a chromeless window with video element at 100% of the space </li></ul><ul><li>Plus there’s some add-ons for the current version of Chrome and Firefox 3.5 to allow full screen video </li></ul>
    16. 16. GPU <ul><li>Flash Player 10.1 now supports using the GPU for video decoding for certain hardware on Windows machines </li></ul><ul><li>Specific hardware from NVIDIA, AMD/ATI, Intel, Broadcom with likely growing support in later Flash versions. </li></ul><ul><li>See Flash Player 10.1 release notes for all supported systems </li></ul><ul><li>Mobile devices that include Flash Player 10.1 should all support GPU video decoding </li></ul><ul><li>Macs are not supported because there’s no public API </li></ul><ul><li>Linux is not support because here’s no clear API </li></ul>
    17. 17. GPU <ul><li>HTML5 video currently doesn’t use the GPU on Windows or Linux </li></ul><ul><li>Mac is a different story, as browsers use QuickTime to render video, which has access to the GPU </li></ul><ul><li>This has resulted in Mac users pointing out how much less CPU HTML5 video takes compared to Flash </li></ul><ul><li>However, Linux and Windows users using HTML5 video have seen big jumps in CPU </li></ul><ul><li>End result is no video solution currently gives GPU speed boost to all users </li></ul>
    18. 18. Peer-to-peer video <ul><li>Adobe was able to add P2P to Flash thanks to the buy of Amicima) </li></ul><ul><li>Microsoft’s Silverlight doesn’t even have this feature yet </li></ul><ul><ul><li>Although there is an additional plugin (not from Microsoft) to add this to Silverlight </li></ul></ul><ul><li>With Flash Player 10.1 , there’s now the capability to multicast </li></ul><ul><ul><li>This will radically decrease the price of creating live streaming events </li></ul></ul><ul><ul><li>This will likely mean a lot more live streaming events </li></ul></ul><ul><li>Perhaps browsers will one day add this feature, but it doesn’t even seem to be on the radar yet </li></ul><ul><li>Of course lots of potential in web applications for sharing video in small groups </li></ul>
    19. 19. Other Flash video features <ul><li>Adaptive-bit-rates </li></ul><ul><ul><li>Introduced with Flash Player 10.1 </li></ul></ul><ul><ul><li>Apple has added similar functionality to the iPhone OS 3.0 </li></ul></ul><ul><li>Cue points </li></ul><ul><ul><li>Might be able to do with tracking the video time changing in JavaScript and then calling functions when certain times are meet </li></ul></ul><ul><ul><ul><li>Currently doesn’t seem to be a clean way to do it (at least that I could find online) </li></ul></ul></ul><ul><li>Alpha video (aka green screen) </li></ul><ul><ul><li>Can’t find any info about this being supported in the video tag any time soon </li></ul></ul><ul><li>Currently not available in browsers (but could be in the future) but now available in Flash Player 10.1: </li></ul><ul><ul><li>Stream reconnect </li></ul></ul><ul><ul><li>Better buffering to help seeking video faster </li></ul></ul>
    20. 20. Links! <ul><li>Video for EVERYBODY! – Great for using HTML5 video and Flash video together </li></ul><ul><li>CSSquirel for commentary and comics on the web standards world and more. </li></ul><ul><li>Last Week In HTML5 - At times NSFW and very immature, but still provides a good look at the crazy politics of the HTML5 world. </li></ul><ul><li>Adobe's John Dowdell’s blog , which occasionally contains interesting commentary on HTML5. </li></ul><ul><li>WHATWG blog </li></ul><ul><li>&quot;When can I use...” a chart of when new HTML features will be supported across all major browsers </li></ul><ul><li>Adobe Stratus 2 - Adobe's new server that enables peer-to-peer connectivity in Flash. </li></ul><ul><li>WHATWG FAQ </li></ul><ul><li>W3C's HTML working group schedule for HTML5 </li></ul><ul><li>Adobe's article on How to protect video content explaining how RTMPE works </li></ul><ul><li>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. </li></ul><ul><li>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 . </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×