Loading videos into flutter application youtube_player_flutter is one of the most popular packages that is been used to play youtube video into flutter app by development. Developers can easily play YouTube videos in their Flutter applications using the widget provided by this flutter package. The youtube_player_flutter package wraps the official YouTube Player API for Android and iOS, making it easy to integrate YouTube videos into your Flutter application.
Building useful user interfaces for mobile apps is made simple by Flutter’s selection of pre-built widgets and tools. Additionally, It has a feature called hot-reload that enables developers to view changes they make to their app immediately without having to restart it.
Introduction youtube_player_flutter
As I said to integrate youtube videos we will make use of flutter package, It is an easy-to-use straightforward package that provides a variety of video players with customizability options. The application is based on the official YouTube iFrame flutter embedded Player API. which provides users with access to a variety of features for controlling and playing back YouTube videos.
Integration into Flutter Project
Create a new Flutter Project or open existing on where you want to integrate youtube video, Open the Project into your favorite IDE (Android Studio, VSCode, InteliJ…).
Step 1: Include the package youtube_player_flutter
Open pubspec.yaml file and under dependencies section add the package.
youtube_player_flutter:^any
Step 2: You can then run the following command to install the desired package:
flutter pub get
Step 3: Import the package
Now, to use the youtube video widget, you need to import the dart class as shown below.
import 'package:youtube_player_iframe/youtube_player_iframe.dart';
Requirements to make the package work
Android: Set the minSdkVersion property to 17 in the build.gradle file for your app.
iOS: Swift in iOS Xcode version greater than 11.
defaultConfig {
applicationId "package name"
minSdkVersion 17
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Now, let’s get started on how to use youtube_player_flutter package
Now that our project has been set up and the youtube_player_flutter package has been added in .yaml file.
play the youTube video
1) Create a YoutubePlayerController object
2) Create a YoutubePlayer widget
Creating a YoutubePlayerController Object
The YoutubePlayerController class controls how YouTube videos playback works in our app. When creating an instance of this class we must pass YouTube video ID that we want to play.
YoutubePlayerController _controller = YoutubePlayerController(
flags: YoutubePlayerFlags(
autoPlay: true,
mute: false,
),
);
The initialVideoId parameter of the YoutubePlayerController received the YouTube video ID that we want to play. In the example that was provided that was made. Additionally you have set autoPlay and mute options to true or false bool value. This means that when the player is ready the sound will turn back on and the video will either start playing or not.
How to Make a YoutubePlayer Widget
The play YouTube video in our flutter application we can create a YoutubePlayerController object and a YoutubePlayer widget . The stateful or stateless YoutubePlayer widget renders the YouTube video player in application using YoutubePlayerController object.
example,
YoutubePlayer(
controller: _controller,
showVideoProgressIndicator: true,
progressIndicatorColor: Colors.blueAccent,
topActions: <Widget>[
const SizedBox(width: 8.0),
Expanded(
child: Text(
_controller.metadata.title,
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
],
onReady: () {
_controller.addListener(listener);
},
onEnded: (data) {},
)
Use the YoutubePlayer widget to display the video:
Note: In addition to adding the following to your project directory AndroidManifest.xml file. you may need enable playing YouTube videos in flutter app .
<uses-permission android:name="android.permission.INTERNET"/> <application android:usesCleartextTraffic="true" ...> ... </application>
Error handling
The development of any mobile application including those that make use of the youtube_player_flutter package must include handling errors and exceptions. Although the package offers a simple method for incorporating YouTube videos into your Flutter app errors and exceptions can happen during video playback, which can negatively affect the user experience.
The youtube_player_flutter package offers a number of callbacks that can be used to detect errors , exceptions , handle them. OnPlayerError, OnPlayerStateChange, OnReady, OnEnded and OnPlaybackQualityChange are few of the callbacks.
class VideoPlayerScreen extends StatefulWidget {
final String ?videoId;
const VideoPlayerScreen({Key? key, @required this.videoId}) : super(key: key);
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
YoutubePlayerController? _controller;
@override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: widget.videoId ?? "",
flags: const YoutubePlayerFlags(
autoPlay: true,
mute: false,
),
)
..addListener(listener);
}
void listener() {
if (_controller?.value.errorCode != null) {
print(_controller?.value.errorCode);
}
}
@override
void dispose() {
_controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('YouTube Video Player'),
),
body: Center(
child: YoutubePlayer(
controller: _controller!,
showVideoProgressIndicator: true,
onReady: () {
print('Player is ready.');
},
onEnded: (data) {
_controller!
..load(widget.videoId ?? "")
..play();
},
),
),
);
}
}
Flutter YouTubeVideoPlayer if we want to play the specified video by using the videoId parameter of the VideoPlayerScreen widget. here we have defined in this example youTubeVideo player ID. In order to control video playback speed ,rotation , audio..
We have created the _controller instance and added a listener to handle errors and exceptions in the initState . The listener will print error codein console if one occurs during playback.
We have defined a YoutubePlayer widget in the build method that plays the specified YouTube video using the _controller instance. Additionally, callbacks for the onReady and onEnded events have been defined to address a variety of playback-related conditions.
Click here to access this YouTube player sample app code. click here…..
Conclusion
Programmers can use the youtube_player_flutter builtin package’s widget to embed YouTube videos in Flutter applications . The widget has a variety of configuration options, including managing audio, displaying video progressValue, and autoPlaying videos.use mainly. This package controls full-screen video playback and makes it possible for users to exit full-screen mode with just one tap.
One of the main benefits of use youtube_player_flutter package is that it provides an easy way to integratation video content into your Flutter app. This package simply the process of including YouTube videos in your application and offers an extensive number of customise option using improve the look of our videos in flutter app .
Thanks for reading this article….. ❤️
Have a nice day…..
