Mobile meow - bringing videos to a mobile world
Upcoming SlideShare
Loading in...5
×
 

Mobile meow - bringing videos to a mobile world

on

  • 1,141 views

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

http://gregthebusker.com/html5/mobile_meow_codemotion.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 story about the glory and struggle of bringing a high quality video experience to the mobile web.

Statistics

Views

Total Views
1,141
Views on SlideShare
1,134
Embed Views
7

Actions

Likes
1
Downloads
2
Comments
1

1 Embed 7

http://rome.codemotionworld.com 7

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…
  • This pdf version isn't the best. Check out the HTML5 one at gregthebusker.com/html5/mobile_meow_codemotion.html
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile meow - bringing videos to a mobile world Mobile meow - bringing videos to a mobile world Document Transcript

  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile Worldgregthebusker.com/html5/mobile_meow_codemotion.html#1 1/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Mobile Meow: Bringing Videos to a Mobile World Greg Schechter - Web Warrior, Facebook #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/gregthebusker.com/html5/mobile_meow_codemotion.html#1 2/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Greg Schechter The Web Warrior schechter@fb.com #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 3/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 3/75 View slide
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World http://www.w3.org/html/logo/gregthebusker.com/html5/mobile_meow_codemotion.html#1 4/75 View slide
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Graphics Connectivity CSS3 Styling Device Access Offline and Performance Multimedia Storage and Integration Semantics #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 5/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 5/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Multimedia http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/mobile_meow_codemotion.html#1 6/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World video #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 7/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 7/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World <video> expectations · Open source technology - Browser / Player / Codec · Lower latency - No plug-in instantiation · Better performance and fidelity · Accessibility · Power Consumption* #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 8/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 8/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World HTML5 Video Capable Browsers Chrome Firefox IE Safari Opera #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 9/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 9/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Flash Support vs. HTML5 Supportgregthebusker.com/html5/mobile_meow_codemotion.html#1 10/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World YouTube Data API Usage for Flash vs. HTML5 Devicesgregthebusker.com/html5/mobile_meow_codemotion.html#1 11/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Lets talk mobile http://www.flickr.com/photos/indi/2579412663/gregthebusker.com/html5/mobile_meow_codemotion.html#1 12/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Why is Mobile Important #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 13/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 13/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Playback Stats 6,000 Mobile DesktopPlayback in Millions 4,500 3,000 1,500 0 2010 2011 2012 Year #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 14/75 gregthebusker.com/html5/mobile_meow_codemotion.html#1 14/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 15/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 15/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 16/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 16/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 17/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 17/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 18/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 18/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 19/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 19/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 20/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 20/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World The Different Browsers #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 21/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 21/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World The Different Browsers #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 22/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 22/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World The Different Browsers #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 23/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 23/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World http://www.flickr.com/photos/brownpau/533267369/ #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 24/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 24/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World How do we start? <video> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 25/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 25/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World The Source <video src="funny_cat_video"> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 26/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 26/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World The Source <video src="funny_cat_video.webm/mp4/ogg"> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 27/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 27/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Mobile Formats Support Chrome Safari Firefox Opera IE Android H264 Android 4.1+ WebM Android 4+ Android 4+ Android 4+ HLS Android 3+ #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 28/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 28/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Platform Versions and Distribution #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 29/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 29/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 30/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 30/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Powergregthebusker.com/html5/mobile_meow_codemotion.html#1 31/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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/ #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 32/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 32/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Stick it in the pagegregthebusker.com/html5/mobile_meow_codemotion.html#1 33/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Lets add a poster attribute and some click handlersgregthebusker.com/html5/mobile_meow_codemotion.html#1 34/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 35/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 35/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 36/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 36/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 37/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 37/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 38/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 38/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Fullscreen-only <video> caveats Native controls only No overlays or custom UI Cant do captions etc. #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 39/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 39/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Controls <video controls> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 40/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 40/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Controlsgregthebusker.com/html5/mobile_meow_codemotion.html#1 41/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 42/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 42/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Custom Controls · Preserve your brand · Unified experience across platforms and browsers #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 43/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 43/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Custom Controlsgregthebusker.com/html5/mobile_meow_codemotion.html#1 44/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 45/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 45/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 46/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 46/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Fullscreen #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 47/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 47/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World requestFullscreen #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 48/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 48/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World What about Mobile? #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 49/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 49/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Isnt it already fullscreen? #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 50/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 50/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Yes (sort of) #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 51/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 51/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 52/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 52/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay <video autoplay> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 53/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 53/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 54/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 54/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 55/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 55/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay What about everyone else? #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 56/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 56/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay Support Chrome Safari Firefox Opera IE Android Attribute Scripted Buggy, going away #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 57/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 57/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 58/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 58/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay <video onclick="this.play()"> #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 59/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 59/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 60/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 60/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Autoplay #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 61/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 61/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 62/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 62/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 63/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 63/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Embeds in an HTML5 world #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 64/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 64/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 65/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 65/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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) #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 66/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 66/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 , , ) } #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 67/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 67/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Offline and Storage http://www.flickr.com/photos/dannykboyd/5048495262/gregthebusker.com/html5/mobile_meow_codemotion.html#1 68/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 69/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 69/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 70/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 70/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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) } #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 71/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 71/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World 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 #mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 72/75gregthebusker.com/html5/mobile_meow_codemotion.html#1 72/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World <Thank You!>gregthebusker.com/html5/mobile_meow_codemotion.html#1 73/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile World can haz question? http://www.flickr.com/photos/cloudzilla/378829651/gregthebusker.com/html5/mobile_meow_codemotion.html#1 74/75
  • 3/30/13 Mobile Meow: Bringing Videos to a Mobile Worldgregthebusker.com/html5/mobile_meow_codemotion.html#1 75/75