HTML5, Flash and the Battle forFaster Cat VideosBy YouTubes Greg Schechter and Chris Rhodes
Greg Schechter          Chris RhodesThe Web Warrior        Spline Reticulatorschechter@google.com   chrisrhodes@google.com
HTML + JS + CSS + Awesomeness
HTML5Offline File Access Multimedia Performance       Presentation Graphics Storage
HTML5Offline File Access Multimedia Performance       Presentation Graphics Storage
Translation
HTML5 ~=           By geishaboy500           http://www.flickr.com/photos/geishaboy500/3183872667/
99% connected desktop penetration?  http://www.adobe.com/products/player_census/flashplayer/
Why HTML5?
HTML5 vs FlashFeatures Accessibility "Device-ability"       Security Embeds API
Round 1: Features   http://www.flickr.   com/photos/zipckr/4624150058/
Why Flash?Features missing in HTML5● Content protection
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Webkit Fullscreen APIvar elem = document.getElementById("my-element");document.onwebkitfullscreenchange = functi...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why Flash?Features missing in HTML5● Content protection   ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Ada...
Why HTML5?<video> Expectations● Open source technology   ○ Browser / Player / Codec
Why HTML5?<video> Expectations● Open source technology   ○ Browser / Player / Codec● Lower latency   ○ No plug-in instanti...
Why HTML5?<video> Expectations● Open source technology   ○ Browser / Player / Codec● Lower latency   ○ No plug-in instanti...
Why HTML5?<video> Expectations
Why HTML5?<video> Expectations● Open source technology   ○ Browser / Player / Codec● Lower latency   ○ No plug-in instanti...
Why HTML5?<video> Expectations               http://imgs.xkcd.com/comics/in_ur_reality.png
Why HTML5?<video> Expectations● Open source technology   ○ Browser / Player / Codec● Lower latency   ○ No plug-in instanti...
Please put on your   3D Glasses
By jmettrauxhttp://www.flickr.com/photos/jmettraux/4959258811/
Why HTML5?3D● Flash    ○ Build for graphics    ○ Tools for easy video manipulation        ■ HTML5 would require WebGL or  ...
Round 2: Device-abilityBy dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
Why HTML5?HTML5 Capable Browsers (~75%)
Why HTML5?Flash Support vs. HTML5 Support
Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices
Why HTML5?
When HTML5?
Primary Goal:Recover playbacks that would    be lost without flash
Our Solution
<iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscr...
When HTML5?<iframe> Embed● Give the user HTML5 or Flash based on device and user  preferences.● Allows for better mobile s...
Why an iframe?Other embedding methods● <script>   ○ We need our content to be sandboxed   ○ More than just a video tag● <o...
When HTML5?When does the user get HTML5?
When HTML5?  Detecting HTML5var videoElement = document.createElement(video);if (videoElement && videoElement.canPlayType ...
When HTML5?When does the user get HTML5?
Round 3: PerformanceBy Two Hawks Eyehttp://www.flickr.com/photos/mycoolpics/92033686/
Player Start TimeFlash                   500msHTML5                   (Up from 200ms in Jan 2011) TODO(schechter): Add csi...
iframe Embed Time Till Thumbnail VisibleFlash - 5.1sHTML5 - 1.4s           *Collected data shows faster load times than th...
Get Video Time
Get Video Time● HTML5:    ○ Opera is Awesome       ■ 200ms ahead of the pack● Flash: IE9 and Opera are the leaders   ○ 300...
Video Start TimeHTML5Flash            2.5s
Video Start TimeHTML5Flash                             2.5s ● Firefox closest to catching Flash     ○ HTML5 ~1.0s slower t...
So why is Flash so fast?
Make Assumptions
Making Assumptions● Most users have a recent version of flash● Thus we can optimistically embed the most  common case and ...
Preload Video Connection
Preload Video Connection ● Resolves DNS while page is rendering ● Maintains an open connection ● 200ms improvement<head> <...
What about embeds?
#1 cache
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_u...
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.swfB...
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 ...
#2 lazy load
Most embeds are never played.
● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?
Demo:http://gregthebusker.com/iframedemo.html
Player APIhttp://code.google.com/apis/youtube/getting_started.html#player_apis
The JavaScript APICommunication
The JavaScript APICommunication● Poll the URL fragment?      http://youtube.com/embed/video_id#fragment
The JavaScript API  Communication  ● Poll the URL fragment?http://youtube.com/embed/video_id#fragment ● Messages are one d...
The JavaScript API Communication  ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);
The JavaScript API  Communication  ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);  ● Uses J...
Conclusion● Flash is still preferred in most places   ○ More critical features   ○ Deeper reach● HTML5 is awesome   ○ Impr...
Questions?          can haz question?            By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter...
JS Days HTML5 Flash and the Battle for Faster Cat Videos
Upcoming SlideShare
Loading in …5
×

JS Days HTML5 Flash and the Battle for Faster Cat Videos

2,277 views
2,190 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 will cover the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,277
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JS Days HTML5 Flash and the Battle for Faster Cat Videos

  1. 1. HTML5, Flash and the Battle forFaster Cat VideosBy YouTubes Greg Schechter and Chris Rhodes
  2. 2. Greg Schechter Chris RhodesThe Web Warrior Spline Reticulatorschechter@google.com chrisrhodes@google.com
  3. 3. HTML + JS + CSS + Awesomeness
  4. 4. HTML5Offline File Access Multimedia Performance Presentation Graphics Storage
  5. 5. HTML5Offline File Access Multimedia Performance Presentation Graphics Storage
  6. 6. Translation
  7. 7. HTML5 ~= By geishaboy500 http://www.flickr.com/photos/geishaboy500/3183872667/
  8. 8. 99% connected desktop penetration? http://www.adobe.com/products/player_census/flashplayer/
  9. 9. Why HTML5?
  10. 10. HTML5 vs FlashFeatures Accessibility "Device-ability" Security Embeds API
  11. 11. Round 1: Features http://www.flickr. com/photos/zipckr/4624150058/
  12. 12. Why Flash?Features missing in HTML5● Content protection
  13. 13. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access
  14. 14. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access
  15. 15. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming
  16. 16. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video
  17. 17. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video ○ Hardware accelerated HD cat videos! ○ **API available in webkit and gecko
  18. 18. Why Flash?Webkit Fullscreen APIvar elem = document.getElementById("my-element");document.onwebkitfullscreenchange = function() {// The fullscreen element:// document.webkitFullScreenElement;console.log ("We went fullscreen!");};elem.webkitRequestFullScreen();
  19. 19. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **API available in webkit and gecko
  20. 20. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **API available in webkit and gecko● Consistent format support
  21. 21. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **API available in webkit and gecko● Consistent format support ○ HTML5 needs to support both H.264 and WebM
  22. 22. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video ○ HD, hardware accelerated cat videos! ○ **API available in webkit and gecko● Consistent format support ○ HTML5 needs to support both H.264 and WebM● Cross platform consistency****
  23. 23. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec
  24. 24. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation
  25. 25. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity
  26. 26. Why HTML5?<video> Expectations
  27. 27. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity ○ Power Consumption● Accessibility
  28. 28. Why HTML5?<video> Expectations http://imgs.xkcd.com/comics/in_ur_reality.png
  29. 29. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity ○ Power Consumption● Accessibility ○ User agents can have special video handling
  30. 30. Please put on your 3D Glasses
  31. 31. By jmettrauxhttp://www.flickr.com/photos/jmettraux/4959258811/
  32. 32. Why HTML5?3D● Flash ○ Build for graphics ○ Tools for easy video manipulation ■ HTML5 would require WebGL or Canvas● HTML5 ○ Easy integration with browser and devices ○ Open Standard ○ Allows for innovations by the browser vendors as well as YouTube
  33. 33. Round 2: Device-abilityBy dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
  34. 34. Why HTML5?HTML5 Capable Browsers (~75%)
  35. 35. Why HTML5?Flash Support vs. HTML5 Support
  36. 36. Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices
  37. 37. Why HTML5?
  38. 38. When HTML5?
  39. 39. Primary Goal:Recover playbacks that would be lost without flash
  40. 40. Our Solution
  41. 41. <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
  42. 42. 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.
  43. 43. Why an iframe?Other embedding methods● <script> ○ We need our content to be sandboxed ○ More than just a video tag● <object> ○ Can load content with the data attribute ○ But no way to interact with it
  44. 44. When HTML5?When does the user get HTML5?
  45. 45. 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!}
  46. 46. When HTML5?When does the user get HTML5?
  47. 47. Round 3: PerformanceBy Two Hawks Eyehttp://www.flickr.com/photos/mycoolpics/92033686/
  48. 48. Player Start TimeFlash 500msHTML5 (Up from 200ms in Jan 2011) TODO(schechter): Add csi screen captures
  49. 49. 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.
  50. 50. Get Video Time
  51. 51. Get Video Time● HTML5: ○ Opera is Awesome ■ 200ms ahead of the pack● Flash: IE9 and Opera are the leaders ○ 300ms faster● HTML5 is almost always faster than Flash ○ 300ms - 400ms faster ○ IE9 is an exception ■ IE9 Flash is slightly faster than IE9 HTML5
  52. 52. Video Start TimeHTML5Flash 2.5s
  53. 53. Video Start TimeHTML5Flash 2.5s ● Firefox closest to catching Flash ○ HTML5 ~1.0s slower than Flash
  54. 54. So why is Flash so fast?
  55. 55. Make Assumptions
  56. 56. 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
  57. 57. Preload Video Connection
  58. 58. 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>
  59. 59. What about embeds?
  60. 60. #1 cache
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. #2 lazy load
  65. 65. Most embeds are never played.
  66. 66. ● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?
  67. 67. Demo:http://gregthebusker.com/iframedemo.html
  68. 68. Player APIhttp://code.google.com/apis/youtube/getting_started.html#player_apis
  69. 69. The JavaScript APICommunication
  70. 70. The JavaScript APICommunication● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
  71. 71. 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.
  72. 72. The JavaScript API Communication ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);
  73. 73. 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.
  74. 74. 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
  75. 75. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter@google.comchrisrhodes@google.com

×