Integrate Media Player into your flutter application

Integrate the media player which capable of playing audio/video content from the internet on your app without any hassle.

We have created the package which will support playing media files. Currently, media_player only support to the Android platform.

The plugin is using most of the code of Google official package video_player and has some extra features such as background playing, can have a playlist as a data source.

Some features of the plugin:

1. Ability to play Audio/Video URL
2. Persistent Notification
3. Background Playback
4. Playlist Support
5. Ability to provide the source at runtime (you will able to change the playing content without re-instantiate it)
6. Able to navigate through the playlist

This post is basically going to tell about how to use this plugin

Let’s get sneak peek of what we are going to create today.

screenshots of the final demo application.

Instructions for setting the media player is here https://pub.dartlang.org/packages/media_player

This Tutorial demonstrates how to use this package and how to give a source to a media player etc.

First, let’s create a skeleton of an application

If everything is smooth you will able to see the following screen

Let’s go ahead and Create ListView

Before creating a list view let’s prepare our data source list. Here I am creating a separate file called media_source.dart

Here we have created an array of dart maps which consists of two keys title, source

we will use the title key for ListTile title and source to be given to the media player when the user taps on the ListTile.

The package supports two data sources, they are as follows

1. MediaFile

MediaFile mediafile1 = MediaFile(
   title: "Apple Keynote",
   type: "video",  // audio/video
   source: "<url>",
   desc: "sample m3u8 hls file for streming",
);

2. Playlist

A playlist is nothing but a list of media files it can be created like this

PlayList playlist = Playlist[mediaFile1, mediaFile2, ...]; 
// mediafile1, mediafiil2 are instances of MediaFile

Now let’s create a listing page quickly.

here we are using global list defined at media_source.dart and on the onTap method, we are passing the data source to VideoPlayerScreen widget which we are going to create right now.

and at last, let’s create a video player screen page.

VideoPlayerScreen is the stateful widget which accepts either playlist or media file through constructor and creates the video player.

at initState() we instantiate player and call an initVideoPlayer method which is async. we need async await mechanism as initialize video player returns future.

We use the ValuNotifier to get media player current updated values. It contains information like the current playing source, current index (in case of the playlist it could go from 0 to playlist length and for single data source current index is always 0), current time, duration etc.

We need the Valuenotifier to listen for the source change. as well as what is being played current. it’s only needed if for playlist listview in our case.

after player initialization, we set the source using an appropriate method.

then to autoplay video we need to call player.play()

VideoPlayerView and VideoProgressIndicator are the basic widget provided by package and used by importing media_player/ui.dart.

Let’s add our MiediaListPage widget into the main.dart

Right now you are not able to play the content background and not able to see the notification also because at the time of instantiation we have set both properties to the false you can play around them

Thank you, guys. It’s my first blog post and I really enjoyed writing this article.

Please feel free to share your thoughts, suggestions, and feedback about the article, improvements, and my writing style.

Here is the GitHub link of the demo.

Our Website: www.flutter-media-player.cf