Flutter Video Player Example
In this flutter tutorial, We are going to learn how to integrate video player in flutter applications using video_player package. This package uses ExoPlayer in android applications and AVPlayer in iOS applications.
You can play video from stored file in local or from internet using this package. In this example We are playing video from sample url with basic play and pause controls.
Add following dependency in your pubspec.yaml file
Android platform changes for Flutter Video Player
To play video from url, We need to give internet permission in android manifest file.
If you are using http url instead of https and your device is running on api level 28 then you are getting “Cleartext HTTP traffic not permitted” error. To prevent this error, you need to add following line in application tag in AndroidManifest.xml file.
iOS platform changes for Flutter Video Player
Add following lines in /ios/Runner/Info.plist file. This plugin does not work in simulators. You can check only in real iOS devices.
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Create and Initialize VideoPlayerController
First we need to initialize video player controller to prepare for video playback. We can also enable continuous playback of video using setLooping method of video player controller.
Future<void> videoPlayerFuture;
@override
void initState() {
super.initState();
videoPlayerController = VideoPlayerController.network(
‘http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4’);
videoPlayerFuture = videoPlayerController.initialize();
videoPlayerController.setLooping(true);
}
@override
void dispose() {
videoPlayerController.dispose();
super.dispose();
}
Add Video Player Widget
Flutter provides VideoPlayer widget which is used to display video player in flutter applications. By default video player size is not ideal for all devices because of their fixed aspect ratio. To prevent this, we need to wrap VideoPlayer widget inside AspectRatio widget. We display indicator until video player controller initializes.
future: videoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: videoPlayerController.value.aspectRatio,
child: VideoPlayer(videoPlayerController),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
Play and Pause the Video
Video is played using play() method of video player controller. By default video is not played. To pause video, We can use pause() method of video player controller.
onPressed: () {
setState(() {
videoPlayerController.value.isPlaying
? videoPlayerController.pause()
: videoPlayerController.play();
});
},
child: Icon(
videoPlayerController.value.isPlaying
? Icons.pause
: Icons.play_arrow,
),
)
Final Code
import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; class MyVideoPlayerPage extends StatefulWidget { @override _MyVideoPlayerPageState createState() => _MyVideoPlayerPageState(); } class _MyVideoPlayerPageState extends State<MyVideoPlayerPage> { VideoPlayerController videoPlayerController; Future<void> videoPlayerFuture; @override void initState() { super.initState(); videoPlayerController = VideoPlayerController.network( 'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'); videoPlayerFuture = videoPlayerController.initialize(); videoPlayerController.setLooping(true); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Flutter Video Player Sample')), body: FutureBuilder( future: videoPlayerFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { return AspectRatio( aspectRatio: videoPlayerController.value.aspectRatio, child: VideoPlayer(videoPlayerController), ); } else { return Center(child: CircularProgressIndicator()); } }, ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { videoPlayerController.value.isPlaying ? videoPlayerController.pause() : videoPlayerController.play(); }); }, child: Icon( videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow, ), )); } @override void dispose() { videoPlayerController.dispose(); super.dispose(); } }


Pingback: Chewie Flutter Video Player Example - CodingWithDhrumil