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.
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
HTML5 at YouTube: Stories from the Front Line
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
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
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
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
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
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
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
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