HTML5, Flash and the Battle for Faster Cat VideosBy YouTube's Greg Schechter, Phil Harnish and Matt Ward
Greg SchechterThe Web Warrior
Matt WardSeek Bar Engineer
Phil HarnishSr. Play Button
Eng
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-ability"Security 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● Adaptive & Live Streaming
Why Flash?Features missing in HTML5
● Content protection○ RTMPE protocol / Flash Access
● Camera & Microphone Access● Adaptive & Live Streaming● Fullscreen video
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
Why Flash?Mozilla Fullscreen API
var elem = document.getElementById("my-element");document.onmozfullscreenchange = function() {// The fullscreen element:// document.mozFullScreenElement;console.log ("We went fullscreen!");};elem.mozRequestFullScreen();
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
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
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
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****
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
Please put on your3D Glasses
By jmettrauxhttp://www.flickr.com/photos/jmettraux/4959258811/
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
Round 2: Device-ability
By dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
Why HTML5?HTML5 Capable Browsers (~60%)
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.
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
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
500ms
(Up from 200ms in Jan 2011)
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
○ 300ms faster● HTML5 is almost always faster than Flash
○ 300ms - 400ms faster○ IE9 is an exception
■ IE9 Flash is slightly faster than IE9 HTML5
Video Start Time
HTML5
Flash 2.5s
Video Start Time
HTML5
Flash 2.5s
● Firefox closest to catching Flash
○ HTML5 ~1.0s slower than Flash
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?
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]@[email protected]
can haz question?By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/
Recommended
