SlideShare a Scribd company logo
1 of 97
Download to read offline
Mobile Meow
Bring YouTube to the Mobile Web




  By YouTube's Greg Schechter
Greg Schechter
The Web Warrior




schechter@google.com
Video
Video
JS Days Mobile Meow
JS Days Mobile Meow
A Brief History
Video
Flash
<video>
Video
Playback Stats
Flash   Native   <video>
Flash
Flash
         ==   Flash
Flash   Flash
Native
Native


 ○   For fallbacks, use rtsp:// protocol (serving .3pg) if the
     device won't support HTML5
 ○   Use custom protocol / URL scheme to launch your own
     Android, iOS native app (no Windows Phone yet)
      ■ youtube://video_id
<video>
The Different Browsers




        Safari           Android
The Different Browsers

                             Opera
Safari    Android   Chrome                Silk
                              Mini




    Firefox   Opera
                                     IE
The Different Browsers

                             Opera
Safari    Android   Chrome                Silk
                              Mini




    Firefox   Opera
                                     IE




                    AMP LE
              S
By brownpau at http://www.flickr.com/photos/brownpau/533267369/
How do we start




              <video>
The Source




     <video src="funny_cat_video">
The Source




<video src="funny_cat_video.webm/mp4/ogg">
Mobile Formats Support


        Chrome       Safari           Firefox   Opera        IE   Android
H.264



WebM    Android 4+                              Android 4+        Android 4+



HLS                                                               Android 3+




 Platform Versions and Distribution
The Source




   <video>
    <source src="funny_cat_video.mp4">
    <source src="funny_cat_video.webm">
   </video>
HLS = HTTP Live Streaming




   <video src="playlist.m3u8">
HLS


                              video-0-1.ts
              format-0.m3u8   video-0-2.ts
                                   ...

                              video-1-1.ts
 index.m3u8   format-0.m3u8   video-1-2.ts
                                   ...

                              video-2-1.ts
              format-0.m3u8   video-2-2.ts
                                   ...
HLS

Big Features
    ○   Live and Adaptive Streaming
    ○   Built in CDN failover
    ○   Metadata + Cue Points


Apple App Requirements
   ○ > 10 minutes in duration or 5 mb in 5 minutes
   ○ at least one 64 kbps or lower stream required

Tools and more information on Apple's website:
Apple's Using HTTP Live Streaming
Power
Power Consumption: H264 vs WebM


                                                                              **fullscreen flash
                                                                              **windowed flash




Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/
Stick it in a page
Basic video tag
Safari
   ○   Renders a thumbnail poster and play button (flaky)
   ○   Background is set to black and cannot be overwritten
   ○   If a parent element has display:none set at any point the video fails to
       playback properly

Opera
   ○   Gives video dimentions black background if the information is
       available
   ○   Has issues with stretching WebM

IE and Android
   ○   Play button/film icon for all video tags regardless if browser can play
       the format
   ○   Background is set to black/grey and cannot be overwritten
Give it a poster and click it
Poster Attribute
Use the poster attribute to get a thumbnail

Safari, Chrome, Android, and Opera
   ○ Preserve aspect ratio of poster image
IE and Firefox
    ○ Stretch image to size of video tag
IE
     ○   Keeps poster as paused state

All Others
    ○ Replace video with the paused frame
Basic video tag


Chrome
   ○ Default click to toggle play/pause
   ○ Remove with an empty onclick handler
Safari
   ○     Will launch any supported video with or without an onclick handler

Android and IE
   ○ Shows click interactions but does not play with empty onclick
Basic video tag



Pro tips:
   ○   Create your own cued state to convey you can play the video
   ○   Set the background color to black for continuity across platforms
Controls




           <video controls>
Controls
             Chrome   Safari       Firefox       Opera           IE           Android
Play/pause
Button


Volume                Only in      Mute toggle   Don't work in
Controls              Fullscreen   only          Android 4


Seek bar



Fullscreen   Button   Gesture                                                 Button
button

Playback     Both     Fullscreen   Inline only   Determined      Fullscreen   Both
Type                  only                       by hardware     only
Custom Controls
● Preserve your brand
● Unified experience across platforms and
  browsers
Custom Controls




  Lets get some custom controls
Custom Controls
● Allows us to expand the set of controls and add our own
  ○ annotations
  ○ playlist
  ○ captions
  ○ more
Custom Controls Pro Tips
● User expect to be able to drag the progress
  bar
  ○ Need to remender to prevent scroll on touchstart
● Volume can't be set everywhere and users
  are accustomed to using device controls
  ○ So don't build controls for it
Custom Controls Pro Tips
●   Fingers are fat
    ○ Average finger is 11mm so make targets at least
        40px with 10px padding
    ○   Use SVG's so icons can be scaled and shared with
        desktop application
    ○   Do what you can in css
Custom Controls Pro Tips
●   Don't trigger content with hover
●   Fullscreen
    ○ The browsing context is always fullscreen so fake it
Fullscreen
requestFullScreen
requestFullScreen
● Desktop Only
  ○ Firefox, Safari, and Chrome
  ○ Vendor Prefixed
What about Mobile?
Isn't it already fullscreen?
Yes (sort of)
Mobile Fullscreen

●   Open New Tab
●   webkitEnterFullscreen
      ■ Webkit only
      ■ Video element only
      ■ metadata must be loaded
Mobile Fullscreen

●   Open New Tab
●   webkitEnterFullscreen
      ■ Webkit only
      ■ Video element only
      ■ metadata must be loaded
●   Pro Tip: Remember size context
    changes so use viewport to scale
    icons and controls
@viewport { width: device-width; }
autoplay




           <video autoplay>
JS Days Mobile Meow
autoplay


In Safari on iOS (for all devices, including iPad),
where the user may be on a cellular network and
be charged per data unit, preload and autoplay are
disabled. No data is loaded until the user initiates it.
What about everyone else?
Autoplay


            Chrome   Safari   Firefox   Opera   IE   Android
Attribute



Scripted                                             Buggy
autoplay
autoplay




       <video onclick="this.play()">
JS Days Mobile Meow
JS Days Mobile Meow
autoplay
function someClickEvent(evt) {
  // In a user initiated thread.
  myVideoElement.load();
  getVideoData(); // Triggers an ajax call.
}

function onGetVideoDataReturned(data) {
  // Not in a user initiated thread.
  setVideoElementSrc(data);
  myVideoElement.load();
  myVideoElement.play();
}
autoplay
function someClickEvent(evt) {
  // In a user initiated thread.
  myVideoElement.load();
  getVideoData(); // Triggers an ajax call.
}

function onGetVideoDataReturned(data) {
  // Not in a user initiated thread.
  setVideoElementSrc(data);
  myVideoElement.load();
  // For Android
  window.setTimeout(function() {
    myVideoElement.play();
  }, 0);
}
Embeds
Embeds
 <script>
Embeds
 <script>
   ○ We need our content to be sandboxed
   ○ More than just a video tag
Embeds
 <script>
   ○ We need our content to be sandboxed
   ○ More than just a video tag
 <object>
Embeds
 <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 via
      JavaScript
Embeds
 <iframe>
Embeds
 <iframe>
    ○ Allows our content to be sandboxed
    ○ JavaScript API communication
Embeds

<iframe type="text/html"
  width="640"
  height="385"
  frameborder="0"
  src="http://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>
Embeds
Pro tip: Plan for the future (if you can)

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



html {
  /** Hack to fix iPhone resizing. */
  overflow: hidden;
}
Embeds Pro Tips:

body {
  /** Dymanic Resizing **/
  background-color: #000;
  height: 100%;
  width: 100%;
  /** Remove highlight when use clicks **/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Testing
Testing: The Old Fashioned Way
 ●   Device lab
      ○ accurate
      ○ costly
      ○ space inefficient
      ○ boring
Testing: With Software
 ● Hardware Emulators / Simulators
    ○ available for major systems
    ○ approximation varies
    ○ still boring
 ● Android Emulator
    ○ bulky, slow, no video codecs
 ● iOs Simulator
    ○ both tablet and phone
Testing: With Software
 ● Browser Simulators
   ○ Poorer approximation
 ● Opera Mobile Simulator
   ○ missing video tag support
 ● Fennec (FF) Simulator
   ○ poor touch control mapping
   ○ sends desktop user agent
Testing: Automation
 ● Selenium!
   ○ use with simulated or real devices
   ○ not boring
Testing: Automation
 ● Android Webdriver
    ○ Still no video support
 ● iOS Webdriver
    ○ Need to register as ios dev
    ○ Intermittent issues with playback
 ● IE
    ○ No webdriver APIs for mobile
Testing: Automation
 ● Chrome, Opera
   ○ Driver APIs built-in
   ○ Remote debugging
 ● FFMobile
   ○ No webdriver APIs
Testing: Automation Strategy
 ● Test API methods in mobile context first
   ○ cheap
   ○ can approximate video playback by video.
      currentTime
Testing: Automation Strategy
 ● More sophisticated tests to follow
   ○ screenreader
 ● Screen cap processing
   ○ check for distortion
   ○ playback accuracy
Testing: Automation Strategy
 ● Screen cap processing
Testing: Hardware Assistance




   for more information check out http://bitbeam.org/
The Future




 Cats in Space by WF&TD
JS Days Mobile Meow
Or
PointerEvents
http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx
http://imgs.xkcd.com/comics/in_ur_reality.png
Track



<video>
 <track src="cats_meow" kind="subtitles">
</video>
Camera Access with
  getUserMedia
More to learn
 ● HTML5 Video Spec
   ○ http://dev.w3.org/html5/spec-author-view/video.html
 ● Browser Blogs
   ○ http://dev.opera.com/
   ○ http://hacks.mozilla.org/
   ○ http://blogs.msdn.com/b/ie/
   ○ http://peter.sh/
 ● Documentation
   ○ https://developer.mozilla.org/en-US/
 ● Other
   ○ http://developer.apple.
        com/library/safari/#documentation/AudioVideo/Conceptual/Using_HT
        ML5_Audio_Video/Device-SpecificConsiderations/Device-
        SpecificConsiderations.html
Questions?




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

More Related Content

What's hot

HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibilitybrucelawson
 
State of Media Accessibility in HTML5
State of Media Accessibility in HTML5State of Media Accessibility in HTML5
State of Media Accessibility in HTML5Silvia Pfeiffer
 
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
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Playersteveheffernan
 
StoryCode Immersion #5 - Popcorn.JS Deep Dive
StoryCode Immersion #5 - Popcorn.JS Deep DiveStoryCode Immersion #5 - Popcorn.JS Deep Dive
StoryCode Immersion #5 - Popcorn.JS Deep Divestorycode
 
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
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationMatthew Fabb
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
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
 
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
 
WebPagetest - Good, Bad & Ugly
WebPagetest - Good, Bad & UglyWebPagetest - Good, Bad & Ugly
WebPagetest - Good, Bad & UglyAaron Peters
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Warsawclouddays video
Warsawclouddays videoWarsawclouddays video
Warsawclouddays videoDoug Sillars
 

What's hot (20)

HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 
State of Media Accessibility in HTML5
State of Media Accessibility in HTML5State of Media Accessibility in HTML5
State of Media Accessibility in HTML5
 
Html5video
Html5videoHtml5video
Html5video
 
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
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
StoryCode Immersion #5 - Popcorn.JS Deep Dive
StoryCode Immersion #5 - Popcorn.JS Deep DiveStoryCode Immersion #5 - Popcorn.JS Deep Dive
StoryCode Immersion #5 - Popcorn.JS Deep Dive
 
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)
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentation
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne
 
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
 
Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb
 
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
 
WebPagetest - Good, Bad & Ugly
WebPagetest - Good, Bad & UglyWebPagetest - Good, Bad & Ugly
WebPagetest - Good, Bad & Ugly
 
YouTube for Developers
YouTube for DevelopersYouTube for Developers
YouTube for Developers
 
Vilnius py video
Vilnius py videoVilnius py video
Vilnius py video
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Warsawclouddays video
Warsawclouddays videoWarsawclouddays video
Warsawclouddays video
 

Similar to JS Days Mobile Meow

GDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat VideosGDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat VideosGreg Schechter
 
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
 
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
 
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...Shlomo Perets
 
Developer Training for 23 Video
Developer Training for 23 VideoDeveloper Training for 23 Video
Developer Training for 23 VideoSteffen
 
Video Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiVideo Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiDoug 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
 
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 munichfrontend
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontendDoug Sillars
 
Video performance snowcamp
Video performance snowcampVideo performance snowcamp
Video performance snowcampDoug Sillars
 
Video performance barcelona-js_coders
Video performance barcelona-js_codersVideo performance barcelona-js_coders
Video performance barcelona-js_codersDoug Sillars
 

Similar to JS Days Mobile Meow (20)

GDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat VideosGDD HTML5, Flash, and the Battle for Faster Cat Videos
GDD HTML5, Flash, and the Battle for Faster Cat Videos
 
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
 
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
 
Portogdg video
Portogdg videoPortogdg video
Portogdg video
 
Rija js video
Rija js videoRija js video
Rija js video
 
Gdg lublin video
Gdg lublin videoGdg lublin video
Gdg lublin video
 
Krakow video
Krakow videoKrakow video
Krakow video
 
Corkgdg video
Corkgdg videoCorkgdg video
Corkgdg video
 
Armadajs video
Armadajs videoArmadajs video
Armadajs video
 
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...
 
Developer Training for 23 Video
Developer Training for 23 VideoDeveloper Training for 23 Video
Developer Training for 23 Video
 
Video Killed My Data Plan: Helsinki
Video Killed My Data Plan: HelsinkiVideo Killed My Data Plan: Helsinki
Video Killed My Data Plan: Helsinki
 
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
 
FUGN - Stage Video and Molehill
FUGN - Stage Video and MolehillFUGN - Stage Video and Molehill
FUGN - Stage Video and Molehill
 
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
 
T3fest video
T3fest videoT3fest video
T3fest video
 
Video performance munichfrontend
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontend
 
Video performance snowcamp
Video performance snowcampVideo performance snowcamp
Video performance snowcamp
 
Frontcon video
Frontcon videoFrontcon video
Frontcon video
 
Video performance barcelona-js_coders
Video performance barcelona-js_codersVideo performance barcelona-js_coders
Video performance barcelona-js_coders
 

Recently uploaded

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
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
 
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
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
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
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
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
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
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
 
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
 
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 Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 

Recently uploaded (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
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
 
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
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
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
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
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
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
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
 
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
 
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
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 

JS Days Mobile Meow

  • 1. Mobile Meow Bring YouTube to the Mobile Web By YouTube's Greg Schechter
  • 2. Greg Schechter The Web Warrior schechter@google.com
  • 11. Video
  • 13. Flash Native <video>
  • 14. Flash Flash == Flash
  • 15. Flash Flash
  • 17. Native ○ For fallbacks, use rtsp:// protocol (serving .3pg) if the device won't support HTML5 ○ Use custom protocol / URL scheme to launch your own Android, iOS native app (no Windows Phone yet) ■ youtube://video_id
  • 19. The Different Browsers Safari Android
  • 20. The Different Browsers Opera Safari Android Chrome Silk Mini Firefox Opera IE
  • 21. The Different Browsers Opera Safari Android Chrome Silk Mini Firefox Opera IE AMP LE S
  • 22. By brownpau at http://www.flickr.com/photos/brownpau/533267369/
  • 23. How do we start <video>
  • 24. The Source <video src="funny_cat_video">
  • 26. Mobile Formats Support Chrome Safari Firefox Opera IE Android H.264 WebM Android 4+ Android 4+ Android 4+ HLS Android 3+ Platform Versions and Distribution
  • 27. The Source <video> <source src="funny_cat_video.mp4"> <source src="funny_cat_video.webm"> </video>
  • 28. HLS = HTTP Live Streaming <video src="playlist.m3u8">
  • 29. HLS video-0-1.ts format-0.m3u8 video-0-2.ts ... video-1-1.ts index.m3u8 format-0.m3u8 video-1-2.ts ... video-2-1.ts format-0.m3u8 video-2-2.ts ...
  • 30. HLS Big Features ○ Live and Adaptive Streaming ○ Built in CDN failover ○ Metadata + Cue Points Apple App Requirements ○ > 10 minutes in duration or 5 mb in 5 minutes ○ at least one 64 kbps or lower stream required Tools and more information on Apple's website: Apple's Using HTTP Live Streaming
  • 31. Power
  • 32. Power Consumption: H264 vs WebM **fullscreen flash **windowed flash Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/
  • 33. Stick it in a page
  • 34. Basic video tag Safari ○ Renders a thumbnail poster and play button (flaky) ○ Background is set to black and cannot be overwritten ○ If a parent element has display:none set at any point the video fails to playback properly Opera ○ Gives video dimentions black background if the information is available ○ Has issues with stretching WebM IE and Android ○ Play button/film icon for all video tags regardless if browser can play the format ○ Background is set to black/grey and cannot be overwritten
  • 35. Give it a poster and click it
  • 36. Poster Attribute Use the poster attribute to get a thumbnail Safari, Chrome, Android, and Opera ○ Preserve aspect ratio of poster image IE and Firefox ○ Stretch image to size of video tag IE ○ Keeps poster as paused state All Others ○ Replace video with the paused frame
  • 37. Basic video tag Chrome ○ Default click to toggle play/pause ○ Remove with an empty onclick handler Safari ○ Will launch any supported video with or without an onclick handler Android and IE ○ Shows click interactions but does not play with empty onclick
  • 38. Basic video tag Pro tips: ○ Create your own cued state to convey you can play the video ○ Set the background color to black for continuity across platforms
  • 39. Controls <video controls>
  • 40. Controls Chrome Safari Firefox Opera IE Android Play/pause Button Volume Only in Mute toggle Don't work in Controls Fullscreen only Android 4 Seek bar Fullscreen Button Gesture Button button Playback Both Fullscreen Inline only Determined Fullscreen Both Type only by hardware only
  • 41. Custom Controls ● Preserve your brand ● Unified experience across platforms and browsers
  • 42. Custom Controls Lets get some custom controls
  • 43. Custom Controls ● Allows us to expand the set of controls and add our own ○ annotations ○ playlist ○ captions ○ more
  • 44. Custom Controls Pro Tips ● User expect to be able to drag the progress bar ○ Need to remender to prevent scroll on touchstart ● Volume can't be set everywhere and users are accustomed to using device controls ○ So don't build controls for it
  • 45. Custom Controls Pro Tips ● Fingers are fat ○ Average finger is 11mm so make targets at least 40px with 10px padding ○ Use SVG's so icons can be scaled and shared with desktop application ○ Do what you can in css
  • 46. Custom Controls Pro Tips ● Don't trigger content with hover ● Fullscreen ○ The browsing context is always fullscreen so fake it
  • 49. requestFullScreen ● Desktop Only ○ Firefox, Safari, and Chrome ○ Vendor Prefixed
  • 51. Isn't it already fullscreen?
  • 53. Mobile Fullscreen ● Open New Tab ● webkitEnterFullscreen ■ Webkit only ■ Video element only ■ metadata must be loaded
  • 54. Mobile Fullscreen ● Open New Tab ● webkitEnterFullscreen ■ Webkit only ■ Video element only ■ metadata must be loaded ● Pro Tip: Remember size context changes so use viewport to scale icons and controls
  • 55. @viewport { width: device-width; }
  • 56. autoplay <video autoplay>
  • 58. autoplay In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
  • 60. Autoplay Chrome Safari Firefox Opera IE Android Attribute Scripted Buggy
  • 62. autoplay <video onclick="this.play()">
  • 65. autoplay function someClickEvent(evt) { // In a user initiated thread. myVideoElement.load(); getVideoData(); // Triggers an ajax call. } function onGetVideoDataReturned(data) { // Not in a user initiated thread. setVideoElementSrc(data); myVideoElement.load(); myVideoElement.play(); }
  • 66. autoplay function someClickEvent(evt) { // In a user initiated thread. myVideoElement.load(); getVideoData(); // Triggers an ajax call. } function onGetVideoDataReturned(data) { // Not in a user initiated thread. setVideoElementSrc(data); myVideoElement.load(); // For Android window.setTimeout(function() { myVideoElement.play(); }, 0); }
  • 69. Embeds <script> ○ We need our content to be sandboxed ○ More than just a video tag
  • 70. Embeds <script> ○ We need our content to be sandboxed ○ More than just a video tag <object>
  • 71. Embeds <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 via JavaScript
  • 73. Embeds <iframe> ○ Allows our content to be sandboxed ○ JavaScript API communication
  • 74. Embeds <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen> </iframe>
  • 75. Embeds Pro tip: Plan for the future (if you can) <iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen> </iframe>
  • 76. Embeds Pro Tips: html { /** Hack to fix iPhone resizing. */ overflow: hidden; }
  • 77. Embeds Pro Tips: body { /** Dymanic Resizing **/ background-color: #000; height: 100%; width: 100%; /** Remove highlight when use clicks **/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  • 79. Testing: The Old Fashioned Way ● Device lab ○ accurate ○ costly ○ space inefficient ○ boring
  • 80. Testing: With Software ● Hardware Emulators / Simulators ○ available for major systems ○ approximation varies ○ still boring ● Android Emulator ○ bulky, slow, no video codecs ● iOs Simulator ○ both tablet and phone
  • 81. Testing: With Software ● Browser Simulators ○ Poorer approximation ● Opera Mobile Simulator ○ missing video tag support ● Fennec (FF) Simulator ○ poor touch control mapping ○ sends desktop user agent
  • 82. Testing: Automation ● Selenium! ○ use with simulated or real devices ○ not boring
  • 83. Testing: Automation ● Android Webdriver ○ Still no video support ● iOS Webdriver ○ Need to register as ios dev ○ Intermittent issues with playback ● IE ○ No webdriver APIs for mobile
  • 84. Testing: Automation ● Chrome, Opera ○ Driver APIs built-in ○ Remote debugging ● FFMobile ○ No webdriver APIs
  • 85. Testing: Automation Strategy ● Test API methods in mobile context first ○ cheap ○ can approximate video playback by video. currentTime
  • 86. Testing: Automation Strategy ● More sophisticated tests to follow ○ screenreader ● Screen cap processing ○ check for distortion ○ playback accuracy
  • 87. Testing: Automation Strategy ● Screen cap processing
  • 88. Testing: Hardware Assistance for more information check out http://bitbeam.org/
  • 89. The Future Cats in Space by WF&TD
  • 91. Or
  • 94. Track <video> <track src="cats_meow" kind="subtitles"> </video>
  • 95. Camera Access with getUserMedia
  • 96. More to learn ● HTML5 Video Spec ○ http://dev.w3.org/html5/spec-author-view/video.html ● Browser Blogs ○ http://dev.opera.com/ ○ http://hacks.mozilla.org/ ○ http://blogs.msdn.com/b/ie/ ○ http://peter.sh/ ● Documentation ○ https://developer.mozilla.org/en-US/ ● Other ○ http://developer.apple. com/library/safari/#documentation/AudioVideo/Conceptual/Using_HT ML5_Audio_Video/Device-SpecificConsiderations/Device- SpecificConsiderations.html
  • 97. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/ schechter@google.com