SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
GDD HTML5, Flash, and the Battle for Faster Cat Videos
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
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 ● Lower latency ○ No plug-in instantiation ● Better performance and fidelity ● Accessibility ○ User agents can have special video handling
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
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? 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! }
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 ● 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
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 ● Resolves
DNS while page is rendering ● Maintains an open connection ● 200ms improvement <head> <script> var img = new Image(); img.src = videoConnectionUrl; </script> </head>
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); ● 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