Html5 at YouTube: Stories from the Front Line

4/16/13 HTML5 at YouTube: Stories from the Front Line

gregthebusker.com/html5/html5_at_youtube_u_of_i.html#1 1/105


HTML5 at YouTube: Stories from
the Front Line
Greg Schechter - Web Warrior, Facebook

#HTML5Video 2/105



Greg Schechter
The Web Warrior

schechter@fb.com

#HTML5Video 3/105



What are conferences all
about?



I R one C00LZ Kat

http://www.flickr.com/photos/scjn/4564274827/



Last year's coolness

#HTML5Video 7/105



This year's awesome hardware

#HTML5Video 8/105



Put them together

#HTML5Video 9/105



Put them together

#HTML5Video 10/105



Is the coolness ready to use?



I's ready for battlez

http://www.flickr.com/photos/mycoolpics/92033686/



http://www.w3.org/html/logo/



Graphics Connectivity CSS3 Styling Device Access

Offline and Performance
Multimedia Storage and Integration Semantics

#HTML5Video 14/105



Who can use this stuff?



Depends on your users



What users I prioritize development for

Chrome

Firefox IE

Safari Opera



Why HTML5?



CSS3 Styling

http://www.flickr.com/photos/dannykboyd/5048495262/



Rounded Corners
<tl>
sye CS
S
.oeo {
smbx
bre-ais 3x
odrrdu: p;
}
<sye
/tl>

With awesomeness

Without awesomeness

#HTML5Video 20/105



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/105



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/105



Why HTML5?



When HTML5?



Who can use the css3 coolness.

Chrome

Firefox IE

Safari Opera



Performance &
Integration




Let's talk Uploads



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

#HTML5Video 29/105



XHR Uploads

Oldness
Upload progress

Newness
Upload progress

#HTML5Video 30/105



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/105



Who can use the XHR upload coolness.

Chrome

Firefox IE

Safari Opera



Time to up the coolness

http://www.flickr.com/photos/tjc/4320473610/



Multimedia




video

#HTML5Video 35/105



<video> expectations
· Open source technology
- Browser / Player / Codec
· Lower latency
- No plug-in instantiation
· Better performance and fidelity
· Accessibility
· Power Consumption*

#HTML5Video 36/105



HTML5 Video Capable Browsers

Chrome

Firefox IE

Safari Opera

#HTML5Video 37/105



Flash Support vs. HTML5 Support



YouTube Data API Usage for Flash vs. HTML5
Devices



Let's talk mobile

http://www.flickr.com/photos/indi/2579412663/



Why is Mobile Important

#HTML5Video 41/105



Playback Stats

6,000 Mobile
Desktop
Playback in Millions

4,500

3,000

1,500

0
2010 2011 2012
Year

#HTML5Video 42/105



#HTML5Video 43/105



#HTML5Video 44/105



#HTML5Video 45/105



#HTML5Video 46/105



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

#HTML5Video 47/105



#HTML5Video 48/105



The Different Browsers

#HTML5Video 49/105




#HTML5Video 50/105




#HTML5Video 51/105



http://www.flickr.com/photos/brownpau/533267369/

#HTML5Video 52/105



How do we start?

<video>

#HTML5Video 53/105



The Source

<video src="funny_cat_video">

#HTML5Video 54/105



The Source

<video src="funny_cat_video.webm/mp4/ogg">

#HTML5Video 55/105



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/105



Platform Versions and Distribution

#HTML5Video 57/105



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/105



Power



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/105



Stick it in the page



Let's add a poster attribute and some click
handlers



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/105



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

#HTML5Video 64/105



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/105



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

#HTML5Video 66/105



Fullscreen-only <video> caveats

Native controls only
No overlays or custom UI

Can't do captions etc.

#HTML5Video 67/105



Controls

<video controls>

#HTML5Video 68/105



Controls



Native Controls Support


Play/pause
Button

Volume Mute toggle Don't 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/105



Custom Controls
· Preserve your brand
· Unified experience across platforms and browsers

#HTML5Video 71/105



Custom Controls



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/105



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

#HTML5Video 74/105



Fullscreen

#HTML5Video 75/105



requestFullscreen

#HTML5Video 76/105



What about Mobile?

#HTML5Video 77/105



Isn't it already fullscreen?

#HTML5Video 78/105



Yes (sort of)

#HTML5Video 79/105



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/105



Autoplay

<video autoplay>

#HTML5Video 81/105



Autoplay

#HTML5Video 82/105



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

#HTML5Video 83/105



Autoplay

What about everyone else?

#HTML5Video 84/105



Autoplay Support


Attribute

Scripted Buggy, going away

#HTML5Video 85/105



Autoplay

#HTML5Video 86/105



Autoplay

<video onclick="this.play()">

#HTML5Video 87/105



Autoplay

#HTML5Video 88/105



Autoplay

#HTML5Video 89/105



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/105



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/105



Embeds in an HTML5 world

#HTML5Video 92/105



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/105



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/105



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/105



Offline and Storage




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/105



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/105



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/105



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/105



So is the coolness ready?



Yes
And not only do your users want it, they need it



can haz question?

http://www.flickr.com/photos/cloudzilla/378829651/


Html5 at YouTube: Stories from the Front Line

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Html5 at YouTube: Stories from the Front Line