webviewtube

Description:

webviewtube

Play YouTube videos on mobile devices with WebView #
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.
Demo #
IFrame player #

Decorated player #

Features #

Customizable player

WebviewtubePlayer provides a WebView that integrates with the YouTube IFrame Player API, allowing for extensive customization without additional widgets.


Decorated player with basic controls.

WebviewtubeVideoPlayer combines the default player with custom widgets, offering a more integrated player with basic controls.



Supported Platforms #
The same as webview_flutter. On Android, hybrid composition mode is used.

Android: SDK 19+
iOS: 11.0+

Setup #
Android #
Set the correct minSdkVersion in android/app/build.gradle
android {
defaultConfig {
minSdkVersion 19
}
}
copied to clipboard
iOS #
No configuration needed.
Usage #
Check out example/lib/ for more details.
Default IFrame player #
WebviewtubePlayer(videoId: '4AoFA19gbLo')
copied to clipboard
Widgets decorated player #
WebviewtubeVideoPlayer(videoId: '4AoFA19gbLo')
copied to clipboard
Configure the player #
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);
copied to clipboard
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,
);
}
copied to clipboard
Customize the player #
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.
Using StatefulWidget and setState #
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.
Acknowledgments #
This package is built upon/inspired by the following packages, for which credit goes out to the respective authors.

youtube_player_flutter by Sarbagya Dhaubanjar
youtube_player_webview by Ravindra barthwal