Playing Videos in Flutter

How to Play and Pause a Video in Flutter!!

As a mobile developer, playing videos is a common task in app development, and Flutter apps are no exception. We can use the video_player plugin to play videos stored on the file system, as an asset, or from the internet. This article explains the steps to be followed to play and pause videos in flutter applications.

1. Adding the video_player dependency

Add the video_player plugin in the dependencies in pubspec.yaml file. Then click on the pub get on the top.

Note: The video_player plugin doesn’t work on the iOS simulator. So we need a real iOS device to test videos.

2. Creating and initializing the VideoPlayerController

So that we have now added the video_player plugin, we can start typing the actual code to play and pause the video inside the main.dart file.

1. Import the material package and video_player packages.

2. Inside the main function, name the class as VideoDemo(“any name you want”) in the runApp().

3. Next, create the StatefulWidget with the class name of VideoDemo as same as the class name inside runApp() function.

Note: Type stful and click enter to get the StatefulWidget and enter the class name(“VideoDemo in our case”) and that’s it.

4. Now create two variables under _VideoDemoState class, one is in the type of VideoPlayerController and another one is in Future type.

The _controller variable will be used for controlling the functionalities of the video player. The _initializeVideoPlayerFuture variable will be used to store and return the value from VideoPlayerController.initialize.

5. Then create the initState() and dispose().

* In the initState(), set the _controller value as the Video URL inside the VideoPlayerController function.

.network denotes that the video is from the internet.

Note: For playing asset files.
_controller = VideoPlayerController.asset(“videos/sample_video.mp4”);

* Then we will initialize the _controller and store it in the _initializeVideoPlayerFuture variable.

* Pass the setLooping value as true, so that the video will be running in a loop without stopping.

* The volume ranges from 0.1 to 1.0, we can set it inside the setVolume function.

* In the dispose function, set _controller.dispose to release the data allocated to it when the state object is removed.

3. UI and video setup

Now for the UI part let’s just create an appbar and then we can just set the video player and that’s it for the UI.

1. Create an appBar and give it some title.
2. Inside FutureBuilder set the future property value as _initializeVideoPlayFuture.
3. The builder property gets two arguments, we will pass context and snapshot.
4. In the If condition, if the snapshot.connectionState is equal to ConnectionState.done, the video should play. To play the video, we will pass the _controller as an input to the VideoPlayer widget.
5. Else the CircularProgressIndicator will be displayed.

Note: We are using FutureBuilder for automatically displaying a circular progress indicator while the video is loading.

4. Play and Pause Functionality

Now we have to set the play and pause control to our video player.

1. Create a floating action button with a child of an icon, in the Icon widget we are setting a condition if the video is playing Pause icon should display and if the video is not playing, play_arrow icon should be displayed.
2. On the onPressed property, set the setState function. Check if the video is playing or not.
   * If the video is playing, set _controller.pause() to pause the video.
   * Else, set _controller.play() to play the video.

That’s it, we can play and pause videos now in flutter.

You can download the entire code here.

The end.