Flutter Media Playback — Audio/Video

Hello All Flutter Devs

In your daily development, you might face the issue with the media playback how to play a remote video or audio any kind of playback issues,

Here we are going to see how to play a Video and Audio file from Internet, Assets and Local.

In this demo, I am going to use three plugins they are

So using this above three plugins we are going to build a demo project for MediaPlayBack

Let’s Get Started,

Dependencies

Add the following dependencies in pubspec.yaml

First, we see how to play videos then we go for Audios

Video

Here how to go ahead with video

Warning: The video player is not functional on iOS simulators. An iOS device must be used during development/testing.

Permission

Add the following entry to your Info.plist file, located in /ios/Runner/Info.plist:

Add below permission in iOS for file_picker

Ensure the following permission is present in your Android Manifest file, located in /android/app/src/main/AndroidManifest.xml:

Supported Formats

On iOS, the backing player is AVPlayer. The supported formats vary depending on the version of iOS, AVURLAsset class has audiovisualTypes that you can query for supported av formats. On Android, the backing player is ExoPlayer, please refer here for a list of supported formats.

Video From Internet

Declare a Variable in your code which a VideoPlayerController, this one we are going to use it with VideoPlayer

Now to Initialize the Controller call this in initState

Now to visualize the Player we need to add the UI code.

In the above code what we did is, Once the player is initialized we show the VideoPlayer but we are using AspectRatio that one is used to auto-resize with the video height and width

By default VideoPlayer doesn’t provide the controls for use we need to design and handle them by ourselves

here in the above code _videoPlayerController.play() will start the video playback _videoPlayerController.pause() will pause the player

Here is the Complete Code for the Video Playback from Internet

Video From Assets

The only major changes between playing a video from the internet and Assets is the VideoPlayerController part

For playing video from assets instead of VideoPlayerController.network we use VideoPlayerController.asset and remaining all works as above

Video From File

The only major changes between playing a video from the internet and Local is the VideoPlayerController part

For playing video from Local instead of VideoPlayerController.network we use VideoPlayerController.file and remaining all works as above

So Inorder to get the file we will use file_picker plugin

Pick a Video File

Above code works to pick a file from the Local Storage and passed the file to the New Page where the video will be played

File videoFile = await FilePicker.getFile(type: FileType.VIDEO);

this code specified which file type should i get For Video we used FileType.VIDEO and For Audio we will user FileType.AUDIO

final but important dispose

Audio

Let's get started with Audio

AudioPlayer for Remote Files

Initialize Audio Player

to start playing a remote file call

to pause or resume

Note: This plugin doesn’t provide any kind of UI for your player we need to build the UI by ourselfs

In order to listen to the player state, we need to listen for the onPlayerStateChanged

In order to listen the player duration updates we need to listen for the onPlayerStateChanged

To get the length of the song use audioPlayer.getDuration()

final but important dispose

Here is the complete AudioPlayer Code — Playing from Internet

AudioPlayer for Local Files

The major change from playing remote files and local files is only about how we start playing, at the time we call play we need to pass another parameter called isLoacal to play a local file

The first thing we need to pick a file and send it to the AudioPlayer Page where it gets played

Playing an audio file

final but important dispose

I will provide a GitHub link at the bottom

AudioPlayer for Assets

Playing an Audio File from assets is different from other modes

Initialize Audio Player

to start playing a remote file call

Remaining all are same as the other modes

final but important dispose

Here is the complete AudioPlayer Code — Playing from Assets

**Thanks for your time.**

Hope you like it, if yes **clap & share.**