',
+ autoPlay: false,
+ params: const YoutubePlayerParams(showFullscreenButton: true),
+);
+```
-[Follow the guide here for complete iOS setup](https://pub.dev/packages/flutter_inappwebview#important-note-for-ios)
+Then the player can be used in two ways:
-### Android
-Set `minSdkVersion` of your `android/app/build.gradle` file to at least 17.
+#### Using `YoutubePlayer`
+This widget can be used when fullscreen support is not required.
-[Follow the guide here for complete Android setup](https://pub.dev/packages/flutter_inappwebview#important-note-for-android)
+```dart
+YoutubePlayer(
+ controller: _controller,
+ aspectRatio: 16 / 9,
+);
-*Note:* Although the minimum to be set is 17, the player won't play on device with API < 20 (19 if Hybrid Composition is enabled).
-For API < 20 devices, you might want to forward the video to be played using YouTube app instead, using packages like `url_launcher` or `android_intent`.
+```
-#### Using the player
+#### Using `YoutubePlayerScaffold`
+This widget can be used when fullscreen support for the player is required.
```dart
-YoutubePlayerController? _controller;
- void initState() {
- super.initState();
- _controller = YoutubePlayerController(
- initialVideoId: videoId,
-
- flags: YoutubePlayerFlags(autoPlay: true, mute: false, startAt: 0),
+YoutubePlayerScaffold(
+ controller: _controller,
+ aspectRatio: 16 / 9,
+ builder: (context, player) {
+ return Column(
+ children: [
+ player,
+ Text('Youtube Player'),
+ ],
);
-}
-
-
-//--------------- in Widget build(BuildContext context) -------------------
-YoutubePlayer(
- controller: _controller!,
- showVideoProgressIndicator: true,
- progressIndicatorColor: Colors.amber,
- progressColors: ProgressBarColors(
- playedColor: Colors.amber,
- handleColor: Colors.amberAccent,
- ),
- onReady: () {
- _controller!.addListener(listener);
},
-),
-
+)
```
+See the [example app](example/lib/main.dart) for detailed usage.
+
+## Inherit the controller to descendant widgets
+The package provides `YoutubePlayerControllerProvider`.
-###For FullScreen Support
```dart
-YoutubePlayerBuilder(
- player: YoutubePlayer(
- showVideoProgressIndicator: true,
- controller: _controller!,
- ),
- builder: (context, player) {
- return Column(
- children: [
- // some widgets
- player,
- ],
- );
+YoutubePlayerControllerProvider(
+ controller: _controller,
+ child: Builder(
+ builder: (context){
+ // Access the controller as:
+ // `YoutubePlayerControllerProvider.of(context)`
+ // or `controller.ytController`.
},
-),
+ ),
+);
```
+
## Want to customize the player?
-The package provides `YoutubePlayerBuilder`, which can be used to create any custom controls.
+The package provides `YoutubeValueBuilder`, which can be used to create any custom controls.
For example, let's create a custom play pause button.
```dart
-YoutubePlayerBuilder(
+YoutubeValueBuilder(
controller: _controller, // This can be omitted, if using `YoutubePlayerControllerProvider`
builder: (context, value) {
return IconButton(
icon: Icon(
- value.playerState == PlayerState.playing
- ? Icons.pause
- : Icons.play_arrow,
+ value.playerState == PlayerState.playing
+ ? Icons.pause
+ : Icons.play_arrow,
),
- onPressed: () {
- value.playerState == PlayerState.playing
- ? context.ytController.pause()
- : context.ytController.play();
- },
+ onPressed: value.isReady
+ ? () {
+ value.playerState == PlayerState.playing
+ ? context.ytController.pause()
+ : context.ytController.play();
+ }
+ : null,
);
},
);
```
-## Available Methods
-Methods available for `YoutubePlayerController`.
-
-Method | Description
------------- | ---------------
-play() | Plays the currently cued/loaded video.
-pause() | Pauses the currently playing video.
-stop() | Stops and cancels loading of the current video.
-nextVideo() | Loads and plays the next video in the playlist.
-previousVideo() | Loads and plays the previous video in the playlist.
-playVideoAt(index) | Loads and plays the specified video in the playlist.
-load(videoId, {startAt, endAt}) | Loads and plays the specified video.
-cue(videoId, {startAt, endAt}) | Loads the specified video's thumbnail and prepares the player to play the video.
-loadPlaylist(list, {listType, startAt, index}) | Loads the specified list and plays it.
-cuePlaylist(list, {listType, startAt, index}) | Queues the specified list of videos.
-mute() | Mutes the player.
-unMute() | Unmutes the player.
-setVolume(volume) | Sets the volume of player.
-seekTo(position, {allowSeekAhead}) | Seeks to a specified time in the video.
-setSize(size) | Sets the size in pixels of the player.
-setPlaybackRate(rate) | Sets the playback speed for the video.
-setLoop(loop) | Enables or disables looping.
-setShuffle(shuffle) | Enables or disables shuffling playlist.
-reset() | Resets the controller.
-convertUrlToId(url, {trimWhiteSpaces}) | Converts fully qualified YouTube Url to video id.
-getThumbnail(videoId, {quality, webp}) | Grabs YouTube video's thumbnail for provided video id.
-onEnterFullScreen() | Called when player enters fullscreen.
-onExitFullScreen() | Called when player exits fullscreen.
-invokeJavascript(function) | Invoke custom javascript function.
-hideTopMenu() | Hides the title and share icons at the top of player (_May violate YouTube's TOS. Use at your own risk._)
-hidePauseOverlay() | Hides the related videos overlay while player is paused (_May violate YouTube's TOS. Use at your own risk._)
-
-## Youtube Player Parameters
-All the available parameters.
-
-Parameter | Description
------------- | ---------------
-autoPlay | Specifies whether the initial video will automatically start to play when the player loads. **Default = true**
-mute | Mutes the player. **Default = false**
-captionLanguage | Caption language. **Default = 'en'**
-enableCaption | Enables caption by default. **Default = true**
-color | Specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. **Default = red**
-showControls | Indicates whether the video player controls are displayed. **Default = true**
-enableKeyboard | Enables or disables the player to respond to keyboard controls. **Default = false**
-enableJavaScript | Enables or disables the player to be controlled via IFrame or JavaScript Player API calls. **Default = true**
-endAt | Ends the playback in specified time.
-showFullscreenButton | Shows or hides the fullscreen button from displaying in the player. **Default = false**
-interfaceLanguage | Sets the player's interface language.
-showVideoAnnotations | Enables or disables video annotations to be shown by default. **Default = true**
-loop | Enables or disables the player to play the initial video again and again. **Default = true**
-playlist | Specifies a list of video IDs to be played after initialVideoId.
-playsInline | Controls whether videos play inline or fullscreen in an HTML5 player on iOS. **Default = true**
-strictRelatedVideos | Enabling ensure that related videos will come from the same channel as the video that was just played. **Default = false**
-startAt | Starts the video at specified time.
-desktopMode | The controls will be alike Youtube Desktop's controls.
-useHybridComposition | Enable [Hybrid Composition](https://github.com/flutter/flutter/wiki/Hybrid-Composition)
-
-
-## Limitation
-For Android: Since the plugin is based on platform views. This plugin requires Android API level 19 or greater.
-
## License
```
-Copyright 2021 Sarbagya Dhaubanjar. All rights reserved.
+Copyright 2022 Sarbagya Dhaubanjar. All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
diff --git a/packages/youtube_player_iframe/README.md b/packages/youtube_player_iframe/README.md
index 5c4e2661..a626abcd 100644
--- a/packages/youtube_player_iframe/README.md
+++ b/packages/youtube_player_iframe/README.md
@@ -1,11 +1,31 @@
+Youtube Player iFrame
+
-Youtube Player iFrame
+
+
+
+
+
+
+---
+
+Flutter plugin for seamlessly playing or streaming YouTube videos inline using the official [**iFrame Player API**](https://developers.google.com/youtube/iframe_api_reference). This package offers extensive customization by exposing nearly the full range of the iFrame Player API's features, ensuring complete flexibility and control.
+
+
+
+
+## Features 🌟
+
+
+Youtube Player iFrame
+
+
@@ -19,20 +39,163 @@
Flutter plugin for seamlessly playing or streaming YouTube videos inline using the official [**iFrame Player API**](https://developers.google.com/youtube/iframe_api_reference). This package offers extensive customization by exposing nearly the full range of the iFrame Player API's features, ensuring complete flexibility and control.
-
+
+
+
+## Features 🌟
+- ▶️ **Inline Playback**: Provides seamless inline video playback within your app.
+- 🎬 **Caption Support**: Fully supports captions for enhanced accessibility.
+- 🔑 **No API Key Required**: Easily integrates without the need for an API key.
+- 🎛️ **Custom Controls**: Offers extensive support for custom video controls.
+- 📊 **Metadata Retrieval**: Capable of retrieving detailed video metadata.
+- 📡 **Live Stream Support**: Compatible with live streaming videos.
+- ⏩ **Adjustable Playback Rate**: Allows users to change the playback speed.
+- 🛠️ **Custom Control Builders**: Exposes builders for creating bespoke video controls.
+- 🎵 **Playlist Support**: Supports both custom playlists and YouTube's native playlist feature.
+- 📱 **Fullscreen Gestures**: Enables fullscreen gestures, such as swiping up or down to enter or exit fullscreen mode.
+
+
+This package uses [webview_flutter](https://pub.dev/packages/webview_flutter) under-the-hood.
+
+## Setup
+See [**webview_flutter**'s doc](https://pub.dev/packages/webview_flutter) for the requirements.
+
+### Using the player
+Start by creating a controller.
+
+```dart
+final _controller = YoutubePlayerController(
+ params: YoutubePlayerParams(
+ mute: false,
+ showControls: true,
+ showFullscreenButton: true,
+ ),
+);
+
+_controller.loadVideoById(...); // Auto Play
+_controller.cueVideoById(...); // Manual Play
+_controller.loadPlaylist(...); // Auto Play with playlist
+_controller.cuePlaylist(...); // Manual Play with playlist
+
+// If the requirement is just to play a single video.
+final _controller = YoutubePlayerController.fromVideoId(
+ videoId: '',
+ autoPlay: false,
+ params: const YoutubePlayerParams(showFullscreenButton: true),
+);
+```
+
+Then the player can be used in two ways:
+
+#### Using `YoutubePlayer`
+This widget can be used when fullscreen support is not required.
+
+```dart
+YoutubePlayer(
+ controller: _controller,
+ aspectRatio: 16 / 9,
+);
+
+```
+
+#### Using `YoutubePlayerScaffold`
+This widget can be used when fullscreen support for the player is required.
+
+```dart
+YoutubePlayerScaffold(
+ controller: _controller,
+ aspectRatio: 16 / 9,
+ builder: (context, player) {
+ return Column(
+ children: [
+ player,
+ Text('Youtube Player'),
+ ],
+ );
+ },
+)
+```
+
+See the [example app](example/lib/main.dart) for detailed usage.
+
+## Inherit the controller to descendant widgets
+The package provides `YoutubePlayerControllerProvider`.
+
+```dart
+YoutubePlayerControllerProvider(
+ controller: _controller,
+ child: Builder(
+ builder: (context){
+ // Access the controller as:
+ // `YoutubePlayerControllerProvider.of(context)`
+ // or `controller.ytController`.
+ },
+ ),
+);
+```
+
+## Want to customize the player?
+The package provides `YoutubeValueBuilder`, which can be used to create any custom controls.
+
+For example, let's create a custom play pause button.
+```dart
+YoutubeValueBuilder(
+ controller: _controller, // This can be omitted, if using `YoutubePlayerControllerProvider`
+ builder: (context, value) {
+ return IconButton(
+ icon: Icon(
+ value.playerState == PlayerState.playing
+ ? Icons.pause
+ : Icons.play_arrow,
+ ),
+ onPressed: value.isReady
+ ? () {
+ value.playerState == PlayerState.playing
+ ? context.ytController.pause()
+ : context.ytController.play();
+ }
+ : null,
+ );
+ },
+);
+```
+
+## License
+```
+Copyright 2022 Sarbagya Dhaubanjar. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the following
+ disclaimer in the documentation and/or other materials provided
+ with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+- ▶️ **Inline Playback**: Provides seamless inline video playback within your app.
+- 🎬 **Caption Support**: Fully supports captions for enhanced accessibility.
+- 🔑 **No API Key Required**: Easily integrates without the need for an API key.
+- 🎛️ **Custom Controls**: Offers extensive support for custom video controls.
+- 📊 **Metadata Retrieval**: Capable of retrieving detailed video metadata.
+- 📡 **Live Stream Support**: Compatible with live streaming videos.
+- ⏩ **Adjustable Playback Rate**: Allows users to change the playback speed.
+- 🛠️ **Custom Control Builders**: Exposes builders for creating bespoke video controls.
+- 🎵 **Playlist Support**: Supports both custom playlists and YouTube's native playlist feature.
+- 📱 **Fullscreen Gestures**: Enables fullscreen gestures, such as swiping up or down to enter or exit fullscreen mode.
-## Salient Features
-* Inline Playback
-* Supports captions
-* No need for API Key
-* Supports custom controls
-* Retrieves video meta data
-* Supports Live Stream videos
-* Supports changing playback rate
-* Exposes builders for building custom controls
-* Playlist Support (Both custom and Youtube's playlist)
-* Supports Fullscreen Gestures(Swipe up/down to enter/exit fullscreen mode)
This package uses [webview_flutter](https://pub.dev/packages/webview_flutter) under-the-hood.