Playing videos is a common task in app development, and Flutter apps are noexception. In order to play videos, the Flutter team provides thevideo_player plugin. You canuse the video_player plugin to play videos stored on the file system, as anasset, or from the internet.

On iOS, the video_player plugin makes use ofAVPlayer tohandle playback. On Android, it usesExoPlayer.

This recipe demonstrates how to use the video_player package to stream avideo from the internet with basic play and pause controls.

Directions

• Add the video_player dependency
• Add permissions to your app
• Create and initialize a VideoPlayerController
• Display the video player
• Play and pause the video

1. Add the video_player dependency

This recipe depends on one Flutter plugin: video_player. First, add thisdependency to your pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  video_player:

2. Add permissions to your app

Next, you need to ensure your app has the correct permissions to stream videosfrom the internet. To do so, update your android and ios configurations.

Android

Add the following permission to the AndroidManifest.xml just after the<application> definition. The AndroidManifest.xml can be found at <projectroot>/android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

iOS

For iOS, you need to add the following to your Info.plist file found at <project root>/ios/Runner/Info.plist.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Warning:The video_player plugin does not work on iOS simulators. You must test videos on real iOS devices.

3. Create and initialize a VideoPlayerController

Now that you have the video_player plugin installed with the correctpermissions, you need to create a VideoPlayerController. TheVideoPlayerController class allows you to connect to different types ofvideos and control playback.

Before you can play videos, you must also initialize the controller. Thisestablishes the connection to the video and prepare the controller for playback.

To create and initialize the VideoPlayerController, please:

• Create a StatefulWidget with a companion State class
• Add a variable to the State class to store the VideoPlayerController
• Add a variable to the State class to store the Future returned from VideoPlayerController.initialize
• Create and initialize the controller in the initState method
• Dispose of the controller in the dispose method

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    // Create an store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );
    _initializeVideoPlayerFuture = _controller.initialize();
    super.initState();
  }
  @override
  void dispose() {
    // Ensure you dispose the VideoPlayerController to free up resources
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // Show the video in the next step
  }
}

4. Display the video player

Now, it’s time to display the video. The video_player plugin provides theVideoPlayerWidget to display the video initialized by the VideoPlayerController. Bydefault, the VideoPlayer Widget takes up as much space as possible. Thisoften isn’t ideal for videos because they are meant to be displayed in aspecific aspect ratio, such as 16x9 or 4x3.

Therefore, you can wrap the VideoPlayer widget in anAspectRatiowidget to ensure the video is the correct proportions.

Furthermore, you must display the VideoPlayer widget after the_initializeVideoPlayerFuture completes. You can use a FutureBuilder todisplay a loading spinner until finishes initializing. Note: initializing thecontroller does not begin playback.

// Use a FutureBuilder to display a loading spinner while you wait for the
// VideoPlayerController to finish initializing.
FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the VideoPlayerController has finished initialization, use
      // the data it provides to limit the Aspect Ratio of the VideoPlayer
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        // Use the VideoPlayer widget to display the video
        child: VideoPlayer(_controller),
      );
    } else {
      // If the VideoPlayerController is still initializing, show a
      // loading spinner
      return Center(child: CircularProgressIndicator());
    }
  },
)

5. Play and pause the video

By default, the video starts in a paused state. To begin playback,call theplaymethod provided by the VideoPlayerController. To pause playback, call thepausemethod.

For this example, add a FloatingActionButton to your app that displays a playor pause icon depending on the situation. When the user taps the button, playthe video if it’s currently paused, or pause the video if it’s playing.

FloatingActionButton(
  onPressed: () {
    // Wrap the play or pause in a call to `setState`. This ensures the correct 
    // icon is shown
    setState(() {
      // If the video is playing, pause it.
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it
        _controller.play();
      }
    });
  },
  // Display the correct icon depending on the state of the player.
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

Complete Example

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() => runApp(VideoPlayerApp());
class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}
class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );
    // Initialize the controller and store the Future for later use
    _initializeVideoPlayerFuture = _controller.initialize();
    // Use the controller to loop the video
    _controller.setLooping(true);
    super.initState();
  }
  @override
  void dispose() {
    // Ensure you dispose the VideoPlayerController to free up resources
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Butterfly Video'),
      ),
      // Use a FutureBuilder to display a loading spinner while you wait for the
      // VideoPlayerController to finish initializing.
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the Aspect Ratio of the Video
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video
              child: VideoPlayer(_controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown
          setState(() {
            // If the video is playing, pause it.
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}