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

6,857
views

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
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,857
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
141
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • 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 CSSquirell.com
    • 8. HTML5 politics
      • Comic: “Larry Ate HTML5” by CSSquirell.com
    • 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... 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 .

    ×