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

Html5 Video Vs Flash Video presentation

on

  • 8,639 views

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.

Statistics

Views

Total Views
8,639
Views on SlideShare
7,983
Embed Views
656

Actions

Likes
2
Downloads
139
Comments
1

5 Embeds 656

http://labs.9lessons.info 555
http://www.slideshare.net 71
http://pbw2010.wordpress.com 28
http://163.21.26.21 1
http://www.brijj.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Html5 Video Vs Flash Video presentation Presentation Transcript

  • 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 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
  • 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=&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!
  • 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 &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
  • 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
    • &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 .