HTML5, Flash and the Battle for Faster Cat VideosBy YouTube's Greg Schechter and Phil Harnish
HTML + JS + CSS + Awesomeness
Offline File Access Multimedia Performance Presentation Graphics Storage
HTML5
Offline File Access Multimedia Performance Presentation Graphics Storage
HTML5
Translation
HTML5 ~=
By geishaboy500http://www.flickr.com/photos/geishaboy500/3183872667/
99% connected desktop penetration?http://www.adobe.com/products/player_census/flashplayer/
Why HTML5?
Features Accessibility Device-abilitySecurity Embeds API
HTML5 vs Flash
Round 1: Features
http://www.flickr.com/photos/zipckr/4624150058/
Why Flash?Features missing in HTML5
● Content protection
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
○ Hardware accelerated HD cat videos!○ **WebKit has a JavaScript API
Why Flash?WebKit Fullscreen API
var elem = document.getElementById("my-element");elem.onwebkitfullscreenchange = function() {console.log ("We went fullscreen!");};elem.webkitRequestFullScreen();
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
○ HD, hardware accelerated cat videos!○ **WebKit has a JavaScript API
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
○ HD, hardware accelerated cat videos!○ **WebKit has a JavaScript API
● Consistent format support
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
○ HD, hardware accelerated cat videos!○ **WebKit has a JavaScript API
● Consistent format support○ HTML5 needs to support both H.264 and WebM
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Fullscreen video
○ HD, hardware accelerated cat videos!○ **WebKit has a JavaScript API
● Consistent format support○ HTML5 needs to support both H.264 and WebM
● Cross platform consistency****
Why HTML5?<video> Expectations
● Open source technology
○ Browser / Player / Codec
Why HTML5?<video> Expectations
● Open source technology
○ Browser / Player / Codec● Lower latency
○ No plug-in instantiation
Why HTML5?<video> Expectations
● Open source technology
○ Browser / Player / Codec● Lower latency
○ No plug-in instantiation● Better performance and fidelity
Why HTML5?<video> Expectations
● Open source technology
○ Browser / Player / Codec● Lower latency
○ No plug-in instantiation● Better performance and fidelity● Accessibility
Why HTML5?<video> Expectations
http://imgs.xkcd.com/comics/in_ur_reality.png
Why HTML5?<video> Expectations
● Open source technology
○ Browser / Player / Codec● Lower latency
○ No plug-in instantiation● Better performance and fidelity● Accessibility
○ User agents can have special video handling
Round 2: Device-ability
By dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
Why HTML5?HTML5 Capable Browsers
Why HTML5?Flash Support vs. HTML5 Support
Why HTML5?YouTube Data API Usage for Flash vs. HTML5 Devices
Why HTML5?
When HTML5?
Primary Goal:Recover playbacks that would
be lost without flash
Our Solution
<iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
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.
When HTML5?When does the user get HTML5?
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!}
When HTML5?When does the user get HTML5?
Round 3: Performance
By Two Hawk's Eyehttp://www.flickr.com/photos/mycoolpics/92033686/
Player Start Time
TODO(schechter): Add csi screen captures
200ms
Flash
HTML5
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.
Get Video Time
Get Video Time
● HTML5:
○ Opera is Awesome
■ 200ms ahead of the pack
● Flash: IE9 and Opera are the leaders
○ 200ms faster● HTML5 is almost always faster than Flash
○ 300ms - 350ms faster○ IE9 is an exception
■ IE9 Flash is slightly faster than IE9 HTML5
Video Start Time
HTML5
Flash 2s
So why is flash so fast?
Make Assumptions
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
Preload Video Connection
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>
What about embeds?
#1 cache
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
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
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
#2 lazy load
Most embeds are never played.
● Delay expensive queries.● Use cache for most videos.● Delay loading... flash?
Demo:http://gregthebusker.com/iframedemo.html
Player API
http://code.google.com/apis/youtube/getting_started.html#player_apis
The JavaScript APICommunication
The JavaScript APICommunication
● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
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.
The JavaScript APICommunication
● Better idea: PostMessage API.someWindow.postMessage(message, targetOrigin);
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.
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
Questions?
[email protected]@google.com
can haz question?By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/