Video Player plugin for Flutter #

A Flutter plugin for iOS, Android and Web for playing back video on a Widget surface.

Installation #

First, add video_player as a dependency in your pubspec.yaml file .

iOS #

If you need to access videos using http (rather than https ) URLs, you will need to add the appropriate NSAppTransportSecurity permissions to your app's Info.plist file, located in <project root>/ios/Runner/Info.plist . See Apple's documentation to determine the right combination of entries for your use case and supported iOS versions.

Android #

If you are using network-based videos, ensure that 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"/>

macOS #

If you are using network-based videos, you will need to add the com.apple.security.network.client entitlement

Web #

The Web platform does not support 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 .

* Different web browsers may have different video-playback capabilities (supported formats, autoplay...). Check package:video_player_web for more web-specific information.

The VideoPlayerOptions.mixWithOthers option can't be implemented in web, at least at the moment. If you use this option in web it will be silently ignored.

Supported Formats #

• On iOS and macOS, the backing player is AVPlayer . The supported formats vary depending on the version of iOS, AVURLAsset class has audiovisualTypes that you can query for supported av formats.
• On Android, the backing player is ExoPlayer , please refer here for list of supported formats.
• On Web, available formats depend on your users' browsers (vendor and version). Check package:video_player_web for more specific information.

Example #

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

void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(Uri.parse(
        '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(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

Usage #

The following section contains usage information that goes beyond what is included in the documentation in order to give a more elaborate overview of the API.

This is not complete as of now. You can contribute to this section by opening a pull request .

Playback speed #

You can set the playback speed on your _controller (instance of VideoPlayerController ) by calling _controller.setPlaybackSpeed . setPlaybackSpeed takes a double speed value indicating the rate of playback for your video. For example, when given a value of 2.0 , your video will play at 2x the regular playback speed and so on.

To learn about playback speed limitations, see the setPlaybackSpeed method documentation .

Furthermore, see the example app for an example playback speed implementation.