1. HTML5, Flash and the Battle for
Faster Cat Videos
By YouTube's Greg Schechter and Phil Harnish

2. Greg Schechter Phil Harnish
The Web Warrior Sr. Play Button Eng
schechter@google.com philharnish@google.com

4. HTML + JS + CSS + Awesomeness

5. HTML5
Offline File Access Multimedia Performance
Presentation Graphics Storage

6. HTML5
Offline File Access Multimedia Performance
Presentation Graphics Storage

7. Translation

8. HTML5 ~=
By geishaboy500http://www.flickr.
com/photos/geishaboy500/3183872667/

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

10. Why HTML5?

11. HTML5 vs Flash
Features Accessibility Device-ability
Security Embeds API

12. Round 1: Features
http://www.flickr.
com/photos/zipckr/4624150058/

13. Why Flash?
Features missing in HTML5
● Content protection

14. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access

15. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access

16. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Fullscreen video

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

18. Why Flash?
WebKit Fullscreen API
var elem = document.getElementById("my-element");
elem.onwebkitfullscreenchange = function() {
console.log ("We went fullscreen!");
};
elem.webkitRequestFullScreen();

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

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

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

22. 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****

23. Why HTML5?
<video> Expectations
● Open source technology
○ Browser / Player / Codec

24. Why HTML5?
<video> Expectations
● Open source technology
○ Browser / Player / Codec
● Lower latency
○ No plug-in instantiation

25. Why HTML5?
<video> Expectations
● Open source technology
○ Browser / Player / Codec
● Lower latency
○ No plug-in instantiation
● Better performance and fidelity

26. Why HTML5?
<video> Expectations
● Open source technology
○ Browser / Player / Codec
● Lower latency
○ No plug-in instantiation
● Better performance and fidelity
● Accessibility

27. Why HTML5?
<video> Expectations
http://imgs.xkcd.com/comics/in_ur_reality.png

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

29. Round 2: Device-ability
By dakinyhttp://www.flickr.com/photos/dakiny/4430765149/

30. Why HTML5?
HTML5 Capable Browsers

31. Why HTML5?
Flash Support vs. HTML5 Support

32. Why HTML5?
YouTube Data API Usage for Flash vs. HTML5 Devices

33. Why HTML5?

34. When HTML5?

35. Primary Goal:
Recover playbacks that would
be lost without flash

36. Our Solution

37. <iframe type="text/html"
width="640"
height="385"
frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>

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

39. When HTML5?
When does the user get HTML5?

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

41. When HTML5?
When does the user get HTML5?

42. Round 3: Performance
By Two Hawk's Eye
http://www.flickr.com/photos/mycoolpics/92033686/

43. Player Start Time
Flash
200ms
HTML5
TODO(schechter): Add csi screen captures

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

45. Get Video Time

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

47. Video Start Time
HTML5
Flash 2s

48. So why is flash so fast?

49. Make Assumptions

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

51. Preload Video Connection

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

53. What about embeds?

54. #1 cache

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

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

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

58. #2 lazy load

59. Most embeds are never played.

60. ● Delay expensive queries.
● Use cache for most videos.
● Delay loading... flash?

61. Demo:
http://gregthebusker.com/iframedemo.html

62. Player API
http://code.google.com/apis/youtube/getting_started.html#player_apis

63. The JavaScript API
Communication

64. The JavaScript API
Communication
● Poll the URL fragment?
http://youtube.com/embed/video_id#fragment

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

66. The JavaScript API
Communication
● Better idea: PostMessage API.
someWindow.postMessage(message, targetOrigin);

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

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

69. Questions?
can haz question?
By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/
schechter@google.com
philharnish@google.com