html5 at youtube: stories from the front line
Post on 17-May-2015
336 Views
Preview:
DESCRIPTION
TRANSCRIPT
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 1/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 2/105
HTML5 at YouTubeStories from the Mobile Front
Greg Schechter - Web Warrior, YouTube
Zoltan Szego - Software Engineer, YouTube
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 3/105
Greg SchechterThe Web Warrior
schechter@youtube.com
Zoltan SzegoPhone Wrangler
zszego@google.com
#io12 3/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 4/105
What's Google IO about?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 5/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 6/105
I R one C00LZ Kat
http://www.flickr.com/photos/scjn/4564274827/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 7/105
Last year's coolness
#io12 7/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 8/105
This year's awesome hardware
#io12 8/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 9/105
Put them together
#io12 9/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 10/105
Put them together
#io12 10/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 11/105
Is the coolness ready to use?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 12/105
I's ready for battlez
http://www.flickr.com/photos/mycoolpics/92033686/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 13/105
http://www.w3.org/html/logo/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 14/105
#io12Graphics
·
14/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 15/105
Who can use this stuff?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 16/105
Depends on your users
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 17/105
What users I prioritize development for
Chrome
Firefox
Safari Opera
IE
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 18/105
Why HTML5?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 19/105
CSS3 Styling
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 20/105
Rounded Corners
With awesomeness
Without awesomeness
#io12
<style>
.somebox {
border-radius: 3px;
}
</style>
CSS
20/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 21/105
Transitions
With Awesomeness
Awesome Information
Without Awesomeness
Awesome Information
#io12
<style>
.somebox {
-webkit-transition: height 1s, opacity 1s 1s;
-moz-transition: height 1s, opacity 1s 1s;
-ms-transition: height 1s, opacity 1s 1s;
-o-transition: height 1s, opacity 1s 1s;
transition: height 1, opacity 1s 1s;
}
</style>
CSS
21/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 22/105
What CSS3 gets us
#io12
Enhance the user experience
Less code
Faster preformance
Less wasted development time and less hacks
The experience without it is still good
·
·
·
·
·
22/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 23/105
Why HTML5?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 24/105
When HTML5?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 25/105
Who can use the css3 coolness.
Chrome
Firefox
Safari Opera
IE
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 26/105
Performance &Integration
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 27/105
Let's talk Uploads
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 28/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 29/105
XHR Uploads
#io12
<script>
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
// Listen to the upload progress.
var progressBar = document.querySelector('progress');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}
};
xhr.send(blobOrFile);
}
</script>
JAVASCRIPT
29/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 30/105
XHR Uploads
OldnessUpload progress
NewnessUpload progress
#io12 30/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 31/105
Why is XHR Uploads an improvement
#io12
Richer user experience with progress updates
Multiple file uploads
Resumable uploads
No plugin required for advanced features
·
·
·
·
31/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 32/105
Who can use the XHR upload coolness.
Chrome
Firefox
Safari Opera
IE
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 33/105
Time to up the coolness
http://www.flickr.com/photos/tjc/4320473610/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 34/105
Multimedia
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 35/105
#io12 35/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 36/105
<video> expectations
#io12
Open source technology
Lower latency
Better performance and fidelity
Accessibility
Power Consumption*
·
Browser / Player / Codec-
·
No plug-in instantiation-
·
·
·
36/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 37/105
HTML5 Video Capable Browsers
#io12
Chrome
Firefox
Safari Opera
IE
37/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 38/105
Flash Support vs. HTML5 Support
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 39/105
YouTube Data API Usage for Flash vs. HTML5Devices
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 40/105
Let's talk mobile
http://www.flickr.com/photos/indi/2579412663/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 41/105
Why is Mobile Important
#io12 41/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 42/105
Playback Stats
2010 2011 20120
1,500
3,000
4,500
6,000
Year
Pla
yba
ck in
Mill
ion
s
#io12 42/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 43/105
#io12 43/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 44/105
#io12 44/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 45/105
#io12 45/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 46/105
#io12 46/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 47/105
Native
#io12
For fallbacks, use rtsp:// protocol (serving .3gp) if the device won't supportHTML5
Use custom protocol / URL scheme to launch the native app (on Android / BB:vnd.youtube:video_id)
iOS special-cases the YouTube Flash embed code
·
·
·
47/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 48/105
#io12 48/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 49/105
The Different Browsers
#io12 49/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 50/105
The Different Browsers
#io12 50/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 51/105
The Different Browsers
#io12 51/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 52/105
#io12
http://www.flickr.com/photos/brownpau/533267369/
52/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 53/105
How do we start?
#io12
<video>
53/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 54/105
The Source
#io12
<video src="funny_cat_video">
54/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 55/105
The Source
#io12
<video src="funny_cat_video.webm/mp4/ogg">
55/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 56/105
Mobile Formats Support
#io12
Chrome Safari Firefox Opera IE Android
H264 Android 4.1+
WebM Android 4+ Android 4+ Android 4+
HLS Android 3+
56/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 57/105
Platform Versions and Distribution
#io12 57/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 58/105
The Source
#io12
<video>
<source src="funny_cat_video.mp4">
<source src="funny_cat_video.webm">
</video>
HTML
58/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 59/105
Power
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 60/105
Playback Stats
Software
Hardware
700 800 900 1,000 1,100
idle
webm
h264
flash
Mean current draw (milliamps)
#io12
Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/
60/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 61/105
Stick it in the page
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 62/105
Let's add a poster attribute and some clickhandlers
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 63/105
Video Poster
Very different behavior in different browsers
#io12
Stretch poster image to <video> element size, or fit proportionally
May replace poster image with a paused frame from the video
May overlay a play icon that is different for each platform
·
·
·
63/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 64/105
Video Poster Pro Tips
Protips for a consistent look:
#io12
Render your own cued state: <img> for the poster, play icon
Replace with the <video> when it's time to play
Set the background color to black for continuity across platforms
·
·
·
64/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 65/105
How do videos play back?
1. Inline in the page
2. Always fullscreen, no matter what
#io12
iPad
Android 4.0 and up
Chrome
·
·
·
iPhone, iPod
Android 2.2 - 3.0
Windows Phone
·
·
·
65/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 66/105
Fullscreen-only <video>
Video element can be stuck anywhere on the page
On webkit, good interaction with your webapp
#io12
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
·
·
·
·
Video events still fire: timeupdate, ended etc.
Free to change web page in the background
webkitbeginfullscreen, webkitendfullscreen events
·
·
·
66/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 67/105
Fullscreen-only <video> caveats
Native controls only
No overlays or custom UI
Can't do captions etc.
#io12 67/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 68/105
Controls
#io12
<video controls>
68/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 69/105
Controls
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 70/105
Native Controls Support
#io12
Chrome Safari Firefox Opera IE Android
Play/pauseButton
VolumeControls Only in Fullscreen
Mute toggleonly
Don't work inAndroid 4
Seek bar
Fullscreen Button Button and gesture Button
Playback Type Both Fullscreen only onphones
Inline only Determined byhardware
Fullscreenonly
Both
70/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 71/105
Custom Controls
#io12
Preserve your brand
Unified experience across platforms and browsers
·
·
71/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 72/105
Custom Controls
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 73/105
Custom Controls
#io12
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
-
-
-
-
73/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 74/105
Custom Controls Pro Tips
#io12
User expect to be able to drag the progress bar
Volume can't be set everywhere and users are accustomed to using devicecontrols
Fingers are fat
Don't trigger content with hover
Fullscreen
·
Need to remender to prevent scroll on touchstart-
·
So don't build controls for it-
·
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
-
-
·
·
The browsing context is always fullscreen so fake it-
74/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 75/105
#io12
Fullscreen
75/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 76/105
#io12
requestFullscreen
76/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 77/105
#io12
What about Mobile?
77/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 78/105
#io12
Isn't it already fullscreen?
78/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 79/105
#io12
Yes (sort of)
79/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 80/105
Mobile Fullscreen
#io12
Open New Tab
Remember size context changes so use viewport to scale icons and controls
webkitEnterFullscreen
·
·
@viewport { width: device-width; }-
·
Webkit only
Just the video element
Native controls only
metadata must be loaded
Only in click event
-
-
-
-
-
80/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 81/105
Autoplay
#io12
<video autoplay>
81/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 82/105
Autoplay
#io12 82/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 83/105
Autoplay
#io12
Doesn't work! Restriction: need user action.
Why?
Where?
·
·
On a cell network - users charged for data
Slow downloads, let the user decide
-
-
·
Safari on iOS (iPad included, even on WIFI)
Android Browser (4.0+)
Chrome on Android
-
-
-
83/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 84/105
Autoplay
#io12
What about everyone else?
84/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 85/105
Autoplay Support
#io12
Chrome Safari Firefox Opera IE Android
Attribute
Scripted Buggy, going away
85/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 86/105
Autoplay
#io12 86/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 87/105
Autoplay
#io12
<video onclick="this.play()">
87/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 88/105
Autoplay
#io12 88/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 89/105
Autoplay
#io12 89/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 90/105
Autoplay
#io12
<script>
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load(); // Magic incantation to enable play() later on!
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
myVideoElement.play();
}
</script>
JAVASCRIPT
90/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 91/105
Autoplay
#io12
<script>
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load(); // Magic incantation to enable play() later on!
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
// For Android
window.setTimeout(function() {
myVideoElement.play();
}, 0);
}
</script>
JAVASCRIPT
91/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 92/105
Embeds in an HTML5 world
#io12 92/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 93/105
Embeds
#io12
<script>
<object>
<iframe>
·
We need our content to be sandboxed
More than just a video tag
-
-
·
Can load content with the data attribute
But no way to interact with it via JavaScript
-
-
·
Allows our content to be sandboxed
JavaScript API communication
-
-
93/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 94/105
Embeds
#io12
<iframe type="text/html"
width="640"
height="385"
frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
HTML
Plan for the future (if you can)·
94/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 95/105
Iframe Pro Tips
#io12
html {
/** Hack to fix iPhone resizing. */
overflow: hidden;
}
CSS
body {
/** Dymanic Resizing **/
background-color: #000;
height: 100%;
width: 100%;
/** Remove highlight when use clicks **/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
CSS
95/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 96/105
Offline and Storage
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 97/105
Appcache
#io12
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
·
·
·
·
97/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 98/105
Appcache
#io12
<html manifest="manifest_url">
<script src="script.js" />
<link rel="stylesheet" href="style.css" />
</html>
HTML
CACHE MANIFEST
CACHE:
script.js
style.css
NETWORK:
file_to_always_load.jpg
HTML
98/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 99/105
Appcache - How to force an update?
#io12
CACHE MANIFEST
CACHE:
foo.js
# Build date: 20120628
HTML
// Random AJAX response
{ "data": ...,
"buildDate": 20120628 }
JAVASCRIPT
var scriptBuildDate = 20120621; // Auto-generated during build or push
if (someResponse.buildDate > scriptBuildDate) {
window.applicationCache.update();
}
JAVASCRIPT
99/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 100/105
Appcache gotchas
#io12
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
·
·
·
NETWORK: *
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
·
·
·
·
100/105
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 101/105
So is the coolness ready?
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 102/105
YesAnd not only do your users want it, they need it
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 103/105
<Thank You!>
Greg Schechter
Zoltan Szego
www.youtube.com/dev
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 104/105
can haz question?
http://www.flickr.com/photos/cloudzilla/378829651/
3/30/13 Google IO 2012
gregthebusker.com/html5/slides.html#9 105/105
top related