Your SlideShare is downloading. ×
4/16/13                                                  HTML5 at YouTube: Stories from the Front Linegregthebusker.com/ht...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 HTM...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line                  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Wha...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Linegregthebusker.com/ht...
4/16/13                                                   HTML5 at YouTube: Stories from the Front Line          I R one C...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Last years...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          This years...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Put them t...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Put them t...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Is ...
4/16/13                                                       HTML5 at YouTube: Stories from the Front Line          Is re...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          http://www...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Who...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Dep...
4/16/13                                                     HTML5 at YouTube: Stories from the Front Line          What us...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Why...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line                  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Rounded Co...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Transition...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          What CSS3 ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Why...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Whe...
4/16/13                                                     HTML5 at YouTube: Stories from the Front Line          Who can...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line                  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Let...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Linegregthebusker.com/ht...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          XHR Upload...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          XHR Upload...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Why is XHR...
4/16/13                                                     HTML5 at YouTube: Stories from the Front Line          Who can...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Time to up...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line                  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          <video> ex...
4/16/13                                                     HTML5 at YouTube: Stories from the Front Line          HTML5 V...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Flash Supp...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          YouTube Da...
4/16/13                                                   HTML5 at YouTube: Stories from the Front Line          Lets talk...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Why...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line              #HTML5...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line              #HTML5...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line              #HTML5...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line              #HTML5...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Native    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line              #HTML5...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Differ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Differ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Differ...
4/16/13                                                      HTML5 at YouTube: Stories from the Front Line          http:/...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          How do we ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Source...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Source...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line          Mobile F...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Platform V...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          The Source...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Powergregt...
4/16/13                                                         HTML5 at YouTube: Stories from the Front Line          Pla...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Stick it i...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Lets add a...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Video Post...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Video Post...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          How do vid...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Fullscreen...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Fullscreen...
4/16/13                                                   HTML5 at YouTube: Stories from the Front Line          Controls ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Controlsgr...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Native Con...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Custom Con...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Custom Con...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Custom Con...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Custom Con...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Mobile Ful...
4/16/13                                                   HTML5 at YouTube: Stories from the Front Line          Autoplay ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                      HTML5 at YouTube: Stories from the Front Line          Autopl...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Autoplay  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Emb...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Embeds    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Embeds    ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Iframe Pro...
4/16/13                                                    HTML5 at YouTube: Stories from the Front Line                  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Appcache  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Appcache  ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Appcache -...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line          Appcache g...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 So ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 Yes...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Line                 <Th...
4/16/13                                                        HTML5 at YouTube: Stories from the Front Line          can ...
4/16/13                                                  HTML5 at YouTube: Stories from the Front Linegregthebusker.com/ht...
Upcoming SlideShare
Loading in...5
×

Html5 at YouTube: Stories from the Front Line

30,366

Published on

This is the PDF version. The HTML5 awesome version is at http://gregthebusker.com/html5/html5_at_youtube_u_of_i.html

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
30,366
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 1/105
  2. 2. 4/16/13 HTML5 at YouTube: Stories from the Front Line HTML5 at YouTube: Stories from the Front Line Greg Schechter - Web Warrior, Facebook #HTML5Video 2/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 2/105
  3. 3. 4/16/13 HTML5 at YouTube: Stories from the Front Line Greg Schechter The Web Warrior schechter@fb.com #HTML5Video 3/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 3/105
  4. 4. 4/16/13 HTML5 at YouTube: Stories from the Front Line What are conferences all about?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 4/105
  5. 5. 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 5/105
  6. 6. 4/16/13 HTML5 at YouTube: Stories from the Front Line I R one C00LZ Kat http://www.flickr.com/photos/scjn/4564274827/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 6/105
  7. 7. 4/16/13 HTML5 at YouTube: Stories from the Front Line Last years coolness #HTML5Video 7/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 7/105
  8. 8. 4/16/13 HTML5 at YouTube: Stories from the Front Line This years awesome hardware #HTML5Video 8/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 8/105
  9. 9. 4/16/13 HTML5 at YouTube: Stories from the Front Line Put them together #HTML5Video 9/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 9/105
  10. 10. 4/16/13 HTML5 at YouTube: Stories from the Front Line Put them together #HTML5Video 10/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 10/105
  11. 11. 4/16/13 HTML5 at YouTube: Stories from the Front Line Is the coolness ready to use?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 11/105
  12. 12. 4/16/13 HTML5 at YouTube: Stories from the Front Line Is ready for battlez http://www.flickr.com/photos/mycoolpics/92033686/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 12/105
  13. 13. 4/16/13 HTML5 at YouTube: Stories from the Front Line http://www.w3.org/html/logo/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 13/105
  14. 14. 4/16/13 HTML5 at YouTube: Stories from the Front Line Graphics Connectivity CSS3 Styling Device Access Offline and Performance Multimedia Storage and Integration Semantics #HTML5Video 14/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 14/105
  15. 15. 4/16/13 HTML5 at YouTube: Stories from the Front Line Who can use this stuff?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 15/105
  16. 16. 4/16/13 HTML5 at YouTube: Stories from the Front Line Depends on your usersgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 16/105
  17. 17. 4/16/13 HTML5 at YouTube: Stories from the Front Line What users I prioritize development for Chrome Firefox IE Safari Operagregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 17/105
  18. 18. 4/16/13 HTML5 at YouTube: Stories from the Front Line Why HTML5?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 18/105
  19. 19. 4/16/13 HTML5 at YouTube: Stories from the Front Line CSS3 Styling http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 19/105
  20. 20. 4/16/13 HTML5 at YouTube: Stories from the Front Line Rounded Corners <tl> sye CS S .oeo { smbx bre-ais 3x odrrdu: p; } <sye /tl> With awesomeness Without awesomeness #HTML5Video 20/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 20/105
  21. 21. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 21/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 21/105
  22. 22. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 22/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 22/105
  23. 23. 4/16/13 HTML5 at YouTube: Stories from the Front Line Why HTML5?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 23/105
  24. 24. 4/16/13 HTML5 at YouTube: Stories from the Front Line When HTML5?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 24/105
  25. 25. 4/16/13 HTML5 at YouTube: Stories from the Front Line Who can use the css3 coolness. Chrome Firefox IE Safari Operagregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 25/105
  26. 26. 4/16/13 HTML5 at YouTube: Stories from the Front Line Performance & Integration http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 26/105
  27. 27. 4/16/13 HTML5 at YouTube: Stories from the Front Line Lets talk Uploadsgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 27/105
  28. 28. 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 28/105
  29. 29. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 29/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 29/105
  30. 30. 4/16/13 HTML5 at YouTube: Stories from the Front Line XHR Uploads Oldness Upload progress Newness Upload progress #HTML5Video 30/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 30/105
  31. 31. 4/16/13 HTML5 at YouTube: Stories from the Front Line Why is XHR Uploads an improvement · Richer user experience with progress updates · Multiple file uploads · Resumable uploads · No plugin required for advanced features #HTML5Video 31/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 31/105
  32. 32. 4/16/13 HTML5 at YouTube: Stories from the Front Line Who can use the XHR upload coolness. Chrome Firefox IE Safari Operagregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 32/105
  33. 33. 4/16/13 HTML5 at YouTube: Stories from the Front Line Time to up the coolness http://www.flickr.com/photos/tjc/4320473610/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 33/105
  34. 34. 4/16/13 HTML5 at YouTube: Stories from the Front Line Multimedia http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 34/105
  35. 35. 4/16/13 HTML5 at YouTube: Stories from the Front Line video #HTML5Video 35/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 35/105
  36. 36. 4/16/13 HTML5 at YouTube: Stories from the Front Line <video> expectations · Open source technology - Browser / Player / Codec · Lower latency - No plug-in instantiation · Better performance and fidelity · Accessibility · Power Consumption* #HTML5Video 36/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 36/105
  37. 37. 4/16/13 HTML5 at YouTube: Stories from the Front Line HTML5 Video Capable Browsers Chrome Firefox IE Safari Opera #HTML5Video 37/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 37/105
  38. 38. 4/16/13 HTML5 at YouTube: Stories from the Front Line Flash Support vs. HTML5 Supportgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 38/105
  39. 39. 4/16/13 HTML5 at YouTube: Stories from the Front Line YouTube Data API Usage for Flash vs. HTML5 Devicesgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 39/105
  40. 40. 4/16/13 HTML5 at YouTube: Stories from the Front Line Lets talk mobile http://www.flickr.com/photos/indi/2579412663/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 40/105
  41. 41. 4/16/13 HTML5 at YouTube: Stories from the Front Line Why is Mobile Important #HTML5Video 41/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 41/105
  42. 42. 4/16/13 HTML5 at YouTube: Stories from the Front Line Playback Stats 6,000 Mobile DesktopPlayback in Millions 4,500 3,000 1,500 0 2010 2011 2012 Year #HTML5Video 42/105 gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 42/105
  43. 43. 4/16/13 HTML5 at YouTube: Stories from the Front Line #HTML5Video 43/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 43/105
  44. 44. 4/16/13 HTML5 at YouTube: Stories from the Front Line #HTML5Video 44/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 44/105
  45. 45. 4/16/13 HTML5 at YouTube: Stories from the Front Line #HTML5Video 45/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 45/105
  46. 46. 4/16/13 HTML5 at YouTube: Stories from the Front Line #HTML5Video 46/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 46/105
  47. 47. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 47/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 47/105
  48. 48. 4/16/13 HTML5 at YouTube: Stories from the Front Line #HTML5Video 48/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 48/105
  49. 49. 4/16/13 HTML5 at YouTube: Stories from the Front Line The Different Browsers #HTML5Video 49/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 49/105
  50. 50. 4/16/13 HTML5 at YouTube: Stories from the Front Line The Different Browsers #HTML5Video 50/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 50/105
  51. 51. 4/16/13 HTML5 at YouTube: Stories from the Front Line The Different Browsers #HTML5Video 51/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 51/105
  52. 52. 4/16/13 HTML5 at YouTube: Stories from the Front Line http://www.flickr.com/photos/brownpau/533267369/ #HTML5Video 52/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 52/105
  53. 53. 4/16/13 HTML5 at YouTube: Stories from the Front Line How do we start? <video> #HTML5Video 53/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 53/105
  54. 54. 4/16/13 HTML5 at YouTube: Stories from the Front Line The Source <video src="funny_cat_video"> #HTML5Video 54/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 54/105
  55. 55. 4/16/13 HTML5 at YouTube: Stories from the Front Line The Source <video src="funny_cat_video.webm/mp4/ogg"> #HTML5Video 55/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 55/105
  56. 56. 4/16/13 HTML5 at YouTube: Stories from the Front Line Mobile Formats Support Chrome Safari Firefox Opera IE Android H264 Android 4.1+ WebM Android 4+ Android 4+ Android 4+ HLS Android 3+ #HTML5Video 56/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 56/105
  57. 57. 4/16/13 HTML5 at YouTube: Stories from the Front Line Platform Versions and Distribution #HTML5Video 57/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 57/105
  58. 58. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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> #HTML5Video 58/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 58/105
  59. 59. 4/16/13 HTML5 at YouTube: Stories from the Front Line Powergregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 59/105
  60. 60. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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/ #HTML5Video 60/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 60/105
  61. 61. 4/16/13 HTML5 at YouTube: Stories from the Front Line Stick it in the pagegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 61/105
  62. 62. 4/16/13 HTML5 at YouTube: Stories from the Front Line Lets add a poster attribute and some click handlersgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 62/105
  63. 63. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 63/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 63/105
  64. 64. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 64/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 64/105
  65. 65. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 65/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 65/105
  66. 66. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 66/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 66/105
  67. 67. 4/16/13 HTML5 at YouTube: Stories from the Front Line Fullscreen-only <video> caveats Native controls only No overlays or custom UI Cant do captions etc. #HTML5Video 67/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 67/105
  68. 68. 4/16/13 HTML5 at YouTube: Stories from the Front Line Controls <video controls> #HTML5Video 68/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 68/105
  69. 69. 4/16/13 HTML5 at YouTube: Stories from the Front Line Controlsgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 69/105
  70. 70. 4/16/13 HTML5 at YouTube: Stories from the Front Line Native Controls Support Chrome Safari Firefox Opera IE Android Play/pause Button Volume Mute toggle Dont work in Controls Only in Fullscreen only Android 4 Seek bar Fullscreen Button Button and gesture Button Fullscreen only on Determined by Fullscreen Playback Type Both phones Inline only hardware only Both #HTML5Video 70/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 70/105
  71. 71. 4/16/13 HTML5 at YouTube: Stories from the Front Line Custom Controls · Preserve your brand · Unified experience across platforms and browsers #HTML5Video 71/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 71/105
  72. 72. 4/16/13 HTML5 at YouTube: Stories from the Front Line Custom Controlsgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 72/105
  73. 73. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 73/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 73/105
  74. 74. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 74/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 74/105
  75. 75. 4/16/13 HTML5 at YouTube: Stories from the Front Line Fullscreen #HTML5Video 75/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 75/105
  76. 76. 4/16/13 HTML5 at YouTube: Stories from the Front Line requestFullscreen #HTML5Video 76/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 76/105
  77. 77. 4/16/13 HTML5 at YouTube: Stories from the Front Line What about Mobile? #HTML5Video 77/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 77/105
  78. 78. 4/16/13 HTML5 at YouTube: Stories from the Front Line Isnt it already fullscreen? #HTML5Video 78/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 78/105
  79. 79. 4/16/13 HTML5 at YouTube: Stories from the Front Line Yes (sort of) #HTML5Video 79/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 79/105
  80. 80. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 80/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 80/105
  81. 81. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay <video autoplay> #HTML5Video 81/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 81/105
  82. 82. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay #HTML5Video 82/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 82/105
  83. 83. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 83/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 83/105
  84. 84. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay What about everyone else? #HTML5Video 84/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 84/105
  85. 85. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay Support Chrome Safari Firefox Opera IE Android Attribute Scripted Buggy, going away #HTML5Video 85/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 85/105
  86. 86. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay #HTML5Video 86/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 86/105
  87. 87. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay <video onclick="this.play()"> #HTML5Video 87/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 87/105
  88. 88. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay #HTML5Video 88/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 88/105
  89. 89. 4/16/13 HTML5 at YouTube: Stories from the Front Line Autoplay #HTML5Video 89/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 89/105
  90. 90. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 90/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 90/105
  91. 91. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 91/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 91/105
  92. 92. 4/16/13 HTML5 at YouTube: Stories from the Front Line Embeds in an HTML5 world #HTML5Video 92/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 92/105
  93. 93. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 93/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 93/105
  94. 94. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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) #HTML5Video 94/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 94/105
  95. 95. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 , , ) } #HTML5Video 95/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 95/105
  96. 96. 4/16/13 HTML5 at YouTube: Stories from the Front Line Offline and Storage http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 96/105
  97. 97. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 97/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 97/105
  98. 98. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 98/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 98/105
  99. 99. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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) } #HTML5Video 99/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 99/105
  100. 100. 4/16/13 HTML5 at YouTube: Stories from the Front Line 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 #HTML5Video 100/105gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 100/105
  101. 101. 4/16/13 HTML5 at YouTube: Stories from the Front Line So is the coolness ready?gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 101/105
  102. 102. 4/16/13 HTML5 at YouTube: Stories from the Front Line Yes And not only do your users want it, they need itgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 102/105
  103. 103. 4/16/13 HTML5 at YouTube: Stories from the Front Line <Thank You!>gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 103/105
  104. 104. 4/16/13 HTML5 at YouTube: Stories from the Front Line can haz question? http://www.flickr.com/photos/cloudzilla/378829651/gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 104/105
  105. 105. 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 105/105

×