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

Greg Schechter
Greg SchechterWeb Warrior at Facebook
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
GDD HTML5, Flash, and the Battle for Faster Cat Videos
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
1 of 75

Recommended

10 things you should know about django by
10 things you should know about django10 things you should know about django
10 things you should know about djangoAdieu
7.1K views53 slides
JS Days HTML5 Flash and the Battle for Faster Cat Videos by
JS Days HTML5 Flash and the Battle for Faster Cat VideosJS Days HTML5 Flash and the Battle for Faster Cat Videos
JS Days HTML5 Flash and the Battle for Faster Cat VideosGreg Schechter
1.7K views76 slides
HTML5, Flash, and the Battle For Faster Cat Videos by
HTML5, Flash, and the Battle For Faster Cat VideosHTML5, Flash, and the Battle For Faster Cat Videos
HTML5, Flash, and the Battle For Faster Cat VideosGreg Schechter
9.5K views69 slides
First steps with Gutenberg for developers - WC Prague 2020 by
First steps with Gutenberg for developers - WC Prague 2020First steps with Gutenberg for developers - WC Prague 2020
First steps with Gutenberg for developers - WC Prague 2020Magdalena Paciorek
1.6K views31 slides
Webpack & React Performance in 16+ Steps by
Webpack & React Performance in 16+ StepsWebpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ StepsGrgur Grisogono
4.9K views63 slides
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ... by
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...
Java Web Start czyli jak żyć z tą dziwną technologią & Continuous Delivery w ...MarcinStachniuk
385 views104 slides

More Related Content

What's hot

Modern Web Application Development Workflow - EclipseCon France 2014 by
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Stéphane Bégaudeau
3.5K views147 slides
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013) by
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green
890 views43 slides
Upgrade to HTML5 Video by
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Videosteveheffernan
516 views44 slides
Maven beyond hello_world by
Maven beyond hello_worldMaven beyond hello_world
Maven beyond hello_worldGabriel Dogaru
638 views27 slides
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016 by
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016Gavin Pickin
427 views69 slides
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke... by
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...WordCamp Sydney
474 views15 slides

What's hot(20)

Modern Web Application Development Workflow - EclipseCon France 2014 by Stéphane Bégaudeau
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013) by Ido Green
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Ido Green890 views
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016 by Gavin Pickin
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
Gavin Pickin427 views
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke... by WordCamp Sydney
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
WordCamp Sydney474 views
Debugging WordPress Core and Plugins! by Bronson Quick
Debugging WordPress Core and Plugins!Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!
Bronson Quick1.2K views
How do I Write Testable Javascript so I can Test my CF API on Server and Client by ColdFusionConference
How do I Write Testable Javascript so I can Test my CF API on Server and ClientHow do I Write Testable Javascript so I can Test my CF API on Server and Client
How do I Write Testable Javascript so I can Test my CF API on Server and Client
2015 TechSummit Web & Cloud - Gem, NPM, Bower, Nuget, Paket - Päckchen hier, ... by Daniel Fisher
2015 TechSummit Web & Cloud - Gem, NPM, Bower, Nuget, Paket - Päckchen hier, ...2015 TechSummit Web & Cloud - Gem, NPM, Bower, Nuget, Paket - Päckchen hier, ...
2015 TechSummit Web & Cloud - Gem, NPM, Bower, Nuget, Paket - Päckchen hier, ...
Daniel Fisher604 views
Modern Web Application Development Workflow - EclipseCon US 2014 by Stéphane Bégaudeau
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014
Stéphane Bégaudeau17.4K views
Introduction to git & WordPress by Josh Lee
Introduction to git & WordPressIntroduction to git & WordPress
Introduction to git & WordPress
Josh Lee1.1K views
Firefox os how large open source project works by Fred Lin
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project works
Fred Lin2.6K views
Making websites with WordPress by Josh Lee
Making websites with WordPressMaking websites with WordPress
Making websites with WordPress
Josh Lee1.2K views
2011 - Dotnet Information Day: NUGET by Daniel Fisher
2011 - Dotnet Information Day: NUGET2011 - Dotnet Information Day: NUGET
2011 - Dotnet Information Day: NUGET
Daniel Fisher486 views
JS digest. October 2017 by ElifTech
JS digest. October 2017 JS digest. October 2017
JS digest. October 2017
ElifTech501 views
GWT + Gears : The browser is the platform by Didier Girard
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
Didier Girard12.8K views

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

Mobile Meow at Mobilism by
Mobile Meow at MobilismMobile Meow at Mobilism
Mobile Meow at MobilismGreg Schechter
11.8K views94 slides
Multimedia on the web - HTML5 video and audio by
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
4.3K views85 slides
JS Days Mobile Meow by
JS Days Mobile MeowJS Days Mobile Meow
JS Days Mobile MeowGreg Schechter
16.9K views97 slides
HTML5 multimedia - where we are, where we're going by
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingbrucelawson
3.1K views64 slides
Web DU Mobile Meow by
Web DU Mobile MeowWeb DU Mobile Meow
Web DU Mobile MeowGreg Schechter
858 views112 slides
Html5 Video Vs Flash Video presentation by
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationMatthew Fabb
3K views20 slides

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

Mobile Meow at Mobilism by Greg Schechter
Mobile Meow at MobilismMobile Meow at Mobilism
Mobile Meow at Mobilism
Greg Schechter11.8K views
Multimedia on the web - HTML5 video and audio by Christian Heilmann
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
Christian Heilmann4.3K views
HTML5 multimedia - where we are, where we're going by brucelawson
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
brucelawson3.1K views
Html5 Video Vs Flash Video presentation by Matthew Fabb
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentation
Matthew Fabb3K views
HTML5 Multimedia: where we are, where we're going by brucelawson
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson2.8K views
Html5, Native and Platform based Mobile Applications by Yoss Cohen
Html5, Native and Platform based Mobile ApplicationsHtml5, Native and Platform based Mobile Applications
Html5, Native and Platform based Mobile Applications
Yoss Cohen14.1K views
Video Killed My Data Plan: Helsinki by Doug Sillars
Video Killed My Data Plan: HelsinkiVideo Killed My Data Plan: Helsinki
Video Killed My Data Plan: Helsinki
Doug Sillars184 views
Video performance munichfrontend by Doug Sillars
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontend
Doug Sillars147 views
HTML5 video & Amazon elastic transcoder - FCIP August 2014 by RZasadzinski
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski3.4K views
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet! by Christopher Schmitt
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt1.3K views
Video performance barcelona-js_coders by Doug Sillars
Video performance barcelona-js_codersVideo performance barcelona-js_coders
Video performance barcelona-js_coders
Doug Sillars182 views
NodeJS Edinburgh Video Killed My Data Plan by Doug Sillars
NodeJS Edinburgh Video Killed My Data PlanNodeJS Edinburgh Video Killed My Data Plan
NodeJS Edinburgh Video Killed My Data Plan
Doug Sillars323 views
Video performance snowcamp by Doug Sillars
Video performance snowcampVideo performance snowcamp
Video performance snowcamp
Doug Sillars416 views

Recently uploaded

Future of Learning - Yap Aye Wee.pdf by
Future of Learning - Yap Aye Wee.pdfFuture of Learning - Yap Aye Wee.pdf
Future of Learning - Yap Aye Wee.pdfNUS-ISS
41 views11 slides
Attacking IoT Devices from a Web Perspective - Linux Day by
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day Simone Onofri
15 views68 slides
The details of description: Techniques, tips, and tangents on alternative tex... by
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...BookNet Canada
121 views24 slides
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu... by
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...NUS-ISS
37 views54 slides
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV by
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTVSplunk
88 views20 slides
STPI OctaNE CoE Brochure.pdf by
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdfmadhurjyapb
12 views1 slide

Recently uploaded(20)

Future of Learning - Yap Aye Wee.pdf by NUS-ISS
Future of Learning - Yap Aye Wee.pdfFuture of Learning - Yap Aye Wee.pdf
Future of Learning - Yap Aye Wee.pdf
NUS-ISS41 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri15 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada121 views
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu... by NUS-ISS
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
NUS-ISS37 views
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV by Splunk
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
Splunk88 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb12 views
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen... by NUS-ISS
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
NUS-ISS28 views
Black and White Modern Science Presentation.pptx by maryamkhalid2916
Black and White Modern Science Presentation.pptxBlack and White Modern Science Presentation.pptx
Black and White Modern Science Presentation.pptx
maryamkhalid291614 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
The Importance of Cybersecurity for Digital Transformation by NUS-ISS
The Importance of Cybersecurity for Digital TransformationThe Importance of Cybersecurity for Digital Transformation
The Importance of Cybersecurity for Digital Transformation
NUS-ISS27 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10209 views
Future of Learning - Khoong Chan Meng by NUS-ISS
Future of Learning - Khoong Chan MengFuture of Learning - Khoong Chan Meng
Future of Learning - Khoong Chan Meng
NUS-ISS33 views
Perth MeetUp November 2023 by Michael Price
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023
Michael Price15 views
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by NUS-ISS
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
NUS-ISS34 views
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma17 views
Combining Orchestration and Choreography for a Clean Architecture by ThomasHeinrichs1
Combining Orchestration and Choreography for a Clean ArchitectureCombining Orchestration and Choreography for a Clean Architecture
Combining Orchestration and Choreography for a Clean Architecture
ThomasHeinrichs169 views
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor... by Vadym Kazulkin
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
Vadym Kazulkin75 views

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

  • 1. HTML5, Flash and the Battle for Faster Cat Videos By YouTube's Greg Schechter, Phil Harnish and Matt Ward
  • 2. 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
  • 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
  • 8. HTML5 ~= By geishaboy500 http://www.flickr.com/photos/geishaboy500/3183872667/
  • 9. 99% connected desktop penetration? http://www.adobe.com/products/player_census/flashplayer/
  • 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 ● Adaptive & Live Streaming
  • 17. Why Flash? Features missing in HTML5 ● Content protection ○ RTMPE protocol / Flash Access ● Camera & Microphone Access ● Adaptive & Live Streaming ● Fullscreen video
  • 18. 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
  • 19. 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();
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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****
  • 24. Why HTML5? <video> Expectations ● Open source technology ○ Browser / Player / Codec
  • 25. Why HTML5? <video> Expectations ● Open source technology ○ Browser / Player / Codec ● Lower latency ○ No plug-in instantiation
  • 26. Why HTML5? <video> Expectations ● Open source technology ○ Browser / Player / Codec ● Lower latency ○ No plug-in instantiation ● Better performance and fidelity
  • 27. Why HTML5? <video> Expectations ● Open source technology ○ Browser / Player / Codec ● Lower latency ○ No plug-in instantiation ● Better performance and fidelity ● Accessibility
  • 28. Why HTML5? <video> Expectations http://imgs.xkcd.com/comics/in_ur_reality.png
  • 29. 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
  • 30. Please put on your 3D Glasses
  • 32. 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
  • 33. Round 2: Device-ability By dakinyhttp://www.flickr.com/photos/dakiny/4430765149/
  • 34. Why HTML5? HTML5 Capable Browsers (~60%)
  • 35. Why HTML5? Flash Support vs. HTML5 Support
  • 36. Why HTML5? YouTube Data API Usage for Flash vs. HTML5 Devices
  • 39. Primary Goal: Recover playbacks that would be lost without flash
  • 41. <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen> </iframe>
  • 42. 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.
  • 43. 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
  • 44. When HTML5? When does the user get HTML5?
  • 45. 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! }
  • 46. When HTML5? When does the user get HTML5?
  • 47. Round 3: Performance By Two Hawk's Eye http://www.flickr.com/photos/mycoolpics/92033686/
  • 48. Player Start Time Flash 500ms HTML5 (Up from 200ms in Jan 2011) TODO(schechter): Add csi screen captures
  • 49. 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.
  • 51. 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
  • 53. Video Start Time HTML5 Flash 2.5s ● Firefox closest to catching Flash ○ HTML5 ~1.0s slower than Flash
  • 54. So why is Flash so fast?
  • 56. 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
  • 58. 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>
  • 61. 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
  • 62. 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
  • 63. 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
  • 65. Most embeds are never played.
  • 66. ● Delay expensive queries. ● Use cache for most videos. ● Delay loading... flash?
  • 70. The JavaScript API Communication ● Poll the URL fragment? http://youtube.com/embed/video_id#fragment
  • 71. 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.
  • 72. The JavaScript API Communication ● Better idea: PostMessage API. someWindow.postMessage(message, targetOrigin);
  • 73. 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.
  • 74. 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
  • 75. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/ schechter@google.com mattward@google.com philharnish@google.com