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.

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.

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.

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.

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();
  }

}