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

Greg SchechterThe Web Warrior

schechter@fb.com

#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

Why HTML5?

CSS3 Styling

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

Rounded Corners

With awesomeness

Without awesomeness

#HTML5Video

<style>

.somebox {

border-radius: 3px;

</style>

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>

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

Performance &Integration

Let's talk Uploads

XHR Uploads

#HTML5Video

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

Time to up the coolness

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

Multimedia

#HTML5Video

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

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

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

54/105

The Source

#HTML5Video

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>

</video>

58/105

Playback Stats

#HTML5Video

Software

Hardware

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/

60/105

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

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

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

70/105

Custom Controls

#HTML5Video

Preserve your brand

Unified experience across platforms and browsers

71/105

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

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

81/105

Autoplay

#HTML5Video 82/105

Autoplay

#HTML5Video

Doesn't work! Restriction: need user action.

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

87/105

Autoplay

#HTML5Video 88/105

Autoplay

#HTML5Video 89/105

Autoplay

#HTML5Video

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

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

We need our content to be sandboxed

Html5 at YouTube: Stories from the Front Line

Technology

From HTML5 websites to HTML5 games

Concentrated HTML5 & Attractive HTML5

13 Helmikuu 2020 Verkkokauppa · 1 Sisältömarkkinointi, jossa yritys tuottaa sisältöjä eri kanaviin - Facebook, Instagram, Instagram Stories, Messenger, Youtube, Linkedin - toivoen

The Future of Access to Digital Broadcast Videoblogs.adobe.com/accessibility/files/2012/03/future_video_access... · YouTube – automated ... OSMF, FLVPlayback, JWPlayer HTML5 video

HTML5 Training in Hyderabad, BEST HTML5 Training Institute, HTML5 and CSS3 Training in Hyderabad

HTML5 DevConf 2014 - Quintus HTML5 Game Tutorial

HTML5/CSS3 Course Introduction to HTML5 · HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 2 HTML5 = HTML + CSS + JS API. Contents •HTML5

HTML5 Programming Cookbook - kimbersoft.comkimbersoft.com/pdf/PRIVATE/HTML5-Programming-Cookbook.pdf · HTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language

HTML5 Tema4 Atributos en HTML5

HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

HTML5 at YouTube: Stories from the Front Line

HTML5 Introduction – Features and Resources for HTML5

Stories, clips youtube et vidéo facebook, mode d'emploi

Cookies - globalconnect.de · Cookie doubleclick.net drei Wochen _GPS _PREF _ VISITOR_ INFO1_LI _YSG _remote_sid Anbieter doubleclick.net Youtube – Youtube Youtube Youtube Youtube

BACH openModule - Ross Video Stories/OEM/Bach... · • Embedded BACH Controller HTML5 UI • System-design consultancy • Maintenance and support SUCCESS: • Highest-performance

YouTube Mobile Webapp: On the edge of Html5

2) OVERVIEW High-definition Screencast (record video and publish immediately to YouTube, social media or as MP4s) HTML5 Publishing (output compatible

Äläkys Satama Seminaari - Helsingin kaupunkiDiscover CMA CGM Vessels LINKEDIN Discover the Group business activity YOUTUBE Join the CMA CGM YouTube channel Stories related to CMA

Hire html5 developer for html5 development and html5 game development

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]