DOCSEARCHbyAlgolia
Submit Docs

youtube_player_flutter

repository·develop·Indexed 21 days ago

https://github.com/sarbagyastha/youtube_player_flutter

A Flutter monorepo for YouTube video playback via the official YouTube iFrame Player API. It includes the high-level youtube_player_flutter package with built-in controls and live stream UI, and the lower-level youtube_player_iframe package for custom UI implementations. Supports Android (API 20+), iOS 11+, macOS 10.14+, and Web.

Tokens
11K
Snippets
37
Records
52
Agent score
73%

What's inside youtube_player_flutter

  1. Features demonstrated in the youtube_player_iframe example

    develop

    The youtube_player_iframe example app demonstrates several key capabilities of the package:

    • Player view: Uses YoutubePlayer with a seek slider implemented via YoutubeValueBuilder and videoStateStream, including fullscreen support.
    • Info panel: Displays metadata like video title, channel, duration, playback quality, and player state using YoutubeValueBuilder.
    • Playback controls: Runtime controls for play, pause, stop, seek, setting playback rate, and mute/unmute.
    • Video loading: Ability to load videos by ID or URL, or switch between playlist entries.
    • Video list: A browsable playlist using YoutubeThumbnail for lazy-loaded thumbnails.
    • Responsive layout: Adapts between side-by-side (player + controls) on wide screens and stacked layouts on narrow screens.
    • Fullscreen management: Uses setFullScreenListener to handle fullscreen state changes.

  2. Customize player UI with the builder parameter

    develop
    The YoutubePlayer widget allows you to replace the default playback controls (progress bar, play/pause, seek, etc.) with your own custom UI. You can achieve this by providing a custom widget to the builder parameter. This is useful for creating branded overlays or specialized control layouts (e.g., adding mute or specific fullscreen buttons) that sit on top of the video player.

  3. Choose the right YouTube player package

    develop

    The youtube_player_flutter monorepo provides three distinct packages depending on your requirements for UI control and platform support:

    1. youtube_player_flutter: A high-level, "batteries-included" package. It provides a ready-to-use player with built-in controls, progress bars, drag-to-seek, pinch-to-fullscreen, and live stream UI. Use this if you want a polished player with minimal configuration.
    2. youtube_player_iframe: A lower-level package that provides a Flutter port of the official YouTube iFrame API. It gives you full control over the UI while managing playback state, playlists, metadata, and fullscreen transitions. Use this if you need to build a custom player design or complex playback logic.
    3. youtube_player_iframe_web: A web-specific implementation for youtube_player_iframe. You do not need to add this manually unless you are developing platform plugins or working within the monorepo; it is added automatically by youtube_player_iframe.

  4. Understand when to use youtube_player_iframe_web

    develop

    The youtube_player_iframe_web package is the specific web platform implementation for youtube_player_iframe.

    Important: You typically do not need to add youtube_player_iframe_web as a direct dependency in your project. It is automatically pulled in as a dependency when you use youtube_player_iframe on the web platform. This package is primarily intended for platform-implementation development and regression testing.

  5. Share the controller using YoutubePlayerControllerProvider

    develop

    To avoid passing the YoutubePlayerController through multiple widget layers, wrap your widget tree with YoutubePlayerControllerProvider. This allows any descendant widget to access the controller via context.ytController.

    YoutubePlayerControllerProvider(
  controller: controller,
  child: Scaffold(
    body: Column(
      children: [
        YoutubePlayer(controller: controller),
        const MyCustomControls(), // uses context.ytController internally
      ],
    ),
  ),
)

  6. Implement Lazy Thumbnails for lists

    develop

    To avoid the performance overhead of creating a WebView for every item in a list, use YoutubePlayerThumbnail. This widget displays a static image and only initializes the actual player when the user taps the thumbnail.

    // Display a clickable thumbnail that initializes the player on tap
YoutubePlayerThumbnail(
  controller: YoutubePlayerController.fromVideoId(videoId: '<video-id>'),
  aspectRatio: 16 / 9,
  thumbnailQuality: ThumbnailQuality.high,
  thumbnailFormat: ThumbnailFormat.webp,
)

// Or just get the thumbnail URL directly
final url = YoutubePlayerController.getThumbnail(
  videoId: '<video-id>',
  quality: ThumbnailQuality.high,
  format: ThumbnailFormat.webp,
);

  7. Run the youtube_player_iframe_web example

    develop

    To run the demonstration app for the web platform implementation, navigate to the example directory and use the flutter run command targeting Chrome. This example demonstrates how YoutubePlayer coexists with other web components like webview_flutter's WebViewWidget using a responsive layout.

    cd packages/youtube_player_iframe_web/example
flutter run -d chrome

  9. Run the youtube_player_iframe example app

    develop

    To run the interactive demonstration of the youtube_player_iframe package, navigate to the example directory and use the Flutter CLI. This example showcases a full implementation including a player view, info panels, playback controls, and a video list page.

    Supported platforms: Android, iOS, macOS, and Web.

    cd packages/youtube_player_iframe/example
flutter run

  10. Customize iOS launch screen assets

    develop

    To change the launch screen image for the iOS version of your app, you can either replace the image files directly in the LaunchImage.imageset directory or use Xcode.

    Using Xcode (Recommended):

    1. Open your Flutter project's iOS workspace using open ios/Runner.xcworkspace.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog to replace the existing launch screen assets.
    open ios/Runner.xcworkspace