Html5 at YouTube: Stories from the Front Line
Upcoming SlideShare
Loading in...5
×
 

Html5 at YouTube: Stories from the Front Line

on

  • 28,359 views

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

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.

Statistics

Views

Total Views
28,359
Views on SlideShare
28,359
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 at YouTube: Stories from the Front Line Html5 at YouTube: Stories from the Front Line Document Transcript

  • 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 1/105
  • 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
  • 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 View slide
  • 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 View slide
  • 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 5/105
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 28/105
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 4/16/13 HTML5 at YouTube: Stories from the Front Line Powergregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 59/105
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 4/16/13 HTML5 at YouTube: Stories from the Front Line Controlsgregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 69/105
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 4/16/13 HTML5 at YouTube: Stories from the Front Linegregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 105/105