3/30/13                                 Google IO 2012gregthebusker.com/html5/slides.html#9                    1/105
3/30/13                                                      Google IO 2012                 HTML5 at YouTube              ...
3/30/13                                     Google IO 2012                    Greg Schechter                       Zoltan ...
3/30/13                                 Google IO 2012                 Whats Google IO about?gregthebusker.com/html5/slide...
3/30/13                                 Google IO 2012gregthebusker.com/html5/slides.html#9                    5/105
3/30/13                                                   Google IO 2012          I R one C00LZ Kat          http://www.fl...
3/30/13                                 Google IO 2012          Last years coolness               #io12                   ...
3/30/13                                 Google IO 2012          This years awesome hardware               #io12           ...
3/30/13                                 Google IO 2012          Put them together               #io12                     ...
3/30/13                                 Google IO 2012          Put them together               #io12                     ...
3/30/13                                 Google IO 2012                 Is the coolness ready to use?gregthebusker.com/html...
3/30/13                                                       Google IO 2012          Is ready for battlez          http:/...
3/30/13                                  Google IO 2012          http://www.w3.org/html/logo/gregthebusker.com/html5/slide...
3/30/13                                                Google IO 2012                                        ·            ...
3/30/13                                 Google IO 2012                 Who can use this stuff?gregthebusker.com/html5/slid...
3/30/13                                 Google IO 2012                 Depends on your usersgregthebusker.com/html5/slides...
3/30/13                                                Google IO 2012          What users I prioritize development for    ...
3/30/13                                 Google IO 2012                 Why HTML5?gregthebusker.com/html5/slides.html#9    ...
3/30/13                                                         Google IO 2012                                            ...
3/30/13                                 Google IO 2012          Rounded Corners          <tl>           sye               ...
3/30/13                                        Google IO 2012          Transitions          <tl>           sye            ...
3/30/13                                        Google IO 2012          What CSS3 gets us          ·   Enhance the user exp...
3/30/13                                 Google IO 2012                 Why HTML5?gregthebusker.com/html5/slides.html#9    ...
3/30/13                                 Google IO 2012                 When HTML5?gregthebusker.com/html5/slides.html#9   ...
3/30/13                                                Google IO 2012          Who can use the css3 coolness.             ...
3/30/13                                                         Google IO 2012                                            ...
3/30/13                                 Google IO 2012                 Lets talk Uploadsgregthebusker.com/html5/slides.htm...
3/30/13                                 Google IO 2012gregthebusker.com/html5/slides.html#9                    28/105
3/30/13                                 Google IO 2012          XHR Uploads          <cit           srp>                  ...
3/30/13                                 Google IO 2012          XHR Uploads          Oldness          Upload progress     ...
3/30/13                                         Google IO 2012          Why is XHR Uploads an improvement          ·   Ric...
3/30/13                                                Google IO 2012          Who can use the XHR upload coolness.       ...
3/30/13                                                  Google IO 2012          Time to up the coolness          http://w...
3/30/13                                                         Google IO 2012                                            ...
3/30/13                                 Google IO 2012               #io12                                     35/105gregt...
3/30/13                                       Google IO 2012          <video> expectations          · Open source technolo...
3/30/13                                                Google IO 2012          HTML5 Video Capable Browsers               ...
3/30/13                                 Google IO 2012          Flash Support vs. HTML5 Supportgregthebusker.com/html5/sli...
3/30/13                                 Google IO 2012          YouTube Data API Usage for Flash vs. HTML5          Device...
3/30/13                                                   Google IO 2012          Lets talk mobile          http://www.fli...
3/30/13                                 Google IO 2012                 Why is Mobile Important               #io12        ...
3/30/13                                        Google IO 2012          Playback Stats                                    6...
3/30/13                                 Google IO 2012               #io12                                     43/105gregt...
3/30/13                                 Google IO 2012               #io12                                     44/105gregt...
3/30/13                                 Google IO 2012               #io12                                     45/105gregt...
3/30/13                                 Google IO 2012               #io12                                     46/105gregt...
3/30/13                                         Google IO 2012          Native          · For fallbacks, use rtsp:// proto...
3/30/13                                 Google IO 2012               #io12                                     48/105gregt...
3/30/13                                 Google IO 2012          The Different Browsers               #io12                ...
3/30/13                                 Google IO 2012          The Different Browsers               #io12                ...
3/30/13                                 Google IO 2012          The Different Browsers               #io12                ...
3/30/13                                                      Google IO 2012          http://www.flickr.com/photos/brownpau...
3/30/13                                   Google IO 2012          How do we start?                                        ...
3/30/13                                          Google IO 2012          The Source                                    <vi...
3/30/13                                 Google IO 2012          The Source            <video src="funny_cat_video.webm/mp4...
3/30/13                                                    Google IO 2012          Mobile Formats Support                 ...
3/30/13                                 Google IO 2012          Platform Versions and Distribution               #io12    ...
3/30/13                                 Google IO 2012          The Source                  <ie>                   vdo    ...
3/30/13                                 Google IO 2012          Powergregthebusker.com/html5/slides.html#9                ...
3/30/13                                                                        Google IO 2012          Playback Stats     ...
3/30/13                                 Google IO 2012          Stick it in the pagegregthebusker.com/html5/slides.html#9 ...
3/30/13                                 Google IO 2012          Lets add a poster attribute and some click          handle...
3/30/13                                        Google IO 2012          Video Poster          Very different behavior in di...
3/30/13                                         Google IO 2012          Video Poster Pro Tips          Protips for a consi...
3/30/13                                      Google IO 2012          How do videos play back?          1. Inline in the pa...
3/30/13                                           Google IO 2012          Fullscreen-only <video>          Video element c...
3/30/13                                 Google IO 2012          Fullscreen-only <video> caveats          Native controls o...
3/30/13                                       Google IO 2012          Controls                                        <vid...
3/30/13                                 Google IO 2012          Controlsgregthebusker.com/html5/slides.html#9             ...
3/30/13                                                         Google IO 2012          Native Controls Support           ...
3/30/13                                       Google IO 2012          Custom Controls          · Preserve your brand      ...
3/30/13                                 Google IO 2012          Custom Controlsgregthebusker.com/html5/slides.html#9      ...
3/30/13                                        Google IO 2012          Custom Controls          · Preserve your brand     ...
3/30/13                                         Google IO 2012          Custom Controls Pro Tips          · User expect to...
3/30/13                                    Google IO 2012                                        Fullscreen               ...
3/30/13                                        Google IO 2012                                        requestFullscreen    ...
3/30/13                                        Google IO 2012                                        What about Mobile?   ...
3/30/13                                             Google IO 2012                                        Isnt it already ...
3/30/13                                      Google IO 2012                                        Yes (sort of)          ...
3/30/13                                       Google IO 2012          Mobile Fullscreen          · Open New Tab          ·...
3/30/13                                       Google IO 2012          Autoplay                                        <vid...
3/30/13                                 Google IO 2012          Autoplay               #io12                              ...
3/30/13                                        Google IO 2012          Autoplay          · Doesnt work! Restriction: need ...
3/30/13                                            Google IO 2012          Autoplay                                       ...
3/30/13                                                 Google IO 2012          Autoplay Support                          ...
3/30/13                                 Google IO 2012          Autoplay               #io12                              ...
3/30/13                                              Google IO 2012          Autoplay                                     ...
3/30/13                                 Google IO 2012          Autoplay               #io12                              ...
3/30/13                                 Google IO 2012          Autoplay               #io12                              ...
3/30/13                                 Google IO 2012          Autoplay          <cit           srp>                     ...
3/30/13                                 Google IO 2012          Autoplay          <cit           srp>                     ...
3/30/13                                 Google IO 2012                 Embeds in an HTML5 world               #io12       ...
3/30/13                                          Google IO 2012          Embeds          · <script>              - We need...
3/30/13                                        Google IO 2012          Embeds          <faetp=tx/tl           irm ye"ethm"...
3/30/13                                 Google IO 2012          Iframe Pro Tips          hm {           tl                ...
3/30/13                                                         Google IO 2012                                         Off...
3/30/13                                            Google IO 2012          Appcache          ·   Offline mode for a video ...
3/30/13                                   Google IO 2012          Appcache                       <tlmnfs=mnfs_r"          ...
3/30/13                                               Google IO 2012          Appcache - How to force an update?          ...
3/30/13                                          Google IO 2012          Appcache gotchas          · GET parameters on cac...
3/30/13                                 Google IO 2012                 So is the coolness ready?gregthebusker.com/html5/sl...
3/30/13                                         Google IO 2012                 Yes                 And not only do your us...
3/30/13                                 Google IO 2012                 <Thank You!>                 Greg Schechter        ...
3/30/13                                                        Google IO 2012          can haz question?          http://w...
3/30/13                                 Google IO 2012gregthebusker.com/html5/slides.html#9                    105/105
Upcoming SlideShare
Loading in...5
×

HTML5 at YouTube: Stories from the Front Line

355

Published on

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
355
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 at YouTube: Stories from the Front Line"

  1. 1. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 1/105
  2. 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. 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. 4. 3/30/13 Google IO 2012 Whats Google IO about?gregthebusker.com/html5/slides.html#9 4/105
  5. 5. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 5/105
  6. 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. 7. 3/30/13 Google IO 2012 Last years coolness #io12 7/105gregthebusker.com/html5/slides.html#9 7/105
  8. 8. 3/30/13 Google IO 2012 This years awesome hardware #io12 8/105gregthebusker.com/html5/slides.html#9 8/105
  9. 9. 3/30/13 Google IO 2012 Put them together #io12 9/105gregthebusker.com/html5/slides.html#9 9/105
  10. 10. 3/30/13 Google IO 2012 Put them together #io12 10/105gregthebusker.com/html5/slides.html#9 10/105
  11. 11. 3/30/13 Google IO 2012 Is the coolness ready to use?gregthebusker.com/html5/slides.html#9 11/105
  12. 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. 13. 3/30/13 Google IO 2012 http://www.w3.org/html/logo/gregthebusker.com/html5/slides.html#9 13/105
  14. 14. 3/30/13 Google IO 2012 · #io12 14/105 Graphicsgregthebusker.com/html5/slides.html#9 14/105
  15. 15. 3/30/13 Google IO 2012 Who can use this stuff?gregthebusker.com/html5/slides.html#9 15/105
  16. 16. 3/30/13 Google IO 2012 Depends on your usersgregthebusker.com/html5/slides.html#9 16/105
  17. 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. 18. 3/30/13 Google IO 2012 Why HTML5?gregthebusker.com/html5/slides.html#9 18/105
  19. 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. 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. 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. 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. 23. 3/30/13 Google IO 2012 Why HTML5?gregthebusker.com/html5/slides.html#9 23/105
  24. 24. 3/30/13 Google IO 2012 When HTML5?gregthebusker.com/html5/slides.html#9 24/105
  25. 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. 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. 27. 3/30/13 Google IO 2012 Lets talk Uploadsgregthebusker.com/html5/slides.html#9 27/105
  28. 28. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 28/105
  29. 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. 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. 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. 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. 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. 34. 3/30/13 Google IO 2012 Multimedia http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/slides.html#9 34/105
  35. 35. 3/30/13 Google IO 2012 #io12 35/105gregthebusker.com/html5/slides.html#9 35/105
  36. 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. 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. 38. 3/30/13 Google IO 2012 Flash Support vs. HTML5 Supportgregthebusker.com/html5/slides.html#9 38/105
  39. 39. 3/30/13 Google IO 2012 YouTube Data API Usage for Flash vs. HTML5 Devicesgregthebusker.com/html5/slides.html#9 39/105
  40. 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. 41. 3/30/13 Google IO 2012 Why is Mobile Important #io12 41/105gregthebusker.com/html5/slides.html#9 41/105
  42. 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. 43. 3/30/13 Google IO 2012 #io12 43/105gregthebusker.com/html5/slides.html#9 43/105
  44. 44. 3/30/13 Google IO 2012 #io12 44/105gregthebusker.com/html5/slides.html#9 44/105
  45. 45. 3/30/13 Google IO 2012 #io12 45/105gregthebusker.com/html5/slides.html#9 45/105
  46. 46. 3/30/13 Google IO 2012 #io12 46/105gregthebusker.com/html5/slides.html#9 46/105
  47. 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. 48. 3/30/13 Google IO 2012 #io12 48/105gregthebusker.com/html5/slides.html#9 48/105
  49. 49. 3/30/13 Google IO 2012 The Different Browsers #io12 49/105gregthebusker.com/html5/slides.html#9 49/105
  50. 50. 3/30/13 Google IO 2012 The Different Browsers #io12 50/105gregthebusker.com/html5/slides.html#9 50/105
  51. 51. 3/30/13 Google IO 2012 The Different Browsers #io12 51/105gregthebusker.com/html5/slides.html#9 51/105
  52. 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. 53. 3/30/13 Google IO 2012 How do we start? <video> #io12 53/105gregthebusker.com/html5/slides.html#9 53/105
  54. 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. 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. 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. 57. 3/30/13 Google IO 2012 Platform Versions and Distribution #io12 57/105gregthebusker.com/html5/slides.html#9 57/105
  58. 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. 59. 3/30/13 Google IO 2012 Powergregthebusker.com/html5/slides.html#9 59/105
  60. 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. 61. 3/30/13 Google IO 2012 Stick it in the pagegregthebusker.com/html5/slides.html#9 61/105
  62. 62. 3/30/13 Google IO 2012 Lets add a poster attribute and some click handlersgregthebusker.com/html5/slides.html#9 62/105
  63. 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. 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. 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. 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. 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. 68. 3/30/13 Google IO 2012 Controls <video controls> #io12 68/105gregthebusker.com/html5/slides.html#9 68/105
  69. 69. 3/30/13 Google IO 2012 Controlsgregthebusker.com/html5/slides.html#9 69/105
  70. 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. 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. 72. 3/30/13 Google IO 2012 Custom Controlsgregthebusker.com/html5/slides.html#9 72/105
  73. 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. 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. 75. 3/30/13 Google IO 2012 Fullscreen #io12 75/105gregthebusker.com/html5/slides.html#9 75/105
  76. 76. 3/30/13 Google IO 2012 requestFullscreen #io12 76/105gregthebusker.com/html5/slides.html#9 76/105
  77. 77. 3/30/13 Google IO 2012 What about Mobile? #io12 77/105gregthebusker.com/html5/slides.html#9 77/105
  78. 78. 3/30/13 Google IO 2012 Isnt it already fullscreen? #io12 78/105gregthebusker.com/html5/slides.html#9 78/105
  79. 79. 3/30/13 Google IO 2012 Yes (sort of) #io12 79/105gregthebusker.com/html5/slides.html#9 79/105
  80. 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. 81. 3/30/13 Google IO 2012 Autoplay <video autoplay> #io12 81/105gregthebusker.com/html5/slides.html#9 81/105
  82. 82. 3/30/13 Google IO 2012 Autoplay #io12 82/105gregthebusker.com/html5/slides.html#9 82/105
  83. 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. 84. 3/30/13 Google IO 2012 Autoplay What about everyone else? #io12 84/105gregthebusker.com/html5/slides.html#9 84/105
  85. 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. 86. 3/30/13 Google IO 2012 Autoplay #io12 86/105gregthebusker.com/html5/slides.html#9 86/105
  87. 87. 3/30/13 Google IO 2012 Autoplay <video onclick="this.play()"> #io12 87/105gregthebusker.com/html5/slides.html#9 87/105
  88. 88. 3/30/13 Google IO 2012 Autoplay #io12 88/105gregthebusker.com/html5/slides.html#9 88/105
  89. 89. 3/30/13 Google IO 2012 Autoplay #io12 89/105gregthebusker.com/html5/slides.html#9 89/105
  90. 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. 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. 92. 3/30/13 Google IO 2012 Embeds in an HTML5 world #io12 92/105gregthebusker.com/html5/slides.html#9 92/105
  93. 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. 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. 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. 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. 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. 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. 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. 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. 101. 3/30/13 Google IO 2012 So is the coolness ready?gregthebusker.com/html5/slides.html#9 101/105
  102. 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. 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. 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. 105. 3/30/13 Google IO 2012gregthebusker.com/html5/slides.html#9 105/105

×