GDD HTML5, Flash, and the Battle for Faster Cat Videos

HTML5, Flash and the Battle for Faster Cat VideosBy YouTube's Greg Schechter, Phil Harnish and Matt Ward

Greg SchechterThe Web Warrior

schechter@google.com

mattward@google.com

Matt WardSeek Bar Engineer

philharnish@google.com

Phil HarnishSr. Play Button

HTML + JS + CSS + Awesomeness

Offline File Access Multimedia Performance Presentation Graphics Storage

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

● Content protection○ RTMPE protocol / Flash Access

● Camera & Microphone Access

● Camera & Microphone Access● Adaptive & Live Streaming

● 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();

○ HD, hardware accelerated cat videos!○ **API available in webkit and gecko

● Camera & Microphone Access● Adaptive & Live Streaming ● Fullscreen video

● Consistent format support

● 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

○ Browser / Player / Codec● Lower latency

○ No plug-in instantiation

○ No plug-in instantiation● Better performance and fidelity

○ No plug-in instantiation● Better performance and fidelity● Accessibility

http://imgs.xkcd.com/comics/in_ur_reality.png

○ 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

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

(Up from 200ms in Jan 2011)

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

Video Start Time

Flash 2.5s

Video Start Time

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

● 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

#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

● Poll the URL fragment? http://youtube.com/embed/video_id#fragment

● 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.

● 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.commattward@google.comphilharnish@google.com

can haz question?By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/

GDD HTML5, Flash, and the Battle for Faster Cat Videos

Technology

Organic Hop Variety Trial Final Report · 2016, Cumulative GDD 2016, cumulative normal GDD The trends of cumulative normal GDD and Cumulative GDD for Same Year Day. Color shows details

Teaching GDD and MR

GDD An example

Introduction to node.js GDD

Super Mario GDD

JS Days HTML5 Flash and the Battle for Faster Cat Videos

Current GDD

Suppressed - GDD

Grape Escape - GDD

Inglés - 5° Básico (GDD)

Viral Light Interactive GDD

Gdd geoff daigle-june2016

Game Desing & Development (GDD)

Escape From Eris GDD

D3 - To Dust GDD

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

GDD - Service Rush

111101 GDD 1

Gdd Como Hacerlo

Rescue Rapunzel GDD