Flutter media player with YouTube support

Playing videos is a common task in app development, and Flutter apps are no exception. To play videos, the Flutter team provides the video_player plugin. You can use the video_player plugin to play videos stored on the file system, as an asset, or from the internet.

On iOS, the video_player plugin makes use of AVPlayer to handle playback. On Android, it uses ExoPlayer.

This recipe demonstrates how to use the video_player package to stream a video from the internet with basic play and pause controls using the following steps:

1. Add the video_player dependency.
2. Add permissions to your app.
3. Create and initialize a VideoPlayerController.
4. Display the video player.
5. Play and pause the video.

1. Add the video_player dependency

2. Add permissions to your app

Android:-

Add the following permission to the AndroidManifest.xml file just after the <application> definition. The AndroidManifest.xml file is found at <project root>/android/app/src/main/AndroidManifest.xml.

“<manifest xmlns:android=”http://schemas.android.com/apk/res/android">

<application …>

</application>

<uses-permission android:name=”android.permission.INTERNET”/>

</manifest>”

iOS:-

For iOS, add the following to the Info.plist file found at <project root>/ios/Runner/Info.plist.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

3. Create and initialize a VideoPlayerController

Now that you have the video_player plugin installed with the correct permissions, create a VideoPlayerController. The VideoPlayerController class allows you to connect to different types of videos and control playback.

Before you can play videos, you must also initialize the controller. This establishes the connection to the video and prepare the controller for playback.

To create and initialize the VideoPlayerController do the following:

1. Create a StatefulWidget with a companion State class
2. Add a variable to the State class to store the VideoPlayerController
3. Add a variable to the State class to store the Future returned from VideoPlayerController.initialize
4. Create and initialize the controller in the initState method
5. Dispose of the controller in the dispose method

4. Display the video player

Now, display the video. The video_player plugin provides the VideoPlayer widget to display the video initialized by the VideoPlayerController. By default, the VideoPlayer widget takes up as much space as possible. This often isn’t ideal for videos because they are meant to be displayed in a specific aspect ratio, such as 16x9 or 4x3.

Therefore, wrap the VideoPlayer widget in an AspectRatio widget to ensure that the video has the correct proportions.

Furthermore, you must display the VideoPlayer widget after the _initializeVideoPlayerFuture() completes. Use FutureBuilder to display a loading spinner until the controller finishes initializing. Note: initializing the controller does not begin playback.

5. Play and pause the video

By default, the video starts in a paused state. To begin playback, call the play() method provided by the VideoPlayerController. To pause playback, call the pause() method.

For this, add a FloatingActionButton to your app that displays a play or pause icon depending on the situation. When the user taps the button, play the video if it’s currently paused, or pause the video if it’s playing.

6.Moreover i have the app to play youtube videos as well

I used “youtube_player_flutter 7.0.0+7” package to integrate YouTube to my video player app.

Salient Features

• Inline Playback
• Supports captions
• No need for API Key
• Supports custom controls
• Retrieves video meta data
• Supports Live Stream videos
• Supports changing playback rate
• Support for both Android and iOS
• Adapts to quality as per the bandwidth
• Fast Forward and Rewind on horizontal drag
• Fit Videos to wide screens with pinch gestures

Final image of the player

THANK YOU!!!!..