GDD HTML5, Flash, and the Battle for Faster Cat Videos

  • 3,300 views
Uploaded on

HTML5, Flash, and the Battle for Faster Cat Videos …

HTML5, Flash, and the Battle for Faster Cat Videos

HTML5 と Flash を比較する: YouTube 動画を高速化するテクノロジー

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,300
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
44
Comments
1
Likes
6

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

Transcript

  • 1. HTML5, Flash and the Battle forFaster Cat VideosBy YouTubes Greg Schechter, Phil Harnish andMatt Ward
  • 2. Greg Schechter Phil Harnish Matt WardThe Web Warrior Sr. Play Button Seek Bar Eng Engineer schechter@google. mattward@google. com philharnish@google.com 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 geishaboy500 http://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● Adaptive & Live Streaming
  • 16. Why Flash?Features missing in HTML5● Content protection ○ RTMPE protocol / Flash Access● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video
  • 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. Why Flash?Mozilla Fullscreen APIvar elem = document.getElementById("my-element");document.onmozfullscreenchange = function() {// The fullscreen element:// document.mozFullScreenElement;console.log ("We went fullscreen!");};elem.mozRequestFullScreen();
  • 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. 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. 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. 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. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec
  • 24. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation
  • 25. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity
  • 26. Why HTML5?<video> Expectations● Open source technology ○ Browser / Player / Codec● Lower latency ○ No plug-in instantiation● Better performance and fidelity● Accessibility
  • 27. Why HTML5?<video> Expectations http://imgs.xkcd.com/comics/in_ur_reality.png
  • 28. 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
  • 29. Please put on your 3D Glasses
  • 30. By jmettrauxhttp://www.flickr.com/photos/jmettraux/4959258811/
  • 31. 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
  • 32. Round 2: Device-abilityBy dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
  • 33. Why HTML5?HTML5 Capable Browsers (~60%)
  • 34. Why HTML5?Flash Support vs. HTML5 Support
  • 35. Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices
  • 36. Why HTML5?
  • 37. When HTML5?
  • 38. Primary Goal:Recover playbacks that would be lost without flash
  • 39. Our Solution
  • 40. <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
  • 41. 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.
  • 42. 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
  • 43. When HTML5?When does the user get HTML5?
  • 44. 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!}
  • 45. When HTML5?When does the user get HTML5?
  • 46. Round 3: PerformanceBy Two Hawks Eyehttp://www.flickr.com/photos/mycoolpics/92033686/
  • 47. Player Start TimeFlash 500msHTML5 (Up from 200ms in Jan 2011) TODO(schechter): Add csi screen captures
  • 48. 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.
  • 49. Get Video Time
  • 50. 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
  • 51. Video Start TimeHTML5Flash 2.5s
  • 52. Video Start TimeHTML5Flash 2.5s ● Firefox closest to catching Flash ○ HTML5 ~1.0s slower than Flash
  • 53. So why is Flash so fast?
  • 54. Make Assumptions
  • 55. 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
  • 56. Preload Video Connection
  • 57. 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>
  • 58. What about embeds?
  • 59. #1 cache
  • 60. 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
  • 61. 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
  • 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.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
  • 63. #2 lazy load
  • 64. Most embeds are never played.
  • 65. ● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?
  • 66. Demo:http://gregthebusker.com/iframedemo.html
  • 67. Player APIhttp://code.google.com/apis/youtube/getting_started.html#player_apis
  • 68. The JavaScript APICommunication
  • 69. The JavaScript APICommunication● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
  • 70. 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.
  • 71. The JavaScript API Communication ● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);
  • 72. 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.
  • 73. 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
  • 74. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter@google.commattward@google.comphilharnish@google.com