Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5, Flash, and the Battle For Faster Cat Videos

12,216 views

Published on

HTML5; it's new, it's awesome, and it's powerful, but can it take down the champ of video distribution, Flash. Which technology's got the ability to bring cat video to the next level? This talk covers the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.

Published in: Technology

HTML5, Flash, and the Battle For Faster Cat Videos

  1. HTML5, Flash and the Battle forFaster Cat VideosBy YouTubes Greg Schechter and Phil Harnish
  2. Greg Schechter Phil HarnishThe Web Warrior Sr. Play Button Engschechter@google.com philharnish@google.com
  3. HTML + JS + CSS + Awesomeness
  4. HTML5Offline File Access Multimedia Performance Presentation Graphics Storage
  5. HTML5Offline File Access Multimedia Performance Presentation Graphics Storage
  6. Translation
  7. HTML5 ~= By geishaboy500http://www.flickr. com/photos/geishaboy500/3183872667/
  8. 99% connected desktop penetration? http://www.adobe.com/products/player_census/flashplayer/
  9. Why HTML5?
  10. HTML5 vs FlashFeatures Accessibility Device-ability Security Embeds API
  11. Round 1: Features http://www.flickr. com/photos/zipckr/4624150058/
  12. Why Flash?Features missing in HTML5● Content protection
  13. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access
  14. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access
  15. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video
  16. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video ○ Hardware accelerated HD cat videos! ○ **WebKit has a JavaScript API
  17. Why Flash?WebKit Fullscreen APIvar elem = document.getElementById("my-element");elem.onwebkitfullscreenchange = function() {console.log ("We went fullscreen!");};elem.webkitRequestFullScreen();
  18. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **WebKit has a JavaScript API
  19. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **WebKit has a JavaScript API● Consistent format support
  20. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **WebKit has a JavaScript API● Consistent format support ○ HTML5 needs to support both H.264 and WebM
  21. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **WebKit has a JavaScript API● Consistent format support ○ HTML5 needs to support both H.264 and WebM● Cross platform consistency****
  22. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec
  23. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation
  24. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity
  25. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity● Accessibility
  26. Why HTML5?<video> Expectations http://imgs.xkcd.com/comics/in_ur_reality.png
  27. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity● Accessibility ○ User agents can have special video handling
  28. Round 2: Device-abilityBy dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
  29. Why HTML5?HTML5 Capable Browsers
  30. Why HTML5?Flash Support vs. HTML5 Support
  31. Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices
  32. Why HTML5?
  33. When HTML5?
  34. Primary Goal:Recover playbacks that would be lost without flash
  35. Our Solution
  36. <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
  37. When HTML5?<iframe> Embed● Give the user HTML5 or Flash based on device and user preferences.● Allows for better mobile support.● Offers an "it just works" experience.
  38. When HTML5?When does the user get HTML5?
  39. When HTML5? Detecting HTML5var videoElement = document.createElement(video);if (videoElement && videoElement.canPlayType && (videoElement.canPlayType(video/mp4; codecs="avc1.42001E, mp4a.40.2") || videoElement.canPlayType(video/webm; codecs="vp8.0, vorbis"))) { // Sweet, we can use HTML5!}
  40. When HTML5?When does the user get HTML5?
  41. Round 3: PerformanceBy Two Hawks Eyehttp://www.flickr.com/photos/mycoolpics/92033686/
  42. Player Start TimeFlash 200msHTML5 TODO(schechter): Add csi screen captures
  43. iframe Embed Time Till Thumbnail VisibleFlash - 5.1sHTML5 - 1.4s *Collected data shows faster load times than this control environment, but the comparison is actuate.
  44. Get Video Time
  45. Get Video Time● HTML5: ○ Opera is Awesome ■ 200ms ahead of the pack● Flash: IE9 and Opera are the leaders ○ 200ms faster● HTML5 is almost always faster than Flash ○ 300ms - 350ms faster ○ IE9 is an exception ■ IE9 Flash is slightly faster than IE9 HTML5
  46. Video Start TimeHTML5Flash 2s
  47. So why is flash so fast?
  48. Make Assumptions
  49. Making Assumptions● Most users have a recent version of flash● Thus we can optimistically embed the most common case and do version checking and updating after a script loads● 250ms improvement to flash start time
  50. Preload Video Connection
  51. Preload Video Connection ● Resolves DNS while page is rendering ● Maintains an open connection ● 200ms improvement<head> <script> var img = new Image(); img.src = videoConnectionUrl; </script></head>
  52. What about embeds?
  53. #1 cache
  54. 1. youtube.com/v/di5I49yg7bY 302 redirect2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf3. s.ytimg.com/swf/swf2-hash_url.swf ~150kb
  55. 1. youtube.com/v/di5I49yg7bY 302 2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf 3. s.ytimg.com/swf/swf2-hash_url.swfBetter 1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash 2. s.ytimg.com/swf/swf2-hash_url.swf
  56. 1. youtube.com/v/di5I49yg7bY 302 2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf 3. s.ytimg.com/swf/swf2-hash_url.swf 1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash 2. s.ytimg.com/swf/swf2-hash_url.swfBest 1. youtube.com/embed/di5I49yg7bY text/html 2. s.ytimg.com/swf/swf2-hash_url.swf
  57. #2 lazy load
  58. Most embeds are never played.
  59. ● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?
  60. Demo:http://gregthebusker.com/iframedemo.html
  61. Player APIhttp://code.google.com/apis/youtube/getting_started.html#player_apis
  62. The JavaScript APICommunication
  63. The JavaScript APICommunication● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
  64. The JavaScript API Communication ● Poll the URL fragment?http://youtube.com/embed/video_id#fragment ● Messages are one dimensional. ● Polling eats up CPU and is not instant. ● Both directions of communication use the same fragment.
  65. The JavaScript API Communication ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);
  66. The JavaScript API Communication ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin); ● Uses JSON for native encoding and decoding of data. ● No polling. ● Native event listeners. ● Communications are sandboxed per-window. ● Calls are asynchronous.
  67. Conclusion● Flash is still preferred in most places ○ More critical features ○ Deeper reach● HTML5 is awesome ○ Improves every day ○ Greater mobile reach ○ People want it
  68. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter@google.comphilharnish@google.com

×