http://gregthebusker.com/html5/slides.html Google I/O 2012 talk Is HTML5 ready for production code? Of course it is. This is a look into all the different HTML5 technologies we use in live code at YouTube. We'll have a collection of tips, tricks, and best practices for HTML5 video, the track tag, getUserMedia, and more. Plus a deep dive into Mobile Video Tag development.

1. 3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 1/105

2. 3/30/13 Google IO 2012
HTML5 at YouTube
Stories from the Mobile Front
Greg Schechter - Web Warrior, YouTube
Zoltan Szego - Software Engineer, YouTube
gregthebusker.com/html5/slides.html#9 2/105

3. 3/30/13 Google IO 2012
Greg Schechter Zoltan Szego
The Web Warrior Phone Wrangler
schechter@youtube.com zszego@google.com
#io12 3/105
gregthebusker.com/html5/slides.html#9 3/105

4. 3/30/13 Google IO 2012
What's Google IO about?
gregthebusker.com/html5/slides.html#9 4/105

5. 3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 5/105

6. 3/30/13 Google IO 2012
I R one C00LZ Kat
http://www.flickr.com/photos/scjn/4564274827/
gregthebusker.com/html5/slides.html#9 6/105

7. 3/30/13 Google IO 2012
Last year's coolness
#io12 7/105
gregthebusker.com/html5/slides.html#9 7/105

8. 3/30/13 Google IO 2012
This year's awesome hardware
#io12 8/105
gregthebusker.com/html5/slides.html#9 8/105

9. 3/30/13 Google IO 2012
Put them together
#io12 9/105
gregthebusker.com/html5/slides.html#9 9/105

10. 3/30/13 Google IO 2012
Put them together
#io12 10/105
gregthebusker.com/html5/slides.html#9 10/105

11. 3/30/13 Google IO 2012
Is the coolness ready to use?
gregthebusker.com/html5/slides.html#9 11/105

12. 3/30/13 Google IO 2012
I's ready for battlez
http://www.flickr.com/photos/mycoolpics/92033686/
gregthebusker.com/html5/slides.html#9 12/105

13. 3/30/13 Google IO 2012
http://www.w3.org/html/logo/
gregthebusker.com/html5/slides.html#9 13/105

14. 3/30/13 Google IO 2012
·
#io12 14/105
Graphics
gregthebusker.com/html5/slides.html#9 14/105

15. 3/30/13 Google IO 2012
Who can use this stuff?
gregthebusker.com/html5/slides.html#9 15/105

16. 3/30/13 Google IO 2012
Depends on your users
gregthebusker.com/html5/slides.html#9 16/105

17. 3/30/13 Google IO 2012
What users I prioritize development for
Chrome
Firefox IE
Safari Opera
gregthebusker.com/html5/slides.html#9 17/105

18. 3/30/13 Google IO 2012
Why HTML5?
gregthebusker.com/html5/slides.html#9 18/105

19. 3/30/13 Google IO 2012
CSS3 Styling
http://www.flickr.com/photos/dannykboyd/5048495262/
gregthebusker.com/html5/slides.html#9 19/105

20. 3/30/13 Google IO 2012
Rounded Corners
<tl>
sye CS
S
.oeo {
smbx
bre-ais 3x
odrrdu: p;
}
<sye
/tl>
With awesomeness
Without awesomeness
#io12 20/105
gregthebusker.com/html5/slides.html#9 20/105

21. 3/30/13 Google IO 2012
Transitions
<tl>
sye CS
S
.oeo {
smbx
-ekttasto:hih 1,oaiy1 1;
wbi-rniin egt s pct s s
-o-rniin hih 1,oaiy1 1;
mztasto: egt s pct s s
-stasto:hih 1,oaiy1 1;
m-rniin egt s pct s s
--rniin hih 1,oaiy1 1;
otasto: egt s pct s s
tasto:hih 1 oaiy1 1;
rniin egt , pct s s
}
<sye
/tl>
With Awesomeness Without Awesomeness
Awesome Information Awesome Information
#io12 21/105
gregthebusker.com/html5/slides.html#9 21/105

22. 3/30/13 Google IO 2012
What CSS3 gets us
· Enhance the user experience
· Less code
· Faster preformance
· Less wasted development time and less hacks
· The experience without it is still good
#io12 22/105
gregthebusker.com/html5/slides.html#9 22/105

23. 3/30/13 Google IO 2012
Why HTML5?
gregthebusker.com/html5/slides.html#9 23/105

24. 3/30/13 Google IO 2012
When HTML5?
gregthebusker.com/html5/slides.html#9 24/105

25. 3/30/13 Google IO 2012
Who can use the css3 coolness.
Chrome
Firefox IE
Safari Opera
gregthebusker.com/html5/slides.html#9 25/105

26. 3/30/13 Google IO 2012
Performance &
Integration
http://www.flickr.com/photos/dannykboyd/5048495262/
gregthebusker.com/html5/slides.html#9 26/105

27. 3/30/13 Google IO 2012
Let's talk Uploads
gregthebusker.com/html5/slides.html#9 27/105

28. 3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 28/105

29. 3/30/13 Google IO 2012
XHR Uploads
<cit
srp> JVSRP
AACIT
fnto ula(lbrie {
ucin podboOFl)
vrxr=nwXLtpeus(;
a h e MHtRqet)
xroe(PS' 'sre' tu)
h.pn'OT, /evr, re;
xrola =fnto(){..}
h.nod ucine . ;
/ Lse t teula pors.
/ itn o h pod rges
vrporsBr=dcmn.urSlco(pors';
a rgesa ouetqeyeetr'rges)
xrula.nrges=fnto(){
h.podopors ucine
i (.eghoptbe {
f elntCmual)
porsBrvle=(.odd/ettl *10
rgesa.au elae .oa) 0;
porsBrtxCnet=porsBrvle / Flbc fruspotdbosr.
rgesa.etotn rgesa.au; / alak o nupre rwes
}
};
xrsn(lbrie;
h.edboOFl)
}
<srp>
/cit
#io12 29/105
gregthebusker.com/html5/slides.html#9 29/105

30. 3/30/13 Google IO 2012
XHR Uploads
Oldness
Upload progress
Newness
Upload progress
#io12 30/105
gregthebusker.com/html5/slides.html#9 30/105

31. 3/30/13 Google IO 2012
Why is XHR Uploads an improvement
· Richer user experience with progress updates
· Multiple file uploads
· Resumable uploads
· No plugin required for advanced features
#io12 31/105
gregthebusker.com/html5/slides.html#9 31/105

32. 3/30/13 Google IO 2012
Who can use the XHR upload coolness.
Chrome
Firefox IE
Safari Opera
gregthebusker.com/html5/slides.html#9 32/105

33. 3/30/13 Google IO 2012
Time to up the coolness
http://www.flickr.com/photos/tjc/4320473610/
gregthebusker.com/html5/slides.html#9 33/105

34. 3/30/13 Google IO 2012
Multimedia
http://www.flickr.com/photos/dannykboyd/5048495262/
gregthebusker.com/html5/slides.html#9 34/105

35. 3/30/13 Google IO 2012
#io12 35/105
gregthebusker.com/html5/slides.html#9 35/105

36. 3/30/13 Google IO 2012
<video> expectations
· Open source technology
- Browser / Player / Codec
· Lower latency
- No plug-in instantiation
· Better performance and fidelity
· Accessibility
· Power Consumption*
#io12 36/105
gregthebusker.com/html5/slides.html#9 36/105

37. 3/30/13 Google IO 2012
HTML5 Video Capable Browsers
Chrome
Firefox IE
Safari Opera
#io12 37/105
gregthebusker.com/html5/slides.html#9 37/105

38. 3/30/13 Google IO 2012
Flash Support vs. HTML5 Support
gregthebusker.com/html5/slides.html#9 38/105

39. 3/30/13 Google IO 2012
YouTube Data API Usage for Flash vs. HTML5
Devices
gregthebusker.com/html5/slides.html#9 39/105

40. 3/30/13 Google IO 2012
Let's talk mobile
http://www.flickr.com/photos/indi/2579412663/
gregthebusker.com/html5/slides.html#9 40/105

41. 3/30/13 Google IO 2012
Why is Mobile Important
#io12 41/105
gregthebusker.com/html5/slides.html#9 41/105

42. 3/30/13 Google IO 2012
Playback Stats
6,000
Playback in Millions
4,500
3,000
1,500
0
2010 2011 2012
Year
#io12 42/105
gregthebusker.com/html5/slides.html#9 42/105

43. 3/30/13 Google IO 2012
#io12 43/105
gregthebusker.com/html5/slides.html#9 43/105

44. 3/30/13 Google IO 2012
#io12 44/105
gregthebusker.com/html5/slides.html#9 44/105

45. 3/30/13 Google IO 2012
#io12 45/105
gregthebusker.com/html5/slides.html#9 45/105

46. 3/30/13 Google IO 2012
#io12 46/105
gregthebusker.com/html5/slides.html#9 46/105

47. 3/30/13 Google IO 2012
Native
· For fallbacks, use rtsp:// protocol (serving .3gp) if the device won't support
HTML5
· Use custom protocol / URL scheme to launch the native app (on Android / BB:
vdyuuevdoi)
n.otb:ie_d
· iOS special-cases the YouTube Flash embed code
#io12 47/105
gregthebusker.com/html5/slides.html#9 47/105

48. 3/30/13 Google IO 2012
#io12 48/105
gregthebusker.com/html5/slides.html#9 48/105

49. 3/30/13 Google IO 2012
The Different Browsers
#io12 49/105
gregthebusker.com/html5/slides.html#9 49/105

50. 3/30/13 Google IO 2012
The Different Browsers
#io12 50/105
gregthebusker.com/html5/slides.html#9 50/105

51. 3/30/13 Google IO 2012
The Different Browsers
#io12 51/105
gregthebusker.com/html5/slides.html#9 51/105

52. 3/30/13 Google IO 2012
http://www.flickr.com/photos/brownpau/533267369/
#io12 52/105
gregthebusker.com/html5/slides.html#9 52/105

53. 3/30/13 Google IO 2012
How do we start?
<video>
#io12 53/105
gregthebusker.com/html5/slides.html#9 53/105

54. 3/30/13 Google IO 2012
The Source
<video src="funny_cat_video">
#io12 54/105
gregthebusker.com/html5/slides.html#9 54/105

55. 3/30/13 Google IO 2012
The Source
<video src="funny_cat_video.webm/mp4/ogg">
#io12 55/105
gregthebusker.com/html5/slides.html#9 55/105

56. 3/30/13 Google IO 2012
Mobile Formats Support
Chrome Safari Firefox Opera IE Android
H264 Android 4.1+
WebM Android 4+ Android 4+ Android 4+
HLS Android 3+
#io12 56/105
gregthebusker.com/html5/slides.html#9 56/105

57. 3/30/13 Google IO 2012
Platform Versions and Distribution
#io12 57/105
gregthebusker.com/html5/slides.html#9 57/105

58. 3/30/13 Google IO 2012
The Source
<ie>
vdo HM
TL
<oresc"un_a_ie. p "
suc r=fnyctvdom 4 >
<oresc"un_a_ie. e m >
suc r=fnyctvdow b "
<vdo
/ie>
#io12 58/105
gregthebusker.com/html5/slides.html#9 58/105

59. 3/30/13 Google IO 2012
Power
gregthebusker.com/html5/slides.html#9 59/105

60. 3/30/13 Google IO 2012
Playback Stats
Software
idle Hardware
webm
h264
flash
700 800 900 1,000 1,100
Mean current draw (milliamps)
Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/
#io12 60/105
gregthebusker.com/html5/slides.html#9 60/105

61. 3/30/13 Google IO 2012
Stick it in the page
gregthebusker.com/html5/slides.html#9 61/105

62. 3/30/13 Google IO 2012
Let's add a poster attribute and some click
handlers
gregthebusker.com/html5/slides.html#9 62/105

63. 3/30/13 Google IO 2012
Video Poster
Very different behavior in different browsers
· Stretch poster image to < i e >element size, or fit proportionally
vdo
· May replace poster image with a paused frame from the video
· May overlay a play icon that is different for each platform
#io12 63/105
gregthebusker.com/html5/slides.html#9 63/105

64. 3/30/13 Google IO 2012
Video Poster Pro Tips
Protips for a consistent look:
· Render your own cued state: < m >for the poster, play icon
ig
· Replace with the < i e >when it's time to play
vdo
· Set the background color to black for continuity across platforms
#io12 64/105
gregthebusker.com/html5/slides.html#9 64/105

65. 3/30/13 Google IO 2012
How do videos play back?
1. Inline in the page
· iPad
· Android 4.0 and up
· Chrome
2. Always fullscreen, no matter what
· iPhone, iPod
· Android 2.2 - 3.0
· Windows Phone
#io12 65/105
gregthebusker.com/html5/slides.html#9 65/105

66. 3/30/13 Google IO 2012
Fullscreen-only <video>
Video element can be stuck anywhere on the page
· 1x1 pixels, or offscreen
· but: has to be in the DOM, can't be visibility:hidden or display:none
· just call play() to go fullscreen
· iPhone: zoom-in animation from <video>'s position
On webkit, good interaction with your webapp
· Video events still fire: timeupdate, ended etc.
· Free to change web page in the background
· webkitbeginfullscreen, webkitendfullscreen events
#io12 66/105
gregthebusker.com/html5/slides.html#9 66/105

67. 3/30/13 Google IO 2012
Fullscreen-only <video> caveats
Native controls only
No overlays or custom UI
Can't do captions etc.
#io12 67/105
gregthebusker.com/html5/slides.html#9 67/105

68. 3/30/13 Google IO 2012
Controls
<video controls>
#io12 68/105
gregthebusker.com/html5/slides.html#9 68/105

69. 3/30/13 Google IO 2012
Controls
gregthebusker.com/html5/slides.html#9 69/105

70. 3/30/13 Google IO 2012
Native Controls Support
Chrome Safari Firefox Opera IE Android
Play/pause
Button
Volume Only in Fullscreen Mute toggle Don't work in
Controls only Android 4
Seek bar
Fullscreen Button Button and gesture Button
Playback Type Both Fullscreen only on Inline only Determined by Fullscreen Both
phones hardware only
#io12 70/105
gregthebusker.com/html5/slides.html#9 70/105

71. 3/30/13 Google IO 2012
Custom Controls
· Preserve your brand
· Unified experience across platforms and browsers
#io12 71/105
gregthebusker.com/html5/slides.html#9 71/105

72. 3/30/13 Google IO 2012
Custom Controls
gregthebusker.com/html5/slides.html#9 72/105

73. 3/30/13 Google IO 2012
Custom Controls
· Preserve your brand
· Unified experience across platforms and browsers
· Allows us to expand the set of controls and add our own
- Annotations
- Playlist
- Captions
- More
#io12 73/105
gregthebusker.com/html5/slides.html#9 73/105

74. 3/30/13 Google IO 2012
Custom Controls Pro Tips
· User expect to be able to drag the progress bar
- Need to remender to prevent scroll on touchstart
· Volume can't be set everywhere and users are accustomed to using device
controls
- So don't build controls for it
· Fingers are fat
- Average finger is 11mm so make targets at least 40px with 10px padding
- Use SVG's so icons can be scaled and shared with desktop application
· Don't trigger content with hover
· Fullscreen
- The browsing context is always fullscreen so fake it
#io12 74/105
gregthebusker.com/html5/slides.html#9 74/105

75. 3/30/13 Google IO 2012
Fullscreen
#io12 75/105
gregthebusker.com/html5/slides.html#9 75/105

76. 3/30/13 Google IO 2012
requestFullscreen
#io12 76/105
gregthebusker.com/html5/slides.html#9 76/105

77. 3/30/13 Google IO 2012
What about Mobile?
#io12 77/105
gregthebusker.com/html5/slides.html#9 77/105

78. 3/30/13 Google IO 2012
Isn't it already fullscreen?
#io12 78/105
gregthebusker.com/html5/slides.html#9 78/105

79. 3/30/13 Google IO 2012
Yes (sort of)
#io12 79/105
gregthebusker.com/html5/slides.html#9 79/105

80. 3/30/13 Google IO 2012
Mobile Fullscreen
· Open New Tab
· Remember size context changes so use viewport to scale icons and controls
- @viewport { width: device-width; }
· webkitEnterFullscreen
- Webkit only
- Just the video element
- Native controls only
- metadata must be loaded
- Only in click event
#io12 80/105
gregthebusker.com/html5/slides.html#9 80/105

81. 3/30/13 Google IO 2012
Autoplay
<video autoplay>
#io12 81/105
gregthebusker.com/html5/slides.html#9 81/105

82. 3/30/13 Google IO 2012
Autoplay
#io12 82/105
gregthebusker.com/html5/slides.html#9 82/105

83. 3/30/13 Google IO 2012
Autoplay
· Doesn't work! Restriction: need user action.
· Why?
- On a cell network - users charged for data
- Slow downloads, let the user decide
· Where?
- Safari on iOS (iPad included, even on WIFI)
- Android Browser (4.0+)
- Chrome on Android
#io12 83/105
gregthebusker.com/html5/slides.html#9 83/105

84. 3/30/13 Google IO 2012
Autoplay
What about everyone else?
#io12 84/105
gregthebusker.com/html5/slides.html#9 84/105

85. 3/30/13 Google IO 2012
Autoplay Support
Chrome Safari Firefox Opera IE Android
Attribute
Scripted Buggy, going away
#io12 85/105
gregthebusker.com/html5/slides.html#9 85/105

86. 3/30/13 Google IO 2012
Autoplay
#io12 86/105
gregthebusker.com/html5/slides.html#9 86/105

87. 3/30/13 Google IO 2012
Autoplay
<video onclick="this.play()">
#io12 87/105
gregthebusker.com/html5/slides.html#9 87/105

88. 3/30/13 Google IO 2012
Autoplay
#io12 88/105
gregthebusker.com/html5/slides.html#9 88/105

89. 3/30/13 Google IO 2012
Autoplay
#io12 89/105
gregthebusker.com/html5/slides.html#9 89/105

90. 3/30/13 Google IO 2012
Autoplay
<cit
srp> JVSRP
AACIT
fnto smCikvn(v){
ucin oelcEetet
/ I aue iiitdtra.
/ n sr ntae hed
mVdolmn.od) / Mgcicnaint eal pa( ltro!
yieEeetla(; / ai natto o nbe ly) ae n
gtieDt(;/ Tigr a aa cl.
eVdoaa) / rges n jx al
}
fnto oGtieDtRtre(aa {
ucin neVdoaaeunddt)
/ Nti aue iiitdtra.
/ o n sr ntae hed
stieEeetr(aa;
eVdolmnScdt)
mVdolmn.od)
yieEeetla(;
mVdolmn.ly)
yieEeetpa(;
}
<srp>
/cit
#io12 90/105
gregthebusker.com/html5/slides.html#9 90/105

91. 3/30/13 Google IO 2012
Autoplay
<cit
srp> JVSRP
AACIT
fnto smCikvn(v){
ucin oelcEetet
/ I aue iiitdtra.
/ n sr ntae hed
mVdolmn.od) / Mgcicnaint eal pa( ltro!
yieEeetla(; / ai natto o nbe ly) ae n
gtieDt(;/ Tigr a aa cl.
eVdoaa) / rges n jx al
}
fnto oGtieDtRtre(aa {
ucin neVdoaaeunddt)
/ Nti aue iiitdtra.
/ o n sr ntae hed
stieEeetr(aa;
eVdolmnScdt)
mVdolmn.od)
yieEeetla(;
/ FrAdod
/ o nri
wno.eTmotfnto( {
idwstieu(ucin)
mVdolmn.ly)
yieEeetpa(;
} 0;
, )
}
<srp>
/cit
#io12 91/105
gregthebusker.com/html5/slides.html#9 91/105

92. 3/30/13 Google IO 2012
Embeds in an HTML5 world
#io12 92/105
gregthebusker.com/html5/slides.html#9 92/105

93. 3/30/13 Google IO 2012
Embeds
· <script>
- We need our content to be sandboxed
- More than just a video tag
· <object>
- Can load content with the data attribute
- But no way to interact with it via JavaScript
· <iframe>
- Allows our content to be sandboxed
- JavaScript API communication
#io12 93/105
gregthebusker.com/html5/slides.html#9 93/105

94. 3/30/13 Google IO 2012
Embeds
<faetp=tx/tl
irm ye"ethm" HM
TL
wdh"4"
it=60
hih=35
egt"8"
faeodr""
rmbre=0
sc"tp/wwyuuecmebdVDOI"
r=ht:/w.otb.o/me/IE_D
alwulcen
loflsre>
<irm>
/fae
· Plan for the future (if you can)
#io12 94/105
gregthebusker.com/html5/slides.html#9 94/105

95. 3/30/13 Google IO 2012
Iframe Pro Tips
hm {
tl CS
S
/*Hc t fxihn rszn.*
* ak o i Poe eiig /
oefo:hde;
vrlw idn
}
bd {
oy CS
S
/*DmncRszn */
* yai eiig *
bcgon-oo:#0;
akrudclr 00
hih:10;
egt 0%
wdh 10;
it: 0%
/*Rmv hglgtwe uecik */
* eoe ihih hn s lcs *
-ekttphglgtclr rb(,0 0 0;
wbi-a-ihih-oo: ga0 , , )
}
#io12 95/105
gregthebusker.com/html5/slides.html#9 95/105

96. 3/30/13 Google IO 2012
Offline and Storage
http://www.flickr.com/photos/dannykboyd/5048495262/
gregthebusker.com/html5/slides.html#9 96/105

97. 3/30/13 Google IO 2012
Appcache
· Offline mode for a video streaming site - useless?
· More that just offline access: saves on latency every visit
· Pay for code size twice: download + parse time
· Saves the download time
#io12 97/105
gregthebusker.com/html5/slides.html#9 97/105

98. 3/30/13 Google IO 2012
Appcache
<tlmnfs=mnfs_r"
hm aiet"aietul> HM
TL
<citsc"citj"/
srp r=srp.s >
<ikrl"tlset he=syecs /
ln e=syehe" rf"tl.s" >
<hm>
/tl
CCEMNFS
AH AIET HM
TL
CCE
AH:
srp.s
citj
syecs
tl.s
NTOK
EWR:
fl_oawy_odjg
iet_lasla.p
#io12 98/105
gregthebusker.com/html5/slides.html#9 98/105

99. 3/30/13 Google IO 2012
Appcache - How to force an update?
CCEMNFS
AH AIET HM
TL
CCE
AH:
foj
o.s
#Biddt:2102
ul ae 0268
/ Rno AA rsos
/ adm JX epne JVSRP
AACIT
{"aa:..
dt" .,
"ulDt" 2102 }
bidae: 0268
v r s r p B i d a e = 2 1 0 2 ; / A t - e e a e d r n b i d o pJ V S R P
a citulDt 0 2 6 1 / u o g n r t d u i g u l r uA A C I T
sh
i (oeepnebidae>srpBidae {
f smRsos.ulDt citulDt)
wno.plctoCceudt(;
idwapiainah.pae)
}
#io12 99/105
gregthebusker.com/html5/slides.html#9 99/105

100. 3/30/13 Google IO 2012
Appcache gotchas
· GET parameters on cached resources bypass the cache
· Strict implementations (eg. iOS5) refuse to download files not in the manifest
· since YouTube streams from many domains, we just put
NTOK *
EWR:
· Can get wrong in a scary way
· Users stuck on old code
· Create multiple copies of the entire site in the cache
· Easy to break master URL
· some redirects to an appcached site: 303 or history.replaceState
· history.pushState before background download completes
· Some implementations are buggy
#io12 100/105
gregthebusker.com/html5/slides.html#9 100/105

101. 3/30/13 Google IO 2012
So is the coolness ready?
gregthebusker.com/html5/slides.html#9 101/105

102. 3/30/13 Google IO 2012
Yes
And not only do your users want it, they need it
gregthebusker.com/html5/slides.html#9 102/105

103. 3/30/13 Google IO 2012
<Thank You!>
Greg Schechter
Zoltan Szego
www.youtube.com/dev
gregthebusker.com/html5/slides.html#9 103/105

104. 3/30/13 Google IO 2012
can haz question?
http://www.flickr.com/photos/cloudzilla/378829651/
gregthebusker.com/html5/slides.html#9 104/105

105. 3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 105/105