Mobile meow - bringing videos to a mobile world

  • 954 views
Uploaded on

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
No Downloads

Views

Total Views
954
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 3/30/13 Mobile Meow: Bringing Videos to a Mobile Worldgregthebusker.com/html5/mobile_meow_codemotion.html#1 1/75
  • 2. 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. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Powergregthebusker.com/html5/mobile_meow_codemotion.html#1 31/75
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Controlsgregthebusker.com/html5/mobile_meow_codemotion.html#1 41/75
  • 42. 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
  • 43. 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
  • 44. 3/30/13 Mobile Meow: Bringing Videos to a Mobile World Custom Controlsgregthebusker.com/html5/mobile_meow_codemotion.html#1 44/75
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 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
  • 73. 3/30/13 Mobile Meow: Bringing Videos to a Mobile World <Thank You!>gregthebusker.com/html5/mobile_meow_codemotion.html#1 73/75
  • 74. 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
  • 75. 3/30/13 Mobile Meow: Bringing Videos to a Mobile Worldgregthebusker.com/html5/mobile_meow_codemotion.html#1 75/75