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

HTML5

Offline File Access Multimedia Performance
Presentation Graphics Storage

HTML5 ~=

By geishaboy500
http://www.flickr.com/photos/geishaboy500/3183872667/

99% connected desktop penetration?
http://www.adobe.com/products/player_census/flashplayer/

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?

○ RTMPE protocol / Flash Access

Why Flash?

● Camera & Microphone Access

Why Flash?

● Adaptive & Live Streaming

Why Flash?

● Fullscreen video

Why Flash?

○ 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?

○ HD, hardware accelerated cat videos!

Why Flash?

● Consistent format support

Why Flash?

○ HTML5 needs to support both H.264 and WebM

Why Flash?

○ HTML5 needs to support both H.264 and WebM
● Cross platform consistency****

Why HTML5?
<video> Expectations

● Open source technology
○ Browser / Player / Codec

Why HTML5?

● Lower latency
○ No plug-in instantiation

Why HTML5?

● Lower latency
● Better performance and fidelity

Why HTML5?

● Lower latency
● Accessibility

Why HTML5?

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

Why HTML5?

● Lower latency
● 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

Primary Goal:
Recover playbacks that would
be lost without flash

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!
}

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

● 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

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>

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
3. s.ytimg.com/swf/swf2-hash_url.swf

Better
1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash

1. youtube.com/v/di5I49yg7bY 302

1. youtube.com/v/di5I49yg7bY application/x-shockwave-flash

Best
1. youtube.com/embed/di5I49yg7bY text/html

● 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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to GDD HTML5, Flash, and the Battle for Faster Cat Videos (20)

Recently uploaded

Recently uploaded (20)

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