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



#HTML5Video

HTML5 at YouTube: Stories from

the Front LineGreg Schechter - Web Warrior, Facebook

2/105



Greg SchechterThe Web Warrior

[email protected]

#HTML5Video 3/105



What are conferences allabout?





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/



#HTML5Video

Graphics Connectivity CSS3 Styling Device Access

Multimedia Offline and

Storage Performance

and Integration Semantics

14/105



Who can use this stuff?



Depends on your users



What users I prioritize development for

Chrome

Firefox

Safari Opera

IE



Why HTML5?



CSS3 Styling

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



Rounded Corners

With awesomeness

Without awesomeness

#HTML5Video

<style>

.somebox {

border-radius: 3px;

}

</style>

CSS

20/105



Transitions

With Awesomeness

Awesome Information

Without Awesomeness

Awesome Information

#HTML5Video

<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



What CSS3 gets us

#HTML5Video

Enhance the user experience

Less code

Faster preformance

Less wasted development time and less hacks

The experience without it is still good

·

·

·

·

·

22/105



Why HTML5?



When HTML5?



Who can use the css3 coolness.

Chrome

Firefox

Safari Opera

IE



Performance &Integration




Let's talk Uploads





XHR Uploads

#HTML5Video

<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



XHR Uploads

OldnessUpload progress

NewnessUpload progress

#HTML5Video 30/105



Why is XHR Uploads an improvement

#HTML5Video

Richer user experience with progress updates

Multiple file uploads

Resumable uploads

No plugin required for advanced features

·

·

·

·

31/105



Who can use the XHR upload coolness.

Chrome

Firefox

Safari Opera

IE



Time to up the coolness

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



Multimedia




#HTML5Video

video

35/105



<video> expectations

#HTML5Video

Open source technology

Lower latency

Better performance and fidelity

Accessibility

Power Consumption*

·

Browser / Player / Codec-

·

No plug-in instantiation-

·

·

·

36/105



HTML5 Video Capable Browsers

#HTML5Video

Chrome

Firefox

Safari Opera

IE

37/105



Flash Support vs. HTML5 Support



YouTube Data API Usage for Flash vs. HTML5Devices



Let's talk mobile

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



Why is Mobile Important

#HTML5Video 41/105



Playback Stats

#HTML5Video

Mobile

Desktop

2010 2011 20120

1,500

3,000

4,500

6,000

Year

Pla

yba

ck in

Mill

ion

s

42/105



#HTML5Video 43/105



#HTML5Video 44/105



#HTML5Video 45/105



#HTML5Video 46/105



Native

#HTML5Video

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



#HTML5Video 48/105



The Different Browsers

#HTML5Video 49/105




#HTML5Video 50/105




#HTML5Video 51/105



#HTML5Video

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

52/105



How do we start?

#HTML5Video

<video>

53/105



The Source

#HTML5Video

<video src="funny_cat_video">

54/105



The Source

#HTML5Video

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

55/105



Mobile Formats Support

#HTML5Video

Chrome Safari Firefox Opera IE Android

H264 Android 4.1+

WebM Android 4+ Android 4+ Android 4+

HLS Android 3+

56/105



Platform Versions and Distribution

#HTML5Video 57/105



The Source

#HTML5Video

<video>

<source src="funny_cat_video.mp4">

<source src="funny_cat_video.webm">

</video>

HTML

58/105



Power



Playback Stats

#HTML5Video

Software

Hardware

700 800 900 1,000 1,100

idle

webm

h264

flash

Mean current draw (milliamps)

Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/

60/105

http://iss.oy.ne.ro/



Stick it in the page



Let's add a poster attribute and some clickhandlers



Video Poster

Very different behavior in different browsers

#HTML5Video

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



Video Poster Pro Tips

Protips for a consistent look:

#HTML5Video

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



How do videos play back?

1. Inline in the page

2. Always fullscreen, no matter what

#HTML5Video

iPad

Android 4.0 and up

Chrome

·

·

·

iPhone, iPod

Android 2.2 - 3.0

Windows Phone

·

·

·

65/105



Fullscreen-only <video>

Video element can be stuck anywhere on the page

On webkit, good interaction with your webapp

#HTML5Video

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



Fullscreen-only <video> caveats

Native controls only

No overlays or custom UI

Can't do captions etc.

#HTML5Video 67/105



Controls

#HTML5Video

<video controls>

68/105



Controls



Native Controls Support

#HTML5Video


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



Custom Controls

#HTML5Video

Preserve your brand

Unified experience across platforms and browsers

·

·

71/105



Custom Controls



Custom Controls

#HTML5Video

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



Custom Controls Pro Tips

#HTML5Video

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



#HTML5Video

Fullscreen

75/105



#HTML5Video

requestFullscreen

76/105



#HTML5Video

What about Mobile?

77/105



#HTML5Video

Isn't it already fullscreen?

78/105



#HTML5Video

Yes (sort of)

79/105



Mobile Fullscreen

#HTML5Video

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



Autoplay

#HTML5Video

<video autoplay>

81/105



Autoplay

#HTML5Video 82/105



Autoplay

#HTML5Video

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



Autoplay

#HTML5Video

What about everyone else?

84/105



Autoplay Support

#HTML5Video


Attribute

Scripted Buggy, going away

85/105



Autoplay

#HTML5Video 86/105



Autoplay

#HTML5Video

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

87/105



Autoplay

#HTML5Video 88/105



Autoplay

#HTML5Video 89/105



Autoplay

#HTML5Video

<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



Autoplay

#HTML5Video

<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



Embeds in an HTML5 world

#HTML5Video 92/105



Embeds

#HTML5Video

<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



Embeds

#HTML5Video

<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



Iframe Pro Tips

#HTML5Video

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



Offline and Storage




Appcache

#HTML5Video

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



Appcache

#HTML5Video

<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



Appcache - How to force an update?

#HTML5Video

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



Appcache gotchas

#HTML5Video

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



So is the coolness ready?



YesAnd not only do your users want it, they need it



<Thank You!>



can haz question?

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



Technology

Html5 at YouTube: Stories from the Front Line