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.**