android-youtube-player

Since the IFrame Player API does not natively support changing video quality on mobile devices, you can implement a workaround by manipulating the localStorage of the WebView.

Steps to implement:

1. Enable DOM Storage: In WebViewYouTubePlayer#initWebView, ensure domStorageEnabled is set to true.
2. Update HTML/JS: Add sendVideoQuality and setPlaybackQuality functions to ayp_youtube_player.html. The setPlaybackQuality function updates the yt-player-quality key in localStorage and reloads the video to apply changes.
3. Bridge to Android: Add a @JavascriptInterface method sendVideoQuality to YouTubePlayerBridge.kt to pass quality levels back to the Android side.
4. Update Interfaces:
   • Add fun setPlaybackQuality(quality: String) to the YoutubePlayer interface.
   • Implement setPlaybackQuality in WebViewYouTubePlayer.kt by calling the JavaScript function via loadUrl.
   • Add onVideoQuality(instance, quality) to your YouTubePlayerListener implementation.

Usage: Use YouTubePlayerListener#onVideoQuality to retrieve available qualities and youtubePlayer#setPlaybackQuality to set the desired one.

// In WebViewYouTubePlayer#initWebView
settings.domStorageEnabled = true

// In WebViewYouTubePlayer.kt implementation
override fun setPlaybackQuality(quality: String) {
  mainThreadHandler.post { loadUrl("javascript:setPlaybackQuality('$quality')") }
}

To enable the fullscreen button, pass .fullscreen(1) to your IFramePlayerOptions. To handle the transition, add a FullscreenListener to the YouTubePlayerView.

Important: When onEnterFullscreen is triggered, the player is rendered inside the provided fullscreenView. You are responsible for adding this view to your app's hierarchy and removing it when onExitFullscreen is called. It is also recommended to handle Activity orientation changes in your AndroidManifest.xml using android:configChanges to prevent the Activity from recreating during fullscreen transitions.

youTubePlayerView.addFullscreenListener(new FullscreenListener() {
  @Override
  public void onEnterFullscreen(@NonNull View fullscreenView, @NonNull Function0<Unit> exitFullscreen) {
    // Add fullscreenView to your hierarchy
  }

  @Override
  public void onExitFullscreen() {
    // Remove fullscreenView from your hierarchy
  }
});

Starting from version 12.0.0, the library provides a pre-made, ready-to-use custom UI via the custom-ui module. This allows you to quickly implement a professional-looking player interface.

Installation: You must add both the core and custom-ui modules to your build.gradle dependencies:

dependencies {
    implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:core:{latest-version}'
    implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:custom-ui:{latest-version}'
}

Usage: Initialize the DefaultPlayerUiController inside the onReady callback of your YouTubePlayerListener and pass its root view to setCustomPlayerUi.

YouTubePlayerListener listener = new AbstractYouTubePlayerListener() {
  @Override
  public void onReady(@NonNull YouTubePlayer youTubePlayer) {
    // Using pre-made custom ui
    DefaultPlayerUiController defaultPlayerUiController = new DefaultPlayerUiController(youTubePlayerView, youTubePlayer);
    youTubePlayerView.setCustomPlayerUi(defaultPlayerUiController.getRootView());
  }
};

// Disable iframe ui to prevent overlap
IFramePlayerOptions options = new IFramePlayerOptions.Builder(context).controls(0).build();
youTubePlayerView.initialize(listener, options);

You can completely replace the default YouTube player UI by providing your own layout or View. The new UI will be overlaid on top of the player.

To avoid visual conflicts, it is highly recommended to disable the default IFrame player controls by initializing the YouTubePlayerView with IFramePlayerOptions where controls(0) is set.

Key Methods:

• View inflateCustomPlayerUi(@LayoutRes int customUiLayoutID): Inflates a layout resource as the custom UI.
• void setCustomPlayerUi(View view): Sets a specific View as the custom UI.

Note: You are responsible for managing the logic of your custom UI (e.g., play/pause buttons) by implementing your own controller class and adding it as a listener to the YouTubePlayer.

// 1. Disable iframe UI
IFramePlayerOptions options = new IFramePlayerOptions.Builder(context).controls(0).build();

// 2. Inflate custom UI
View customPlayerUi = youTubePlayerView.inflateCustomPlayerUi(R.layout.custom_player_ui);

// 3. Initialize player with listener
YouTubePlayerListener listener = new AbstractYouTubePlayerListener() {
  @Override
  public void onReady(@NonNull YouTubePlayer youTubePlayer) {
    // Manage your UI logic here
    CustomPlayerUiController customPlayerUiController = new CustomPlayerUiController(CustomUiActivity.this, customPlayerUi, youTubePlayer, youTubePlayerView);
    youTubePlayer.addListener(customPlayerUiController);
  }
};

youTubePlayerView.initialize(listener, options);