Play YouTube videos on mobile devices with webview_flutter and IFrame Player API.
This package is largely inspired by the popular youtube_player_flutter, but with the official Flutter support of WebView and simpler state management via provider.
youtube_player_flutter
and its dependency flutter_inappwebview
have been in hiatus for a while. It's more reassuring to use the official webview_flutter. Also, the performance issues of youtube_player_flutter
are not resolved and make it problematic to use in some situations.
This package aims to solve the problems by:
- Depends on the official webview_flutter to provide a default IFrame player.
WebviewtubePlayer
is a WebView and does not bundle with any other widgets.
- Proper state management with provider.
WebviewtubeVideoPlayer
combines the default player with customized widgets. The state management is carefully handled, which makes the player more maintainable, testable, and easily customizable.
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')
To configure the player, pass a WebviewtubeOptions
to the player.
final options = const WebviewtubeOptions(
forceHd: true,
enableCaption: false,
);
/// `showControls` will always be false for [WebviewtubeVideoPlayer]
WebviewtubeVideoPlayer(videoId: '4AoFA19gbLo', options: options);
To listen to the player value (e.g., video metadata) and control the player (e.g., pause or load other videos), pass a WebviewtubeController
and remember to dispose the controller when it's not in need.
// ...
// 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,
);
}
Using a proper state management is highly recommended. This package uses provider, but you can fork and use your choice of tools.
Check out the source code of WebviewtubeVideoPlayer
and make your own player!
Refers to example/lib/customized_player.dart
for a use case with stateful widgets.
This package is built upon/inspired by the following packages, for which credit goes out to the respective authors.