View
7.504
Download
0
Category
Tags:
Preview:
DESCRIPTION
HTML5; it's new, it's awesome, and it's powerful, but can it take down the champ of video distribution, Flash. Which technology's got the ability to bring cat video to the next level? This talk covers the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
Citation preview
HTML5, Flash and the Battle for Faster Cat VideosBy YouTube's Greg Schechter and Phil Harnish
Greg SchechterThe Web Warrior
schechter@google.com philharnish@google.com
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-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?
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?
schechter@google.comphilharnish@google.com
can haz question?By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/
Recommended