Transcript
Page 1: JS Days HTML5 Flash and the Battle for Faster Cat Videos

HTML5, Flash and the Battle for Faster Cat VideosBy YouTube's Greg Schechter and Chris Rhodes

Page 2: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Greg SchechterThe Web Warrior

[email protected] [email protected]

Chris RhodesSpline Reticulator

Page 3: JS Days HTML5 Flash and the Battle for Faster Cat Videos
Page 4: JS Days HTML5 Flash and the Battle for Faster Cat Videos

HTML + JS + CSS + Awesomeness

Page 5: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Offline File Access Multimedia Performance Presentation Graphics Storage

HTML5

Page 6: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Offline File Access Multimedia Performance Presentation Graphics Storage

HTML5

Page 7: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Translation

Page 8: JS Days HTML5 Flash and the Battle for Faster Cat Videos

HTML5 ~=

By geishaboy500http://www.flickr.com/photos/geishaboy500/3183872667/

Page 9: JS Days HTML5 Flash and the Battle for Faster Cat Videos

99% connected desktop penetration?http://www.adobe.com/products/player_census/flashplayer/

Page 10: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?

Page 11: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Features Accessibility "Device-ability"Security Embeds API

HTML5 vs Flash

Page 12: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Round 1: Features

http://www.flickr.com/photos/zipckr/4624150058/

Page 13: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection

Page 14: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

Page 15: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access

Page 16: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming

Page 17: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video

Page 18: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video

○ Hardware accelerated HD cat videos!○ **API available in webkit and gecko

Page 19: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Webkit Fullscreen API

var elem = document.getElementById("my-element");document.onwebkitfullscreenchange = function() {// The fullscreen element:// document.webkitFullScreenElement;console.log ("We went fullscreen!");};elem.webkitRequestFullScreen();

Page 20: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video

○ HD, hardware accelerated cat videos!○ **API available in webkit and gecko

Page 21: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming ● Fullscreen video

○ HD, hardware accelerated cat videos!○ **API available in webkit and gecko

● Consistent format support

Page 22: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video

○ HD, hardware accelerated cat videos!○ **API available in webkit and gecko

● Consistent format support○ HTML5 needs to support both H.264 and WebM

Page 23: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why Flash?Features missing in HTML5

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video

○ HD, hardware accelerated cat videos!○ **API available in webkit and gecko

● Consistent format support○ HTML5 needs to support both H.264 and WebM

● Cross platform consistency****

Page 24: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

● Open source technology○ Browser / Player / Codec

Page 25: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

● Open source technology○ Browser / Player / Codec

● Lower latency○ No plug-in instantiation

Page 26: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

● Open source technology○ Browser / Player / Codec

● Lower latency○ No plug-in instantiation

● Better performance and fidelity

Page 27: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

Page 28: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

● Open source technology○ Browser / Player / Codec

● Lower latency○ No plug-in instantiation

● Better performance and fidelity○ Power Consumption

● Accessibility

Page 29: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

http://imgs.xkcd.com/comics/in_ur_reality.png

Page 30: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?<video> Expectations

● Open source technology○ Browser / Player / Codec

● Lower latency○ No plug-in instantiation

● Better performance and fidelity○ Power Consumption

● Accessibility○ User agents can have special video handling

Page 31: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Please put on your3D Glasses

Page 32: JS Days HTML5 Flash and the Battle for Faster Cat Videos

By jmettrauxhttp://www.flickr.com/photos/jmettraux/4959258811/

Page 33: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?3D

● Flash○ Build for graphics○ Tools for easy video manipulation

■ HTML5 would require WebGL or Canvas

● HTML5○ Easy integration with browser and

devices○ Open Standard○ Allows for innovations by the browser

vendors as well as YouTube

Page 34: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Round 2: Device-ability

By dakinyhttp://www.flickr.com/photos/dakiny/4430765149/

Page 35: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?HTML5 Capable Browsers (~75%)

Page 36: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?Flash Support vs. HTML5 Support

Page 37: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices

Page 38: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why HTML5?

Page 39: JS Days HTML5 Flash and the Battle for Faster Cat Videos

When HTML5?

Page 40: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Primary Goal:Recover playbacks that would

be lost without flash

Page 41: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Our Solution

Page 42: JS Days HTML5 Flash and the Battle for Faster Cat Videos

<iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

Page 43: JS Days HTML5 Flash and the Battle for Faster Cat Videos

When HTML5?<iframe> Embed

● Give the user HTML5 or Flash based on device and user preferences.

● Allows for better mobile support.● Offers an "it just works" experience.

Page 44: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Why an iframe?Other embedding methods

● <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

Page 45: JS Days HTML5 Flash and the Battle for Faster Cat Videos

When HTML5?When does the user get HTML5?

Page 46: JS Days HTML5 Flash and the Battle for Faster Cat Videos

When HTML5?Detecting HTML5

var videoElement = document.createElement('video');if (videoElement && videoElement.canPlayType && (videoElement.canPlayType('video/mp4; codecs="avc1.42001E, mp4a.40.2"') || videoElement.canPlayType('video/webm; codecs="vp8.0, vorbis"'))) { // Sweet, we can use HTML5!}

Page 47: JS Days HTML5 Flash and the Battle for Faster Cat Videos

When HTML5?When does the user get HTML5?

Page 48: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Round 3: Performance

By Two Hawk's Eyehttp://www.flickr.com/photos/mycoolpics/92033686/

Page 49: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Player Start Time

TODO(schechter): Add csi screen captures

500ms

(Up from 200ms in Jan 2011)

Flash

HTML5

Page 50: JS Days HTML5 Flash and the Battle for Faster Cat Videos

iframe Embed Time Till Thumbnail Visible

Flash - 5.1s

HTML5 - 1.4s

*Collected data shows faster load times than this control environment, but the comparison is actuate.

Page 51: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Get Video Time

Page 52: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Get Video Time

● HTML5:○ Opera is Awesome

■ 200ms ahead of the pack● Flash: IE9 and Opera are the leaders

○ 300ms faster● HTML5 is almost always faster than Flash

○ 300ms - 400ms faster○ IE9 is an exception

■ IE9 Flash is slightly faster than IE9 HTML5

Page 53: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Video Start Time

HTML5

Flash 2.5s

Page 54: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Video Start Time

HTML5

Flash 2.5s

● Firefox closest to catching Flash○ HTML5 ~1.0s slower than Flash

Page 55: JS Days HTML5 Flash and the Battle for Faster Cat Videos

So why is Flash so fast?

Page 56: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Make Assumptions

Page 57: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Making Assumptions

● Most users have a recent version of flash

● Thus we can optimistically embed the most common case and do version checking and updating after a script loads

● 250ms improvement to flash start time

Page 58: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Preload Video Connection

Page 59: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Preload Video Connection

● Resolves DNS while page is rendering● Maintains an open connection● 200ms improvement

<head> <script> var img = new Image(); img.src = videoConnectionUrl; </script></head>

Page 60: JS Days HTML5 Flash and the Battle for Faster Cat Videos

What about embeds?

Page 61: JS Days HTML5 Flash and the Battle for Faster Cat Videos

#1 cache

Page 62: JS Days HTML5 Flash and the Battle for Faster Cat Videos

1. youtube.com/v/di5I49yg7bY 302 redirect2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf3. s.ytimg.com/swf/swf2-hash_url.swf ~150kb

Page 63: JS Days HTML5 Flash and the Battle for Faster Cat Videos

1. youtube.com/v/di5I49yg7bY 3022. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf3. s.ytimg.com/swf/swf2-hash_url.swf

1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash2. s.ytimg.com/swf/swf2-hash_url.swf

Better

Page 64: JS Days HTML5 Flash and the Battle for Faster Cat Videos

1. youtube.com/v/di5I49yg7bY 3022. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf3. s.ytimg.com/swf/swf2-hash_url.swf

1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash2. s.ytimg.com/swf/swf2-hash_url.swf

1. youtube.com/embed/di5I49yg7bY text/html2. s.ytimg.com/swf/swf2-hash_url.swf

Best

Page 65: JS Days HTML5 Flash and the Battle for Faster Cat Videos

#2 lazy load

Page 66: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Most embeds are never played.

Page 67: JS Days HTML5 Flash and the Battle for Faster Cat Videos

● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?

Page 68: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Demo:http://gregthebusker.com/iframedemo.html

Page 69: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Player API

http://code.google.com/apis/youtube/getting_started.html#player_apis

Page 70: JS Days HTML5 Flash and the Battle for Faster Cat Videos

The JavaScript APICommunication

Page 71: JS Days HTML5 Flash and the Battle for Faster Cat Videos

The JavaScript APICommunication

● Poll the URL fragment? http://youtube.com/embed/video_id#fragment

Page 72: JS Days HTML5 Flash and the Battle for Faster Cat Videos

The JavaScript APICommunication

● Poll the URL fragment?http://youtube.com/embed/video_id#fragment

● Messages are one dimensional.● Polling eats up CPU and is not instant.● Both directions of communication use the same

fragment.

Page 73: JS Days HTML5 Flash and the Battle for Faster Cat Videos

The JavaScript APICommunication

● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);

Page 74: JS Days HTML5 Flash and the Battle for Faster Cat Videos

The JavaScript APICommunication

● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);

● Uses JSON for native encoding and decoding of data.● No polling.● Native event listeners.● Communications are sandboxed per-window.● Calls are asynchronous.

Page 75: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Conclusion

● Flash is still preferred in most places○ More critical features○ Deeper reach

● HTML5 is awesome○ Improves every day○ Greater mobile reach○ People want it

Page 76: JS Days HTML5 Flash and the Battle for Faster Cat Videos

Questions?

[email protected] [email protected]

can haz question?By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/


Top Related