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
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>
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()">
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
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

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
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
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
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
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.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
  • 5.
  • 6.
  • 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>
  • 57.
  • 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()">
  • 63.
  • 64.
  • 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
  • 90.
  • 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