How to Play Video in Flutter | Video Player Example

In this example, we are going to show you how to make a simple video player with play, pause, stop, seek to features. In this example, you will learn to play video from the network URL or Asset file. See the example below:

Read this also: How to Play Audio in Flutter | Full Audio Player Code Example

First, you need to add video_player package in your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.18

Add Internet Permission on your AndroidManifest.xml file at /android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

Now import the package in your script:

import 'package:video_player/video_player.dart';

Set the controller for Video Player:

late VideoPlayerController controller;

Apply the video from Network or Asset Folder:

controller = VideoPlayerController.network('https://www.fluttercampus.com/video.mp4');

OR, form Asset Folder:

controller = VideoPlayerController.asset('asset_path');

For more details: How to Play Video from Assets

Initialize the video player:

controller.initialize().then((value){
    setState(() {});
});

Set the Video Player Widget in your Widgets tree:

VideoPlayer(controller)

You can also set the Video Player Progress bar widget, where ever you want:

VideoProgressIndicator(
  controller,  //video player controller
  allowScrubbing: true,
  colors:VideoProgressColors( //video player progress bar
      backgroundColor: Colors.redAccent,
      playedColor: Colors.green,
      bufferedColor: Colors.purple,
  )
)

controller.play();

You can use play() method on the controller to play the video.

controller.pause();

You can use pause() method on the controller to pause the video.

controller.seekTo(Duration(seconds: 50));

You can use seekTo(Duration()) method to seek another duration of the video.

controller.seekTo(Duration(seconds: 0));

You can seek to duration zero of video to stop the video.

controller.value.duration.toString()

if(controller.value.isPlaying){
    //video is currently playing
}else{
    //video is currently paused
}

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  
  late VideoPlayerController controller;

  @override
  void initState() {
    loadVideoPlayer();
    super.initState();
  }

  loadVideoPlayer(){
     controller = VideoPlayerController.network('https://www.fluttercampus.com/video.mp4');
     controller.addListener(() {
        setState(() {});
     });
    controller.initialize().then((value){
        setState(() {});
    });

  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Video Player in Flutter"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            child: Column(
              children:[
                  AspectRatio( 
                    aspectRatio: controller.value.aspectRatio,
                     child: VideoPlayer(controller),
                  ),

                  Container( //duration of video
                     child: Text("Total Duration: " + controller.value.duration.toString()),
                  ),

                  Container(
                      child: VideoProgressIndicator(
                        controller, 
                        allowScrubbing: true,
                        colors:VideoProgressColors(
                            backgroundColor: Colors.redAccent,
                            playedColor: Colors.green,
                            bufferedColor: Colors.purple,
                        )
                      )
                  ),

                  Container(
                     child: Row(
                         children: [
                            IconButton(
                                onPressed: (){
                                  if(controller.value.isPlaying){
                                    controller.pause();
                                  }else{
                                    controller.play();
                                  }

                                  setState(() {
                                    
                                  });
                                }, 
                                icon:Icon(controller.value.isPlaying?Icons.pause:Icons.play_arrow)
                           ),

                           IconButton(
                                onPressed: (){
                                  controller.seekTo(Duration(seconds: 0));

                                  setState(() {
                                    
                                  });
                                }, 
                                icon:Icon(Icons.stop)
                           )
                         ],
                     ),
                  )
              ]
            )
          ),
       );
  }
}

In this example, we have added video from URL on the video player and added different kinds of video controllers like, seek to, play, pause, stop, progress bar.