Playing Video in Flutter

Video requires use of a plugin, luckily there are several, which should make it easier. You will need to check to see if it works for your platform, most work for iOS and/or Android, but not all work for web, and most don’t work for desktop apps. Some video players will play YouTube only, while others expect video to be from a different source since YouTube doesn’t support sharing of the MP4 files directly, and instead you have to usually load it in an iFrame within your web or mobile device.

We are going to start by creating a basic Flutter app, the way we’ve done before. Then removing the comments. We’re going to play a small clip each time someone clicks on the increment button.

Getting the Plugin

For this exercise we’ll be using the video_player plugin.

So we will need to add the following line to the pubspec.yaml file under dependencies.

video_player: ^2.2.5

And then in the dart file, you will need to import the package:

import 'package:video_player/video_player.dart';

Security Settings

Because this is most likely going to play videos from the Internet, you will need to modify your security settings as well, so you can pull the files from a URL.

iOS

This plugin requires iOS 9.0 or higher. Add the following entry to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

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

Android

Ensure the following permission is present in your Android Manifest file, located in <project root>/android/app/src/main/AndroidManifest.xml:

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

The Flutter project template adds it, so it may already be there.

Web 

The Web platform does not suppport dart:io, so avoid using the VideoPlayerController.file constructor for the plugin. Using the constructor attempts to create a VideoPlayerController.file that will throw an UnimplementedError.

Updating the UI

Next we need to update the UI. Depending upon the library you use, and your desires, you may include buttons to play/stop/pause/fast forward/rewind/etc. For our example we’re going to keep it simple

We’re going to add a video controller object to our state object.

VideoPlayerController? _controller;

Next we’re going to update the initState, which will allow us to initialize the video controller.

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

You notice we’re using .network() here. We could also use .asset() to load a local asset, or .file() for a local file, etc.

The Widget to play the video in

Replacing the Text widgets, we add a widget. But since we don’t know for sure that the player is initialized, we need to perform a ternary operations to decide which widget to display.

_controller!.value.isInitialized
    ? AspectRatio(
      aspectRatio: _controller!.value.aspectRatio,
        child: VideoPlayer(_controller!),
    )
    : Container(),

We then create a TextButton which will allow us to play or pause the video. Once again we will use the ternary operations to control what the button does and what it displays.

TextButton(
    onPressed: () {
        setState(() {
        _controller!.value.isPlaying
            ? _controller!.pause()
            : _controller!.play();
        });
    },
    child: Text(_controller!.value.isPlaying ? "Pause" : "Play"))

The Complete Body

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _controller!.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller!.value.aspectRatio,
                    child: VideoPlayer(_controller!),
                  )
                : Container(),
            TextButton(
                onPressed: () {
                  setState(() {
                    _controller!.value.isPlaying
                        ? _controller!.pause()
                        : _controller!.play();
                  });
                },
                child: Text(_controller!.value.isPlaying ? "Pause" : "Play")),
          ],
        ),
      ),

Disposal

You don’t want to forget to dispose of the player once you leave that screen.

@override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

Potential Changes

This has been very simple. Of course, we can change the button, providing more space as necessary, and/or styling it differently without too much difficulty

Likewise, we could add extra buttons for tools like fast forward/rewind, maybe volume control and even a playback bar.

Playing Video in Flutter was originally found on Access 2 Learn