SlideShare a Scribd company logo
1 of 75
Download to read offline
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

More Related Content

What's hot

Modern Web Application Development Workflow - EclipseCon France 2014
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
 
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)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Videosteveheffernan
 
Maven beyond hello_world
Maven beyond hello_worldMaven beyond hello_world
Maven beyond hello_worldGabriel Dogaru
 
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
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
 
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...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...WordCamp Sydney
 
Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!Bronson Quick
 
How 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 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 ClientColdFusionConference
 
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, ...
2015 TechSummit Web & Cloud - Gem, NPM, Bower, Nuget, Paket - Päckchen hier, ...Daniel Fisher
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Stéphane Bégaudeau
 
Introduction to git & WordPress
Introduction to git & WordPressIntroduction to git & WordPress
Introduction to git & WordPressJosh Lee
 
Firefox os how large open source project works
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project worksFred Lin
 
HTML5 Video for WordPress
HTML5 Video for WordPressHTML5 Video for WordPress
HTML5 Video for WordPresssteveheffernan
 
Making websites with WordPress
Making websites with WordPressMaking websites with WordPress
Making websites with WordPressJosh Lee
 
2011 - Dotnet Information Day: NUGET
2011 - Dotnet Information Day: NUGET2011 - Dotnet Information Day: NUGET
2011 - Dotnet Information Day: NUGETDaniel Fisher
 
JS digest. October 2017
JS digest. October 2017 JS digest. October 2017
JS digest. October 2017 ElifTech
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformDidier Girard
 

What's hot (20)

Modern Web Application Development Workflow - EclipseCon France 2014
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)
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)
 
Upgrade to HTML5 Video
Upgrade to HTML5 VideoUpgrade to HTML5 Video
Upgrade to HTML5 Video
 
Maven beyond hello_world
Maven beyond hello_worldMaven beyond hello_world
Maven beyond hello_world
 
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
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
 
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...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
 
Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!
 
How 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 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, ...
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, ...
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014
 
Introduction to git & WordPress
Introduction to git & WordPressIntroduction to git & WordPress
Introduction to git & WordPress
 
Firefox os how large open source project works
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project works
 
HTML5 Video for WordPress
HTML5 Video for WordPressHTML5 Video for WordPress
HTML5 Video for WordPress
 
Making websites with WordPress
Making websites with WordPressMaking websites with WordPress
Making websites with WordPress
 
2011 - Dotnet Information Day: NUGET
2011 - Dotnet Information Day: NUGET2011 - Dotnet Information Day: NUGET
2011 - Dotnet Information Day: NUGET
 
Grunt and Bower
Grunt and BowerGrunt and Bower
Grunt and Bower
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
JS digest. October 2017
JS digest. October 2017 JS digest. October 2017
JS digest. October 2017
 
Future of Grails
Future of GrailsFuture of Grails
Future of Grails
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
 

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

Mobile Meow at Mobilism
Mobile Meow at MobilismMobile Meow at Mobilism
Mobile Meow at MobilismGreg Schechter
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
 
HTML5 multimedia - where we are, where we're going
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
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationMatthew Fabb
 
HTML5 Multimedia: where we are, where we're going
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
 
Html5, Native and Platform based Mobile Applications
Html5, Native and Platform based Mobile ApplicationsHtml5, Native and Platform based Mobile Applications
Html5, Native and Platform based Mobile ApplicationsYoss Cohen
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video TutorialSilvia Pfeiffer
 
Video Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiVideo Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiDoug Sillars
 
Video performance munichfrontend
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontendDoug Sillars
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014RZasadzinski
 
[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!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
Video performance barcelona-js_coders
Video performance barcelona-js_codersVideo performance barcelona-js_coders
Video performance barcelona-js_codersDoug Sillars
 
NodeJS Edinburgh Video Killed My Data Plan
NodeJS Edinburgh Video Killed My Data PlanNodeJS Edinburgh Video Killed My Data Plan
NodeJS Edinburgh Video Killed My Data PlanDoug Sillars
 
Video performance snowcamp
Video performance snowcampVideo performance snowcamp
Video performance snowcampDoug Sillars
 

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

Mobile Meow at Mobilism
Mobile Meow at MobilismMobile Meow at Mobilism
Mobile Meow at Mobilism
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
JS Days Mobile Meow
JS Days Mobile MeowJS Days Mobile Meow
JS Days Mobile Meow
 
HTML5 multimedia - where we are, where we're going
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
 
Web DU Mobile Meow
Web DU Mobile MeowWeb DU Mobile Meow
Web DU Mobile Meow
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentation
 
HTML5 Multimedia: where we are, where we're going
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
 
Html5, Native and Platform based Mobile Applications
Html5, Native and Platform based Mobile ApplicationsHtml5, Native and Platform based Mobile Applications
Html5, Native and Platform based Mobile Applications
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video Tutorial
 
Html5video
Html5videoHtml5video
Html5video
 
HTML5 Video
HTML5 VideoHTML5 Video
HTML5 Video
 
Video Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiVideo Killed My Data Plan: Helsinki
Video Killed My Data Plan: Helsinki
 
Video performance munichfrontend
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontend
 
T3fest video
T3fest videoT3fest video
T3fest video
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
 
[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!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
Video performance barcelona-js_coders
Video performance barcelona-js_codersVideo performance barcelona-js_coders
Video performance barcelona-js_coders
 
NodeJS Edinburgh Video Killed My Data Plan
NodeJS Edinburgh Video Killed My Data PlanNodeJS Edinburgh Video Killed My Data Plan
NodeJS Edinburgh Video Killed My Data Plan
 
Video performance snowcamp
Video performance snowcampVideo performance snowcamp
Video performance snowcamp
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 

Recently uploaded

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Recently uploaded (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

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