Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
GDD HTML5, Flash, and the Battle for Faster Cat Videos
- HTML5, Flash and the Battle for Faster Cat Videos By YouTube's Greg Schechter, Phil Harnish and Matt Ward
- Greg Schechter Phil Harnish Matt Ward The Web Warrior Sr. Play Button Seek Bar Eng Engineer schechter@google. mattward@google. com philharnish@google.com com
- HTML + JS + CSS + Awesomeness
- HTML5 Offline File Access Multimedia Performance Presentation Graphics Storage
- HTML5 Offline File Access Multimedia Performance Presentation Graphics Storage
- Translation
- HTML5 ~= By geishaboy500 http://www.flickr.com/photos/geishaboy500/3183872667/
- 99% connected desktop penetration? http://www.adobe.com/products/player_census/flashplayer/
- Why HTML5?
- HTML5 vs Flash Features Accessibility "Device-ability" Security Embeds API
- 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 your 3D 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 Eye http://www.flickr.com/photos/mycoolpics/92033686/
- Player Start Time Flash 500ms HTML5 (Up from 200ms in Jan 2011) TODO(schechter): Add csi screen captures
- 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 redirect 2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf 3. s.ytimg.com/swf/swf2-hash_url.swf ~150kb
- 1. youtube.com/v/di5I49yg7bY 302 2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf 3. s.ytimg.com/swf/swf2-hash_url.swf Better 1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash 2. s.ytimg.com/swf/swf2-hash_url.swf
- 1. youtube.com/v/di5I49yg7bY 302 2. s.ytimg.com/swf/l.swf?args&swf=swf2-hash_url.swf 3. s.ytimg.com/swf/swf2-hash_url.swf 1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash 2. s.ytimg.com/swf/swf2-hash_url.swf Best 1. youtube.com/embed/di5I49yg7bY text/html 2. s.ytimg.com/swf/swf2-hash_url.swf
- #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 API Communication
- The JavaScript API Communication ● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
- The JavaScript API Communication ● 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 API Communication ● Better idea: PostMessage API. someWindow.postMessage(message, targetOrigin);
- The JavaScript API Communication ● 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? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/ schechter@google.com mattward@google.com philharnish@google.com