HTML5 at YouTube: Stories from the Front Line

  • 290 views
Uploaded on

http://gregthebusker.com/html5/slides.html …

http://gregthebusker.com/html5/slides.html

Google I/O 2012 talk

Is HTML5 ready for production code? Of course it is. This is a look into all the different HTML5 technologies we use in live code at YouTube. We'll have a collection of tips, tricks, and best practices for HTML5 video, the track tag, getUserMedia, and more. Plus a deep dive into Mobile Video Tag development.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
290
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

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. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 1/105
  • 2. 3/30/13 Google IO 2012 HTML5 at YouTube Stories from the Mobile Front Greg Schechter - Web Warrior, YouTube Zoltan Szego - Software Engineer, YouTubegregthebusker.com/html5/slides.html#9 2/105
  • 3. 3/30/13 Google IO 2012 Greg Schechter Zoltan Szego The Web Warrior Phone Wrangler schechter@youtube.com zszego@google.com #io12 3/105gregthebusker.com/html5/slides.html#9 3/105
  • 4. 3/30/13 Google IO 2012 Whats Google IO about?gregthebusker.com/html5/slides.html#9 4/105
  • 5. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 5/105
  • 6. 3/30/13 Google IO 2012 I R one C00LZ Kat http://www.flickr.com/photos/scjn/4564274827/gregthebusker.com/html5/slides.html#9 6/105
  • 7. 3/30/13 Google IO 2012 Last years coolness #io12 7/105gregthebusker.com/html5/slides.html#9 7/105
  • 8. 3/30/13 Google IO 2012 This years awesome hardware #io12 8/105gregthebusker.com/html5/slides.html#9 8/105
  • 9. 3/30/13 Google IO 2012 Put them together #io12 9/105gregthebusker.com/html5/slides.html#9 9/105
  • 10. 3/30/13 Google IO 2012 Put them together #io12 10/105gregthebusker.com/html5/slides.html#9 10/105
  • 11. 3/30/13 Google IO 2012 Is the coolness ready to use?gregthebusker.com/html5/slides.html#9 11/105
  • 12. 3/30/13 Google IO 2012 Is ready for battlez http://www.flickr.com/photos/mycoolpics/92033686/gregthebusker.com/html5/slides.html#9 12/105
  • 13. 3/30/13 Google IO 2012 http://www.w3.org/html/logo/gregthebusker.com/html5/slides.html#9 13/105
  • 14. 3/30/13 Google IO 2012 · #io12 14/105 Graphicsgregthebusker.com/html5/slides.html#9 14/105
  • 15. 3/30/13 Google IO 2012 Who can use this stuff?gregthebusker.com/html5/slides.html#9 15/105
  • 16. 3/30/13 Google IO 2012 Depends on your usersgregthebusker.com/html5/slides.html#9 16/105
  • 17. 3/30/13 Google IO 2012 What users I prioritize development for Chrome Firefox IE Safari Operagregthebusker.com/html5/slides.html#9 17/105
  • 18. 3/30/13 Google IO 2012 Why HTML5?gregthebusker.com/html5/slides.html#9 18/105
  • 19. 3/30/13 Google IO 2012 CSS3 Styling http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/slides.html#9 19/105
  • 20. 3/30/13 Google IO 2012 Rounded Corners <tl> sye CS S .oeo { smbx bre-ais 3x odrrdu: p; } <sye /tl> With awesomeness Without awesomeness #io12 20/105gregthebusker.com/html5/slides.html#9 20/105
  • 21. 3/30/13 Google IO 2012 Transitions <tl> sye CS S .oeo { smbx -ekttasto:hih 1,oaiy1 1; wbi-rniin egt s pct s s -o-rniin hih 1,oaiy1 1; mztasto: egt s pct s s -stasto:hih 1,oaiy1 1; m-rniin egt s pct s s --rniin hih 1,oaiy1 1; otasto: egt s pct s s tasto:hih 1 oaiy1 1; rniin egt , pct s s } <sye /tl> With Awesomeness Without Awesomeness Awesome Information Awesome Information #io12 21/105gregthebusker.com/html5/slides.html#9 21/105
  • 22. 3/30/13 Google IO 2012 What CSS3 gets us · Enhance the user experience · Less code · Faster preformance · Less wasted development time and less hacks · The experience without it is still good #io12 22/105gregthebusker.com/html5/slides.html#9 22/105
  • 23. 3/30/13 Google IO 2012 Why HTML5?gregthebusker.com/html5/slides.html#9 23/105
  • 24. 3/30/13 Google IO 2012 When HTML5?gregthebusker.com/html5/slides.html#9 24/105
  • 25. 3/30/13 Google IO 2012 Who can use the css3 coolness. Chrome Firefox IE Safari Operagregthebusker.com/html5/slides.html#9 25/105
  • 26. 3/30/13 Google IO 2012 Performance & Integration http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/slides.html#9 26/105
  • 27. 3/30/13 Google IO 2012 Lets talk Uploadsgregthebusker.com/html5/slides.html#9 27/105
  • 28. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 28/105
  • 29. 3/30/13 Google IO 2012 XHR Uploads <cit srp> JVSRP AACIT fnto ula(lbrie { ucin podboOFl) vrxr=nwXLtpeus(; a h e MHtRqet) xroe(PS sre tu) h.pnOT, /evr, re; xrola =fnto(){..} h.nod ucine . ; / Lse t teula pors. / itn o h pod rges vrporsBr=dcmn.urSlco(pors; a rgesa ouetqeyeetrrges) xrula.nrges=fnto(){ h.podopors ucine i (.eghoptbe { f elntCmual) porsBrvle=(.odd/ettl *10 rgesa.au elae .oa) 0; porsBrtxCnet=porsBrvle / Flbc fruspotdbosr. rgesa.etotn rgesa.au; / alak o nupre rwes } }; xrsn(lbrie; h.edboOFl) } <srp> /cit #io12 29/105gregthebusker.com/html5/slides.html#9 29/105
  • 30. 3/30/13 Google IO 2012 XHR Uploads Oldness Upload progress Newness Upload progress #io12 30/105gregthebusker.com/html5/slides.html#9 30/105
  • 31. 3/30/13 Google IO 2012 Why is XHR Uploads an improvement · Richer user experience with progress updates · Multiple file uploads · Resumable uploads · No plugin required for advanced features #io12 31/105gregthebusker.com/html5/slides.html#9 31/105
  • 32. 3/30/13 Google IO 2012 Who can use the XHR upload coolness. Chrome Firefox IE Safari Operagregthebusker.com/html5/slides.html#9 32/105
  • 33. 3/30/13 Google IO 2012 Time to up the coolness http://www.flickr.com/photos/tjc/4320473610/gregthebusker.com/html5/slides.html#9 33/105
  • 34. 3/30/13 Google IO 2012 Multimedia http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/slides.html#9 34/105
  • 35. 3/30/13 Google IO 2012 #io12 35/105gregthebusker.com/html5/slides.html#9 35/105
  • 36. 3/30/13 Google IO 2012 <video> expectations · Open source technology - Browser / Player / Codec · Lower latency - No plug-in instantiation · Better performance and fidelity · Accessibility · Power Consumption* #io12 36/105gregthebusker.com/html5/slides.html#9 36/105
  • 37. 3/30/13 Google IO 2012 HTML5 Video Capable Browsers Chrome Firefox IE Safari Opera #io12 37/105gregthebusker.com/html5/slides.html#9 37/105
  • 38. 3/30/13 Google IO 2012 Flash Support vs. HTML5 Supportgregthebusker.com/html5/slides.html#9 38/105
  • 39. 3/30/13 Google IO 2012 YouTube Data API Usage for Flash vs. HTML5 Devicesgregthebusker.com/html5/slides.html#9 39/105
  • 40. 3/30/13 Google IO 2012 Lets talk mobile http://www.flickr.com/photos/indi/2579412663/gregthebusker.com/html5/slides.html#9 40/105
  • 41. 3/30/13 Google IO 2012 Why is Mobile Important #io12 41/105gregthebusker.com/html5/slides.html#9 41/105
  • 42. 3/30/13 Google IO 2012 Playback Stats 6,000 Playback in Millions 4,500 3,000 1,500 0 2010 2011 2012 Year #io12 42/105gregthebusker.com/html5/slides.html#9 42/105
  • 43. 3/30/13 Google IO 2012 #io12 43/105gregthebusker.com/html5/slides.html#9 43/105
  • 44. 3/30/13 Google IO 2012 #io12 44/105gregthebusker.com/html5/slides.html#9 44/105
  • 45. 3/30/13 Google IO 2012 #io12 45/105gregthebusker.com/html5/slides.html#9 45/105
  • 46. 3/30/13 Google IO 2012 #io12 46/105gregthebusker.com/html5/slides.html#9 46/105
  • 47. 3/30/13 Google IO 2012 Native · For fallbacks, use rtsp:// protocol (serving .3gp) if the device wont support HTML5 · Use custom protocol / URL scheme to launch the native app (on Android / BB: vdyuuevdoi) n.otb:ie_d · iOS special-cases the YouTube Flash embed code #io12 47/105gregthebusker.com/html5/slides.html#9 47/105
  • 48. 3/30/13 Google IO 2012 #io12 48/105gregthebusker.com/html5/slides.html#9 48/105
  • 49. 3/30/13 Google IO 2012 The Different Browsers #io12 49/105gregthebusker.com/html5/slides.html#9 49/105
  • 50. 3/30/13 Google IO 2012 The Different Browsers #io12 50/105gregthebusker.com/html5/slides.html#9 50/105
  • 51. 3/30/13 Google IO 2012 The Different Browsers #io12 51/105gregthebusker.com/html5/slides.html#9 51/105
  • 52. 3/30/13 Google IO 2012 http://www.flickr.com/photos/brownpau/533267369/ #io12 52/105gregthebusker.com/html5/slides.html#9 52/105
  • 53. 3/30/13 Google IO 2012 How do we start? <video> #io12 53/105gregthebusker.com/html5/slides.html#9 53/105
  • 54. 3/30/13 Google IO 2012 The Source <video src="funny_cat_video"> #io12 54/105gregthebusker.com/html5/slides.html#9 54/105
  • 55. 3/30/13 Google IO 2012 The Source <video src="funny_cat_video.webm/mp4/ogg"> #io12 55/105gregthebusker.com/html5/slides.html#9 55/105
  • 56. 3/30/13 Google IO 2012 Mobile Formats Support Chrome Safari Firefox Opera IE Android H264 Android 4.1+ WebM Android 4+ Android 4+ Android 4+ HLS Android 3+ #io12 56/105gregthebusker.com/html5/slides.html#9 56/105
  • 57. 3/30/13 Google IO 2012 Platform Versions and Distribution #io12 57/105gregthebusker.com/html5/slides.html#9 57/105
  • 58. 3/30/13 Google IO 2012 The Source <ie> vdo HM TL <oresc"un_a_ie. p " suc r=fnyctvdom 4 > <oresc"un_a_ie. e m > suc r=fnyctvdow b " <vdo /ie> #io12 58/105gregthebusker.com/html5/slides.html#9 58/105
  • 59. 3/30/13 Google IO 2012 Powergregthebusker.com/html5/slides.html#9 59/105
  • 60. 3/30/13 Google IO 2012 Playback Stats Software idle Hardware webm h264 flash 700 800 900 1,000 1,100 Mean current draw (milliamps) Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/ #io12 60/105gregthebusker.com/html5/slides.html#9 60/105
  • 61. 3/30/13 Google IO 2012 Stick it in the pagegregthebusker.com/html5/slides.html#9 61/105
  • 62. 3/30/13 Google IO 2012 Lets add a poster attribute and some click handlersgregthebusker.com/html5/slides.html#9 62/105
  • 63. 3/30/13 Google IO 2012 Video Poster Very different behavior in different browsers · Stretch poster image to < i e >element size, or fit proportionally vdo · May replace poster image with a paused frame from the video · May overlay a play icon that is different for each platform #io12 63/105gregthebusker.com/html5/slides.html#9 63/105
  • 64. 3/30/13 Google IO 2012 Video Poster Pro Tips Protips for a consistent look: · Render your own cued state: < m >for the poster, play icon ig · Replace with the < i e >when its time to play vdo · Set the background color to black for continuity across platforms #io12 64/105gregthebusker.com/html5/slides.html#9 64/105
  • 65. 3/30/13 Google IO 2012 How do videos play back? 1. Inline in the page · iPad · Android 4.0 and up · Chrome 2. Always fullscreen, no matter what · iPhone, iPod · Android 2.2 - 3.0 · Windows Phone #io12 65/105gregthebusker.com/html5/slides.html#9 65/105
  • 66. 3/30/13 Google IO 2012 Fullscreen-only <video> Video element can be stuck anywhere on the page · 1x1 pixels, or offscreen · but: has to be in the DOM, cant be visibility:hidden or display:none · just call play() to go fullscreen · iPhone: zoom-in animation from <video>s position On webkit, good interaction with your webapp · Video events still fire: timeupdate, ended etc. · Free to change web page in the background · webkitbeginfullscreen, webkitendfullscreen events #io12 66/105gregthebusker.com/html5/slides.html#9 66/105
  • 67. 3/30/13 Google IO 2012 Fullscreen-only <video> caveats Native controls only No overlays or custom UI Cant do captions etc. #io12 67/105gregthebusker.com/html5/slides.html#9 67/105
  • 68. 3/30/13 Google IO 2012 Controls <video controls> #io12 68/105gregthebusker.com/html5/slides.html#9 68/105
  • 69. 3/30/13 Google IO 2012 Controlsgregthebusker.com/html5/slides.html#9 69/105
  • 70. 3/30/13 Google IO 2012 Native Controls Support Chrome Safari Firefox Opera IE Android Play/pause Button Volume Only in Fullscreen Mute toggle Dont work in Controls only Android 4 Seek bar Fullscreen Button Button and gesture Button Playback Type Both Fullscreen only on Inline only Determined by Fullscreen Both phones hardware only #io12 70/105gregthebusker.com/html5/slides.html#9 70/105
  • 71. 3/30/13 Google IO 2012 Custom Controls · Preserve your brand · Unified experience across platforms and browsers #io12 71/105gregthebusker.com/html5/slides.html#9 71/105
  • 72. 3/30/13 Google IO 2012 Custom Controlsgregthebusker.com/html5/slides.html#9 72/105
  • 73. 3/30/13 Google IO 2012 Custom Controls · Preserve your brand · Unified experience across platforms and browsers · Allows us to expand the set of controls and add our own - Annotations - Playlist - Captions - More #io12 73/105gregthebusker.com/html5/slides.html#9 73/105
  • 74. 3/30/13 Google IO 2012 Custom Controls Pro Tips · User expect to be able to drag the progress bar - Need to remender to prevent scroll on touchstart · Volume cant be set everywhere and users are accustomed to using device controls - So dont build controls for it · Fingers are fat - Average finger is 11mm so make targets at least 40px with 10px padding - Use SVGs so icons can be scaled and shared with desktop application · Dont trigger content with hover · Fullscreen - The browsing context is always fullscreen so fake it #io12 74/105gregthebusker.com/html5/slides.html#9 74/105
  • 75. 3/30/13 Google IO 2012 Fullscreen #io12 75/105gregthebusker.com/html5/slides.html#9 75/105
  • 76. 3/30/13 Google IO 2012 requestFullscreen #io12 76/105gregthebusker.com/html5/slides.html#9 76/105
  • 77. 3/30/13 Google IO 2012 What about Mobile? #io12 77/105gregthebusker.com/html5/slides.html#9 77/105
  • 78. 3/30/13 Google IO 2012 Isnt it already fullscreen? #io12 78/105gregthebusker.com/html5/slides.html#9 78/105
  • 79. 3/30/13 Google IO 2012 Yes (sort of) #io12 79/105gregthebusker.com/html5/slides.html#9 79/105
  • 80. 3/30/13 Google IO 2012 Mobile Fullscreen · Open New Tab · Remember size context changes so use viewport to scale icons and controls - @viewport { width: device-width; } · webkitEnterFullscreen - Webkit only - Just the video element - Native controls only - metadata must be loaded - Only in click event #io12 80/105gregthebusker.com/html5/slides.html#9 80/105
  • 81. 3/30/13 Google IO 2012 Autoplay <video autoplay> #io12 81/105gregthebusker.com/html5/slides.html#9 81/105
  • 82. 3/30/13 Google IO 2012 Autoplay #io12 82/105gregthebusker.com/html5/slides.html#9 82/105
  • 83. 3/30/13 Google IO 2012 Autoplay · Doesnt work! Restriction: need user action. · Why? - On a cell network - users charged for data - Slow downloads, let the user decide · Where? - Safari on iOS (iPad included, even on WIFI) - Android Browser (4.0+) - Chrome on Android #io12 83/105gregthebusker.com/html5/slides.html#9 83/105
  • 84. 3/30/13 Google IO 2012 Autoplay What about everyone else? #io12 84/105gregthebusker.com/html5/slides.html#9 84/105
  • 85. 3/30/13 Google IO 2012 Autoplay Support Chrome Safari Firefox Opera IE Android Attribute Scripted Buggy, going away #io12 85/105gregthebusker.com/html5/slides.html#9 85/105
  • 86. 3/30/13 Google IO 2012 Autoplay #io12 86/105gregthebusker.com/html5/slides.html#9 86/105
  • 87. 3/30/13 Google IO 2012 Autoplay <video onclick="this.play()"> #io12 87/105gregthebusker.com/html5/slides.html#9 87/105
  • 88. 3/30/13 Google IO 2012 Autoplay #io12 88/105gregthebusker.com/html5/slides.html#9 88/105
  • 89. 3/30/13 Google IO 2012 Autoplay #io12 89/105gregthebusker.com/html5/slides.html#9 89/105
  • 90. 3/30/13 Google IO 2012 Autoplay <cit srp> JVSRP AACIT fnto smCikvn(v){ ucin oelcEetet / I aue iiitdtra. / n sr ntae hed mVdolmn.od) / Mgcicnaint eal pa( ltro! yieEeetla(; / ai natto o nbe ly) ae n gtieDt(;/ Tigr a aa cl. eVdoaa) / rges n jx al } fnto oGtieDtRtre(aa { ucin neVdoaaeunddt) / Nti aue iiitdtra. / o n sr ntae hed stieEeetr(aa; eVdolmnScdt) mVdolmn.od) yieEeetla(; mVdolmn.ly) yieEeetpa(; } <srp> /cit #io12 90/105gregthebusker.com/html5/slides.html#9 90/105
  • 91. 3/30/13 Google IO 2012 Autoplay <cit srp> JVSRP AACIT fnto smCikvn(v){ ucin oelcEetet / I aue iiitdtra. / n sr ntae hed mVdolmn.od) / Mgcicnaint eal pa( ltro! yieEeetla(; / ai natto o nbe ly) ae n gtieDt(;/ Tigr a aa cl. eVdoaa) / rges n jx al } fnto oGtieDtRtre(aa { ucin neVdoaaeunddt) / Nti aue iiitdtra. / o n sr ntae hed stieEeetr(aa; eVdolmnScdt) mVdolmn.od) yieEeetla(; / FrAdod / o nri wno.eTmotfnto( { idwstieu(ucin) mVdolmn.ly) yieEeetpa(; } 0; , ) } <srp> /cit #io12 91/105gregthebusker.com/html5/slides.html#9 91/105
  • 92. 3/30/13 Google IO 2012 Embeds in an HTML5 world #io12 92/105gregthebusker.com/html5/slides.html#9 92/105
  • 93. 3/30/13 Google IO 2012 Embeds · <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 via JavaScript · <iframe> - Allows our content to be sandboxed - JavaScript API communication #io12 93/105gregthebusker.com/html5/slides.html#9 93/105
  • 94. 3/30/13 Google IO 2012 Embeds <faetp=tx/tl irm ye"ethm" HM TL wdh"4" it=60 hih=35 egt"8" faeodr"" rmbre=0 sc"tp/wwyuuecmebdVDOI" r=ht:/w.otb.o/me/IE_D alwulcen loflsre> <irm> /fae · Plan for the future (if you can) #io12 94/105gregthebusker.com/html5/slides.html#9 94/105
  • 95. 3/30/13 Google IO 2012 Iframe Pro Tips hm { tl CS S /*Hc t fxihn rszn.* * ak o i Poe eiig / oefo:hde; vrlw idn } bd { oy CS S /*DmncRszn */ * yai eiig * bcgon-oo:#0; akrudclr 00 hih:10; egt 0% wdh 10; it: 0% /*Rmv hglgtwe uecik */ * eoe ihih hn s lcs * -ekttphglgtclr rb(,0 0 0; wbi-a-ihih-oo: ga0 , , ) } #io12 95/105gregthebusker.com/html5/slides.html#9 95/105
  • 96. 3/30/13 Google IO 2012 Offline and Storage http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/slides.html#9 96/105
  • 97. 3/30/13 Google IO 2012 Appcache · Offline mode for a video streaming site - useless? · More that just offline access: saves on latency every visit · Pay for code size twice: download + parse time · Saves the download time #io12 97/105gregthebusker.com/html5/slides.html#9 97/105
  • 98. 3/30/13 Google IO 2012 Appcache <tlmnfs=mnfs_r" hm aiet"aietul> HM TL <citsc"citj"/ srp r=srp.s > <ikrl"tlset he=syecs / ln e=syehe" rf"tl.s" > <hm> /tl CCEMNFS AH AIET HM TL CCE AH: srp.s citj syecs tl.s NTOK EWR: fl_oawy_odjg iet_lasla.p #io12 98/105gregthebusker.com/html5/slides.html#9 98/105
  • 99. 3/30/13 Google IO 2012 Appcache - How to force an update? CCEMNFS AH AIET HM TL CCE AH: foj o.s #Biddt:2102 ul ae 0268 / Rno AA rsos / adm JX epne JVSRP AACIT {"aa:.. dt" ., "ulDt" 2102 } bidae: 0268 v r s r p B i d a e = 2 1 0 2 ; / A t - e e a e d r n b i d o pJ V S R P a citulDt 0 2 6 1 / u o g n r t d u i g u l r uA A C I T sh i (oeepnebidae>srpBidae { f smRsos.ulDt citulDt) wno.plctoCceudt(; idwapiainah.pae) } #io12 99/105gregthebusker.com/html5/slides.html#9 99/105
  • 100. 3/30/13 Google IO 2012 Appcache gotchas · GET parameters on cached resources bypass the cache · Strict implementations (eg. iOS5) refuse to download files not in the manifest · since YouTube streams from many domains, we just put NTOK * EWR: · Can get wrong in a scary way · Users stuck on old code · Create multiple copies of the entire site in the cache · Easy to break master URL · some redirects to an appcached site: 303 or history.replaceState · history.pushState before background download completes · Some implementations are buggy #io12 100/105gregthebusker.com/html5/slides.html#9 100/105
  • 101. 3/30/13 Google IO 2012 So is the coolness ready?gregthebusker.com/html5/slides.html#9 101/105
  • 102. 3/30/13 Google IO 2012 Yes And not only do your users want it, they need itgregthebusker.com/html5/slides.html#9 102/105
  • 103. 3/30/13 Google IO 2012 <Thank You!> Greg Schechter Zoltan Szego www.youtube.com/devgregthebusker.com/html5/slides.html#9 103/105
  • 104. 3/30/13 Google IO 2012 can haz question? http://www.flickr.com/photos/cloudzilla/378829651/gregthebusker.com/html5/slides.html#9 104/105
  • 105. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 105/105