Use IFrame Player API and WebView to play YouTube videos on mobile devices.
This package leverages webview_flutter to embed a YouTube video player through the IFrame Player API. For state management, it utilizes the provider package.
- Customizable player
WebviewtubePlayerprovides a WebView that integrates with the YouTube IFrame Player API, allowing for extensive customization without additional widgets.
- Decorated player with basic controls.
WebviewtubeVideoPlayercombines the default player with custom widgets, offering a more integrated player with basic controls.
The same as webview_flutter. On Android, hybrid composition mode is used.
- Android: SDK 19+
- iOS: 11.0+
Set the correct minSdkVersion in android/app/build.gradle
android {
defaultConfig {
minSdkVersion 19
}
}No configuration needed.
Check out example/lib/ for more details.
WebviewtubePlayer(videoId: '4AoFA19gbLo')WebviewtubeVideoPlayer(videoId: '4AoFA19gbLo')Pass a WebviewtubeOptions to configure the player.
final options = const WebviewtubeOptions(
forceHd: true,
enableCaption: false,
);
/// `showControls` will always be false for [WebviewtubeVideoPlayer]
WebviewtubeVideoPlayer(videoId: '4AoFA19gbLo', options: options);To interact with the player (e.g., retrieve video metadata, control playback) and manage its state (e.g., pause, load new videos), use a WebviewtubeController. Make sure to pass this controller to the player instance and remember to dispose of it when it's no longer needed to free up resources.
// ...
// inside a state of a stateful widget
final controller = WebviewtubeController();
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return WebviewtubeVideoPlayer(
videoId: '4AoFA19gbLo',
controller: controller,
);
}This package uses provider for state management, but you're free to fork and use your preferred tools. To create a customized player, explore the source code of WebviewtubeVideoPlayer and modify it according to your needs.
For an example of integrating the player with a StatefulWidget, refer to example/lib/customized_player.dart. This example demonstrates how to control the player and update the UI based on player events and state changes.
This package is built upon/inspired by the following packages, for which credit goes out to the respective authors.