YouTube Video Player Flutter
In this article we are going to play YouTube video in our application. Along with it, we also pause it when the video section is not visible.
Sometimes or often we need to integrate or play videos in our mobile application. We could get many libraries or packages that provide us ability to achieve our requirement.
The final output looks as follows:
Before diving into the coding section, first lets discuss on some topics we are going to use in our application.
VisibilityDetector
Visibility Detector is a widget that wraps the widget and gets triggered when the visibility of the widgets gets changed. For more details visit this link.
Now lets dive in
In the pubsec.yaml file ,First lets add our dependencies for the project.
dependencies:youtube_player_flutter: ^8.1.0
visibility_detector: ^0.3.3
After adding dependencies we create the video_player.dart file inside the lib folder.
Inside which first we separate the initState videoId from the url.
videoId=YoutubePlayer.convertUrlToId(widget.youtubeUrl)!;And then we initialize the YoutubePlayerController.
_controller = YoutubePlayerController(initialVideoId: videoId,
flags: const YoutubePlayerFlags(
mute: false,
autoPlay: false,
disableDragSeek: false,
loop: false,
isLive: false,
forceHD: false,
enableCaption: true,
),)
..addListener(listener);
Also we need to create the listener, that is responsible for if the player is ready , widget is mounted.
void listener() {
if (_isPlayerReady && mounted && !_controller.value.isFullScreen) {setState(() {});
}}The videoplayer needs to get paused when we navigate to the nextpage. So we pause our controller on the page the disposed and deactivated.
@override
void deactivate() {
// Pauses video while navigating to next page.
_controller.pause();
super.deactivate();
}And when disposed too.
@overridevoid dispose() {
_controller.dispose();
_idController.dispose();
_seekToController.dispose();
super.dispose();
}
We then build our layout for videoplayer with VisibilityDetector. Here we pause our controller when the VideoPlayer widget is not longer visible.
VisibilityDetector(
key: const Key("unique key"),
onVisibilityChanged: (info) {
if (info.visibleFraction == 0) {
_controller.pause();
} else {
_controller.value.isPlaying
? _controller.play()
: _controller.pause();
}
},
child: YoutubePlayerBuilder()
),Finally our video_player.dart looks as follows:
We then create homepage.dart. Here we call our YouTubeVideo widget and pass the url. Here we create the ListView so as to demonstrate the pause effect if the Videoplayer is no longer visible.
homepage.dart
And at last our main.dart file
main.dart
Let’s get connected
We can be friends. Find on Facebook, Linkedin, Github, Youtube, BuyMeACoffee, and Instagram.
Visit: Flutter Junction
Contribute: BuyMeACoffee
Conclusion
I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.
If you learned something new or want to suggest something then please let me know in the comment.
If you loved the article click on 👏 icon which provides motivation on delivering you all with the new things.
Also follow to get updated on exciting articles and projects.
Learning by sharing gives great impact in learning process and making the community bigger and bigger.
Sharing is a magnet that attracts other enthusiast towards you.
Hence, lets take a small step on making our learning community bigger.
Share this article with your friends or tweet about this article if you loved it.
