Background:

YouTube on Mobile

YouTube


 

YouTube on Mobile

 

YouTube Embedded Player

YouTube in your Apps

Introducing the YouTube Android Player API

The YouTube Android Player API

Pre-announcement

Subject to change

 

 

 

Live Streaming in the Google IO App

       

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Same web-embedding HTML as desktop
      • Not a true mobile experience
      • Browser plugin: no player API access
      • Browser plugin: no monetized content
      • Flash: not available on all devices

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Not a good mobile experience for users

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Not a good mobile experience for users

    iFrame Based Embed

      • HTML5 video
      • Offers a Player API access
      • Must embed player in a WebView
      • Unsupported on older versions of Android

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Not a good mobile experience for users

    iFrame Based Embed

      • Not a good mobile development experience for you

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Not a good mobile experience for users

    iFrame Based Embed

      • Not a good mobile development experience for you

    Launch video in Native YouTube Application

      • Easy to do - simply send an Intent with video id
      • Native Android experience
      • Cannot embed player view in your UI
      • No player API access
      • User leaves your application

Why Another YouTube Player API?

A Look at the Current Options

    Browser plugin / Flash based Embed

      • Not a good mobile experience for users

    iFrame Based Embed

      • Not a good mobile development experience for you

    Launch video in Native YouTube Application

      • No control

The YouTube Android Player API

A Native Library Specifically Designed for Android Devices

 

 

 

The YouTube Android Player API

Optimized for Mobile, Tablet and GoogleTV

The YouTube Android Player API

Support from Android 2.2 (Froyo)

            
                     

The YouTube Android Player API

Trivial Embedding

 

 

 

 

 

   
      YouTube.initialize(context, YOUTUBE_DEVELOPER_KEY);
      Intent intent = YouTubePlayerActivity.createIntent(context, videoId);
      startActivity(intent);
    

The YouTube Android Player API

Fullscreen and Orientation Change Support

The YouTube Android Player API

Full HD content

The YouTube Android Player API

Support for Monetized Content

Interaction with YouTube Data API

This is a Player API, not a Data API

  • Use the YouTube Data API for:
    • Searching for videos, channels and playlists
    • Finding video recommendations
    • Accessing user uploads and playlists
    • Accessing video meta-data
  • Use the YouTube Android Player API for:
    • Playing videos and playlists
    • Registering to be notified of playback events
    • YouTube UI widgets (e.g., YouTubePlayerView, VideoThumbnailView)
  • CodeLab: Master the latest YouTube Data API (June 28th 11:30AM - 1:15pm)

Workout Trainer            

Skimble

Skimble Workout Trainer

Gloto Designer                      

Gloto

Gloto

     

     

     

    Self-serve consumer engagement platform that disrupts the creative process

     

     

     

    Tony Jacobs     
    www.gloto.com     

Gloto Designer

  • Problem
    • Our customers need to control the entire experience
    • Want to embed video playback and support monetization
    • Short timelines and small budgets

  • Solution
    • Streamlined web-based editor
    • Native app using YouTube Android Player API
    • Follows YouTube best practices

Gloto Designer

Gloto

Motor Trend                     

Source Interlink Media

Source Interlink Media Properties

Deep Dive

Embedding YouTube in your App

Register for a YouTube Developer Key

Register for a YouTube Developer Key

Fire-and-Forget Video Playback

YouTubePlayerActivity

Fire-and-Forget Video Playback

YouTubePlayerActivity

    public void onCreate() {
      ...
      YouTube.initialize(this, YOUTUBE_DEVELOPER_KEY);
    }
    
    private void playVideo(String videoId) {
      Intent intent = YouTubePlayerActivity.createIntent(this, videoId);
      startActivity(intent);
    }

Fire-and-Forget Video Playback

YouTubePlayerActivity

    public void onCreate() {
      ...
      YouTube.initialize(this, YOUTUBE_DEVELOPER_KEY);
    }
    
    private void playVideo(String videoId) {
      Intent intent = YouTubePlayerActivity.createIntent(this, videoId);
      startActivity(intent);
    }
 
    private void playVideosInLightbox(ArrayList<String> videoIds, int startIdx) { 
      Intent intent = YouTubePlayerActivity.createIntent(this, videoIds, startIdx, true);
      startActivity(intent);
    }
    

Embedding YouTube Videos within your App

YouTubePlayerFragment / YouTubePlayerView

Embedding YouTube Videos within your App

YouTubePlayerFragment

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
  <fragment android:name="com.google.android.youtube.api.YouTubePlayerFragment"
      android:id="@+id/youtube_fragment"/>
</RelativeLayout>
      
    public class PlayerFragmentDemoActivity {
      ...
      private void loadVideo(String videoId) {
        YouTubePlayer youTubePlayer = getFragmentManager().findFragmentById(R.id.youtube_fragment);
        youTubePlayer.loadVideo(videoId);
      }
    }

Embedding YouTube Videos within your App

YouTubePlayerView

    public class PlayerViewDemoActivity extends YouTubeBaseActivity {

      private YouTubePlayer player;

      public void onCreate(Bundle saveInstanceState) {
        super.onCreate(saveInstanceState);
       player = new YouTubePlayerView();
       registerPlayerView(youTubePlayerView);
        setContentView(playerView);
      }

      private void loadVideo(String videoId) {
        playerView.loadVideo(videoId);
      }
    }

Handling Fullscreen

  • Default fullscreen support
    • Implemented as a fullscreen dialog above your activity
    • No code required
    • Incurs video rebuffering on switch to fullscreen

  • Custom fullscreen handling
    • Hide all your UI and expand player view to fill screen
    • Small amount of extra code required
    • Helpers to do almost everything for you
      • Hide system UI
      • Handle orientation changes
    • Seamless transition with no re-buffering

Seamless Fullscreen

Custom Fullscreen Handler

    public class FullscreenDemoActivity implements OnFullscreenListener {
      private boolean fullscreen;

      public void onCreate(Bundle saveInstanceState) {
        player.enableCustomFullscreen(this);
      }
      
      private void doLayout() {
        if (fullscreen) {
          // YouTube library automatically deals with orientation changes and hiding system UI
          playerView.setLayoutParams(new LayoutParams(MATCH_PARENT, MATCH_PARENT));
          otherViews.setVisibility(View.GONE);
        } else { /* non-fullscreen layout */ }
      }
        
      public void onFullscreen(boolean isFullscreen) {
        fullscreen = isFullscreen;
        doLayout();
      }
      
      public void onConfigurationChanged(Configuration configuration) {
        doLayout();
    }}

Tracking Player Events

  • OnFullscreenListener
    • Listen for fullscreen events
  • PlayerStateListener
    • Listen for loading, starting and ending of video playback
  • PlaybackEventListener
    • Track player events - e.g., play, pause, buffering, skip, etc.

Playback State Machines

PlayerStateListener

Playback State Machines

PlaybackEventListener

Example Code in API

  • Video Wall
    • Fully-featured example app - gives a feel for what can be done
  • Standalone Player
    • Fire-and-forget YouTube video playback
  • Simple PlayerView / PlayerFragment Embed
    • Simple video embeding using a views / fragments
  • Custom Player Controls
    • Shows how to control YouTube player programmatically
  • Custom Fullscreen Handling
    • Handle fullscreen transitions for a smoother fullscreen experience
  • YouTube Launcher Intents
    • Demonstrates launching the Android YouTube app in various modes

Live-Coding Demo

Building a Simple YouTube App from Scratch

Wrapup

Conclusions

  • A new YouTube Android Player API is on the way

  • Works across all Android devices (mobile, tablet, GoogleTV)

  • Support back to Froyo

  • Full support for monetized content

  • Lots of helper functionality to ensure you can make a polished app

<Thank You!>