Your SlideShare is downloading. ×
HTML5 at YouTube: Stories from the Front Line
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 at YouTube: Stories from the Front Line

307
views

Published 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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
307
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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