How to Play Video from Assets/URL in Flutter

In this example, we are going to show you how to play video from the Assets folder and from the Network URL. Additionally, you will learn how to pause, stop, seek video in Flutter App. See the example below:

You can look at how to make a video player at How to Play Video in Flutter | Video Player Example

To play video from assets or URL, first, add video_player package in your project by adding the following lines on pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.18

How to Play Video from Assets Folder?

To play video from the assets folder, create a folder at your project root, and place your video in that folder. For example, we have created assets/videos/ folders at the root of our project.

Now, index this folder on pubspec.yaml file like below:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/videos/

Now, import the package in your script:

import 'package:video_player/video_player.dart';

Now, initialize your video player:

late VideoPlayerController controller;

controller = VideoPlayerController.asset('assets/videos/video.mp4');
controller.initialize().then((value){
  setState(() {});
});

You can also initialize video from URL like below:

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

If you want the progress bar of the video player, then use the following widget:

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

Now you can set Controller for your Video Player:

controller.play(); //play video
controller.pause(); //pause video
controller.seekTo(Duration(seconds: 50)); //seekto video
controller.seekTo(Duration(seconds: 0)); //stop video

You can also check if the video is playing or not:

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

Full Flutter/Dart Code Example:

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.asset('assets/videos/video.mp4');
     controller.addListener(() {
        setState(() {});
     });
    controller.initialize().then((value){
        setState(() {});
    });

  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Play Video from Assets/URL"),
              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)
                           )
                         ],
                     ),
                  )
              ]
            )
          ),
       );
  }
}

Output Screenshot:

In this way, you can play video from assets folder and Network URL in Flutter App.