video_player 0.10.11+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 100

Video Player plugin for Flutter #

pub package

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

Please set your constraint to video_player: '>=0.10.y+x <2.0.0'

Backward compatible 1.0.0 version is coming #

The plugin has reached a stable API, we guarantee that version 1.0.0 will be backward compatible with 0.10.y+z. Please use video_player: '>=0.10.y+x <2.0.0' as your dependency constraint to allow a smoother ecosystem migration. For more details see: https://github.com/flutter/flutter/wiki/Package-migration-to-1.0.0

The example app running in iOS

Note: This plugin is still under development, and some APIs might not be available yet. Feedback welcome and Pull Requests are most welcome!

Installation #

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

iOS #

Warning: The video player is not functional on iOS simulators. An iOS device must be used during development/testing.

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>

This entry allows your app to access video files by URL.

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 #

This plugin compiles for the web platform since version 0.10.5, in recent enough versions of Flutter (>=1.12.13+hotfix.4).

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.

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

Supported Formats #

  • On iOS, 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:video_player/video_player.dart';
import 'package:flutter/material.dart';

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

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.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.initialized
              ? 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() {
    super.dispose();
    _controller.dispose();
  }
}

0.10.11+1 #

  • Post-v2 Android embedding cleanups.

0.10.11 #

  • iOS: Fixed crash when detaching from a dying engine.
  • Android: Fixed exception when detaching from any engine.

0.10.10 #

0.10.9+2 #

0.10.9+1 #

  • Readme updated to include web support and details on how to use for web

0.10.9 #

  • Remove Android dependencies fallback.
  • Require Flutter SDK 1.12.13+hotfix.5 or greater.
  • Fix CocoaPods podspec lint warnings.

0.10.8+2 #

  • Replace deprecated getFlutterEngine call on Android.

0.10.8+1 #

  • Make the pedantic dev_dependency explicit.

0.10.8 #

  • Added support for cleaning up the plugin if used for add-to-app (Flutter v1.15.3 is required for that feature).

0.10.7 #

  • VideoPlayerController support for reading closed caption files.
  • VideoPlayerValue has a caption field for reading the current closed caption at any given time.

0.10.6 #

  • ClosedCaptionFile and SubRipCaptionFile classes added to read SubRip files into dart objects.

0.10.5+3 #

  • Add integration instructions for the web platform.

0.10.5+2 #

  • Make sure the plugin is correctly initialized

0.10.5+1 #

  • Fixes issue where initialize() Future stalls when failing to load source data and does not throw an error.

0.10.5 #

  • Support web by default.
  • Require Flutter SDK 1.12.13+hotfix.4 or greater.

0.10.4+2 #

  • Remove the deprecated author: field form pubspec.yaml
  • Migrate the plugin to the pubspec platforms manifest.
  • Require Flutter SDK 1.10.0 or greater.

0.10.4+1 #

  • Fix pedantic lints. This fixes some potential race conditions in cases where futures within some video_player methods weren't being awaited correctly.

0.10.4 #

  • Port plugin code to use the federated Platform Interface, instead of a MethodChannel directly.

0.10.3+3 #

  • Add DartDocs and unit tests.

0.10.3+2 #

  • Update the homepage to point to the new plugin location

0.10.3+1 #

  • Dispose FLTVideoPlayer in onTextureUnregistered callback on iOS.
  • Add a temporary fix to dispose the FLTVideoPlayer with a delay to avoid race condition.
  • Updated the example app to include a new page that pop back after video is done playing.

0.10.3 #

  • Add support for the v2 Android embedding. This shouldn't impact existing functionality.

0.10.2+6 #

  • Remove AndroidX warnings.

0.10.2+5 #

  • Update unit test for compatibility with Flutter stable branch.

0.10.2+4 #

  • Define clang module for iOS.

0.10.2+3 #

  • Fix bug where formatHint was not being pass down to network sources.

0.10.2+2 #

  • Update and migrate iOS example project.

0.10.2+1 #

  • Use DefaultHttpDataSourceFactory only when network schemas and use DefaultHttpDataSourceFactory by default.

0.10.2 #

  • Android Only Adds optional VideoFormat used to signal what format the plugin should try.

0.10.1+7 #

  • Fix tests by ignoring deprecated member use.

0.10.1+6 #

  • [iOS] Fixed a memory leak with notification observing.

0.10.1+5 #

  • Fix race condition while disposing the VideoController.

0.10.1+4 #

  • Fixed syntax error in README.md.

0.10.1+3 #

  • Add missing template type parameter to invokeMethod calls.
  • Bump minimum Flutter version to 1.5.0.
  • Replace invokeMethod with invokeMapMethod wherever necessary.

0.10.1+2 #

  • Example: Fixed tab display and added scroll view

0.10.1+1 #

  • iOS: Avoid deprecated seekToTime API

0.10.1 #

  • iOS: Consider a player only initialized once duration is determined.

0.10.0+8 #

  • iOS: Fix an issue where the player sends initialization message incorrectly.

  • Fix a few other IDE warnings.

0.10.0+7 #

  • Android: Fix issue where buffering status in percentage instead of milliseconds

  • Android: Update buffering status everytime we notify for position change

0.10.0+6 #

  • Android: Fix missing call to event.put("event", "completed"); which makes it possible to detect when the video is over.

0.10.0+5 #

  • Fixed iOS build warnings about implicit retains.

0.10.0+4 #

  • Android: Upgrade ExoPlayer to 2.9.6.

0.10.0+3 #

  • Fix divide by zero bug on iOS.

0.10.0+2 #

  • Added supported format documentation in README.

0.10.0+1 #

  • Log a more detailed warning at build time about the previous AndroidX migration.

0.10.0 #

  • Breaking change. Migrate from the deprecated original Android Support Library to AndroidX. This shouldn't result in any functional changes, but it requires any Android apps using this plugin to also migrate if they're using the original support library.

0.9.0 #

  • Fixed the aspect ratio and orientation of videos. Videos are now properly displayed when recorded in portrait mode both in iOS and Android.

0.8.0 #

  • Android: Upgrade ExoPlayer to 2.9.1
  • Android: Use current gradle dependencies
  • Android 9 compatibility fixes for Demo App

0.7.2 #

  • Updated to use factories on exoplayer MediaSources for Android instead of the now-deprecated constructors.

0.7.1 #

  • Fixed null exception on Android when the video has a width or height of 0.

0.7.0 #

  • Add a unit test for controller and texture changes. This is a breaking change since the interface had to be cleaned up to facilitate faking.

0.6.6 #

  • Fix the condition where the player doesn't update when attached controller is changed.

0.6.5 #

  • Eliminate race conditions around initialization: now initialization events are queued and guaranteed to be delivered to the Dart side. VideoPlayer widget is rebuilt upon completion of initialization.

0.6.4 #

  • Android: add support for hls, dash and ss video formats.

0.6.3 #

  • iOS: Allow audio playback in silent mode.

0.6.2 #

  • VideoPlayerController.seekTo() is now frame accurate on both platforms.

0.6.1 #

  • iOS: add missing observer removals to prevent crashes on deallocation.

0.6.0 #

  • Android: use ExoPlayer instead of MediaPlayer for better video format support.

0.5.5 #

  • Breaking change VideoPlayerController.initialize() now only completes after the controller is initialized.
  • Updated example in README.md.

0.5.4 #

  • Updated Gradle tooling to match Android Studio 3.1.2.

0.5.3 #

  • Added video buffering status.

0.5.2 #

  • Fixed a bug on iOS that could lead to missing initialization.
  • Added support for HLS video on iOS.

0.5.1 #

  • Fixed bug on video loop feature for iOS.

0.5.0 #

  • Added the constructor VideoPlayerController.file.
  • Breaking change. Changed VideoPlayerController.isNetwork to an enum VideoPlayerController.dataSourceType.

0.4.1 #

  • Updated Flutter SDK constraint to reflect the changes in v0.4.0.

0.4.0 #

  • Breaking change. Removed the VideoPlayerController constructor
  • Added two new factory constructors VideoPlayerController.asset and VideoPlayerController.network to respectively play a video from the Flutter assets and from a network uri.

0.3.0 #

  • Breaking change. Set SDK constraints to match the Flutter beta release.

0.2.1 #

  • Fixed some signatures to account for strong mode runtime errors.
  • Fixed spelling mistake in toString output.

0.2.0 #

  • Breaking change. Renamed VideoPlayerController.isErroneous to VideoPlayerController.hasError.
  • Updated documentation of when fields are available on VideoPlayerController.
  • Updated links in README.md.

0.1.1 #

  • Simplified and upgraded Android project template to Android SDK 27.
  • Moved Android package to io.flutter.plugins.
  • Fixed warnings from the Dart 2.0 analyzer.

0.1.0 #

  • Breaking change. Upgraded to Gradle 4.1 and Android Studio Gradle plugin 3.0.1. Older Flutter projects need to upgrade their Gradle setup as well in order to use this version of the plugin. Instructions can be found here.

0.0.7 #

  • Added access to the video size.
  • Made the VideoProgressIndicator render using a LinearProgressIndicator.

0.0.6 #

  • Fixed a bug related to hot restart on Android.

0.0.5 #

  • Added VideoPlayerValue.toString().
  • Added FLT prefix to iOS types.

0.0.4 #

  • The player will now pause on app pause, and resume on app resume.
  • Implemented scrubbing on the progress bar.

0.0.3 #

  • Made creating a VideoPlayerController a synchronous operation. Must be followed by a call to initialize().
  • Added VideoPlayerController.setVolume().
  • Moved the package to flutter/plugins github repo.

0.0.2 #

  • Fix meta dependency version.

0.0.1 #

  • Initial release

example/lib/main.dart

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

/// An example of using the plugin, controlling lifecycle and playback of the
/// video.

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

void main() {
  runApp(
    MaterialApp(
      home: _App(),
    ),
  );
}

class _App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        key: const ValueKey<String>('home_page'),
        appBar: AppBar(
          title: const Text('Video player example'),
          actions: <Widget>[
            IconButton(
              key: const ValueKey<String>('push_tab'),
              icon: const Icon(Icons.navigation),
              onPressed: () {
                Navigator.push<_PlayerVideoAndPopPage>(
                  context,
                  MaterialPageRoute<_PlayerVideoAndPopPage>(
                    builder: (BuildContext context) => _PlayerVideoAndPopPage(),
                  ),
                );
              },
            )
          ],
          bottom: const TabBar(
            isScrollable: true,
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud),
                text: "Remote",
              ),
              Tab(icon: Icon(Icons.insert_drive_file), text: "Asset"),
              Tab(icon: Icon(Icons.list), text: "List example"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            _BumbleBeeRemoteVideo(),
            _ButterFlyAssetVideo(),
            _ButterFlyAssetVideoInList(),
          ],
        ),
      ),
    );
  }
}

class _ButterFlyAssetVideoInList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        _ExampleCard(title: "Item a"),
        _ExampleCard(title: "Item b"),
        _ExampleCard(title: "Item c"),
        _ExampleCard(title: "Item d"),
        _ExampleCard(title: "Item e"),
        _ExampleCard(title: "Item f"),
        _ExampleCard(title: "Item g"),
        Card(
            child: Column(children: <Widget>[
          Column(
            children: <Widget>[
              const ListTile(
                leading: Icon(Icons.cake),
                title: Text("Video video"),
              ),
              Stack(
                  alignment: FractionalOffset.bottomRight +
                      const FractionalOffset(-0.1, -0.1),
                  children: <Widget>[
                    _ButterFlyAssetVideo(),
                    Image.asset('assets/flutter-mark-square-64.png'),
                  ]),
            ],
          ),
        ])),
        _ExampleCard(title: "Item h"),
        _ExampleCard(title: "Item i"),
        _ExampleCard(title: "Item j"),
        _ExampleCard(title: "Item k"),
        _ExampleCard(title: "Item l"),
      ],
    );
  }
}

/// A filler card to show the video in a list of scrolling contents.
class _ExampleCard extends StatelessWidget {
  const _ExampleCard({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: const Icon(Icons.airline_seat_flat_angled),
            title: Text(title),
          ),
          ButtonBar(
            children: <Widget>[
              FlatButton(
                child: const Text('BUY TICKETS'),
                onPressed: () {
                  /* ... */
                },
              ),
              FlatButton(
                child: const Text('SELL TICKETS'),
                onPressed: () {
                  /* ... */
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _ButterFlyAssetVideo extends StatefulWidget {
  @override
  _ButterFlyAssetVideoState createState() => _ButterFlyAssetVideoState();
}

class _ButterFlyAssetVideoState extends State<_ButterFlyAssetVideo> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/Butterfly-209.mp4');

    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();
  }

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.only(top: 20.0),
          ),
          const Text('With assets mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  VideoPlayer(_controller),
                  _PlayPauseOverlay(controller: _controller),
                  VideoProgressIndicator(_controller, allowScrubbing: true),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _BumbleBeeRemoteVideo extends StatefulWidget {
  @override
  _BumbleBeeRemoteVideoState createState() => _BumbleBeeRemoteVideoState();
}

class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
  VideoPlayerController _controller;

  Future<ClosedCaptionFile> _loadCaptions() async {
    final String fileContents = await DefaultAssetBundle.of(context)
        .loadString('assets/bumble_bee_captions.srt');
    return SubRipCaptionFile(fileContents);
  }

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      closedCaptionFile: _loadCaptions(),
    );

    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(padding: const EdgeInsets.only(top: 20.0)),
          const Text('With remote mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  VideoPlayer(_controller),
                  ClosedCaption(text: _controller.value.caption.text),
                  _PlayPauseOverlay(controller: _controller),
                  VideoProgressIndicator(_controller, allowScrubbing: true),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _PlayPauseOverlay extends StatelessWidget {
  const _PlayPauseOverlay({Key key, this.controller}) : super(key: key);

  final VideoPlayerController controller;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedSwitcher(
          duration: Duration(milliseconds: 50),
          reverseDuration: Duration(milliseconds: 200),
          child: controller.value.isPlaying
              ? SizedBox.shrink()
              : Container(
                  color: Colors.black26,
                  child: Center(
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 100.0,
                    ),
                  ),
                ),
        ),
        GestureDetector(
          onTap: () {
            controller.value.isPlaying ? controller.pause() : controller.play();
          },
        ),
      ],
    );
  }
}

class _PlayerVideoAndPopPage extends StatefulWidget {
  @override
  _PlayerVideoAndPopPageState createState() => _PlayerVideoAndPopPageState();
}

class _PlayerVideoAndPopPageState extends State<_PlayerVideoAndPopPage> {
  VideoPlayerController _videoPlayerController;
  bool startedPlaying = false;

  @override
  void initState() {
    super.initState();

    _videoPlayerController =
        VideoPlayerController.asset('assets/Butterfly-209.mp4');
    _videoPlayerController.addListener(() {
      if (startedPlaying && !_videoPlayerController.value.isPlaying) {
        Navigator.pop(context);
      }
    });
  }

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

  Future<bool> started() async {
    await _videoPlayerController.initialize();
    await _videoPlayerController.play();
    startedPlaying = true;
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 0,
      child: Center(
        child: FutureBuilder<bool>(
          future: started(),
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            if (snapshot.data == true) {
              return AspectRatio(
                aspectRatio: _videoPlayerController.value.aspectRatio,
                child: VideoPlayer(_videoPlayerController),
              );
            } else {
              return const Text('waiting for video to load');
            }
          },
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  video_player: ^0.10.11+1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:video_player/video_player.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
99
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
100
Learn more about scoring.

We analyzed this package on Jun 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
meta ^1.0.5 1.1.8
video_player_platform_interface ^2.0.0 2.0.2
video_player_web >=0.1.1 <2.0.0 0.1.3+1
Transitive dependencies
collection 1.14.12
flutter_web_plugins 0.0.0
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
pedantic ^1.8.0
pigeon 0.1.0-experimental.11