video_player 0.2.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 93

Video Player plugin for Flutter

pub package

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

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

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.

Example

class _MyHomePageState extends State<MyHomePage> {
  VideoPlayerController _controller;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _controller = new VideoPlayerController(
      'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
    )
      ..addListener(() {
        final bool isPlaying = _controller.value.isPlaying;
        if (isPlaying != _isPlaying) {
          setState(() {
            _isPlaying = isPlaying;
          });
        }
      })
      ..initialize();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Padding(
          padding: const EdgeInsets.all(10.0),
          child: new AspectRatio(
            aspectRatio: 1280 / 720,
            child: new VideoPlayer(_controller),
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed:
            _controller.value.isPlaying ? _controller.pause : _controller.play,
        child: new Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

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.

/// 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';

/// Controls play and pause of [controller].
///
/// Toggles play/pause on tap (accompanied by a fading status icon).
///
/// Plays (looping) on initialization, and mutes on deactivation.
class VideoPlayPause extends StatefulWidget {
  final VideoPlayerController controller;

  VideoPlayPause(this.controller);

  @override
  State createState() {
    return new _VideoPlayPauseState();
  }
}

class _VideoPlayPauseState extends State<VideoPlayPause> {
  FadeAnimation imageFadeAnim =
      new FadeAnimation(child: new Icon(Icons.play_arrow, size: 100.0));
  VoidCallback listener;

  _VideoPlayPauseState() {
    listener = () {
      setState(() {});
    };
  }

  VideoPlayerController get controller => widget.controller;

  @override
  void initState() {
    super.initState();
    controller.addListener(listener);
    controller.setVolume(1.0);
    controller.play();
  }

  @override
  void deactivate() {
    controller.setVolume(0.0);
    controller.removeListener(listener);
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> children = <Widget>[
      new GestureDetector(
        child: new VideoPlayer(controller),
        onTap: () {
          if (!controller.value.initialized) {
            return;
          }
          if (controller.value.isPlaying) {
            imageFadeAnim =
                new FadeAnimation(child: new Icon(Icons.pause, size: 100.0));
            controller.pause();
          } else {
            imageFadeAnim = new FadeAnimation(
                child: new Icon(Icons.play_arrow, size: 100.0));
            controller.play();
          }
        },
      ),
      new Align(
        alignment: Alignment.bottomCenter,
        child: new VideoProgressIndicator(
          controller,
          allowScrubbing: true,
        ),
      ),
      new Center(child: imageFadeAnim),
    ];

    return new Stack(
      fit: StackFit.passthrough,
      children: children,
    );
  }
}

class FadeAnimation extends StatefulWidget {
  final Widget child;
  final Duration duration;

  FadeAnimation({this.child, this.duration: const Duration(milliseconds: 500)});

  @override
  _FadeAnimationState createState() => new _FadeAnimationState();
}

class _FadeAnimationState extends State<FadeAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController =
        new AnimationController(duration: widget.duration, vsync: this);
    animationController.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
    animationController.forward(from: 0.0);
  }

  @override
  void deactivate() {
    animationController.stop();
    super.deactivate();
  }

  @override
  void didUpdateWidget(FadeAnimation oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.child != widget.child) {
      animationController.forward(from: 0.0);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return animationController.isAnimating
        ? new Opacity(
            opacity: 1.0 - animationController.value,
            child: widget.child,
          )
        : new Container();
  }
}

typedef Widget VideoWidgetBuilder(
    BuildContext context, VideoPlayerController controller);

/// A widget connecting its life cycle to a [VideoPlayerController].
class PlayerLifeCycle extends StatefulWidget {
  final VideoWidgetBuilder childBuilder;
  final String uri;

  PlayerLifeCycle(this.uri, this.childBuilder);

  @override
  _PlayerLifeCycleState createState() => new _PlayerLifeCycleState();
}

class _PlayerLifeCycleState extends State<PlayerLifeCycle> {
  VideoPlayerController controller;

  _PlayerLifeCycleState();

  @override
  void initState() {
    super.initState();
    controller = new VideoPlayerController(widget.uri);
    controller.addListener(() {
      if (controller.value.hasError) {
        print(controller.value.errorDescription);
      }
    });
    controller.initialize();
    controller.setLooping(true);
    controller.play();
  }

  @override
  void deactivate() {
    super.deactivate();
  }

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

  @override
  Widget build(BuildContext context) {
    return widget.childBuilder(context, controller);
  }
}

/// A filler card to show the video in a list of scrolling contents.
Widget buildCard(String title) {
  return new Card(
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new ListTile(
          leading: const Icon(Icons.airline_seat_flat_angled),
          title: new Text(title),
        ),
        new ButtonTheme.bar(
          child: new ButtonBar(
            children: <Widget>[
              new FlatButton(
                child: const Text('BUY TICKETS'),
                onPressed: () {/* ... */},
              ),
              new FlatButton(
                child: const Text('SELL TICKETS'),
                onPressed: () {/* ... */},
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

class VideoInListOfCards extends StatelessWidget {
  final VideoPlayerController controller;

  VideoInListOfCards(this.controller);

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

class AspectRatioVideo extends StatefulWidget {
  final VideoPlayerController controller;

  AspectRatioVideo(this.controller);

  @override
  AspectRatioVideoState createState() => new AspectRatioVideoState();
}

class AspectRatioVideoState extends State<AspectRatioVideo> {
  VideoPlayerController get controller => widget.controller;
  bool initialized = false;

  VoidCallback listener;

  @override
  void initState() {
    super.initState();
    listener = () {
      if (!mounted) {
        return;
      }
      if (initialized != controller.value.initialized) {
        initialized = controller.value.initialized;
        setState(() {});
      }
    };
    controller.addListener(listener);
  }

  @override
  Widget build(BuildContext context) {
    if (initialized) {
      final Size size = controller.value.size;
      return new Center(
        child: new AspectRatio(
          aspectRatio: size.width / size.height,
          child: new VideoPlayPause(controller),
        ),
      );
    } else {
      return new Container();
    }
  }
}

void main() {
  runApp(
    new MaterialApp(
      home: new DefaultTabController(
        length: 2,
        child: new Scaffold(
          appBar: new AppBar(
            title: const Text('Video player example'),
            bottom: new TabBar(
              isScrollable: true,
              tabs: <Widget>[
                new Tab(icon: new Icon(Icons.fullscreen)),
                new Tab(icon: new Icon(Icons.list)),
              ],
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new PlayerLifeCycle(
                'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
                (BuildContext context, VideoPlayerController controller) =>
                    new AspectRatioVideo(controller),
              ),
              new PlayerLifeCycle(
                  'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
                  (BuildContext context, VideoPlayerController controller) =>
                      new VideoInListOfCards(controller)),
            ],
          ),
        ),
      ),
    ),
  );
}

1. Depend on it

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


dependencies:
  video_player: "^0.2.1"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or packages 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';
        
Version Uploaded Documentation Archive
0.2.1 Feb 13, 2018 Go to the documentation of video_player 0.2.1 Download video_player 0.2.1 archive
0.2.0 Jan 30, 2018 Go to the documentation of video_player 0.2.0 Download video_player 0.2.0 archive
0.1.1 Jan 11, 2018 Go to the documentation of video_player 0.1.1 Download video_player 0.1.1 archive
0.0.7 Dec 21, 2017 Go to the documentation of video_player 0.0.7 Download video_player 0.0.7 archive
0.0.6 Dec 4, 2017 Go to the documentation of video_player 0.0.6 Download video_player 0.0.6 archive
0.0.5 Dec 1, 2017 Go to the documentation of video_player 0.0.5 Download video_player 0.0.5 archive
0.0.4 Nov 30, 2017 Go to the documentation of video_player 0.0.4 Download video_player 0.0.4 archive
0.0.3 Nov 29, 2017 Go to the documentation of video_player 0.0.3 Download video_player 0.0.3 archive
0.0.2 Nov 23, 2017 Go to the documentation of video_player 0.0.2 Download video_player 0.0.2 archive
0.0.1 Nov 23, 2017 Go to the documentation of video_player 0.0.1 Download video_player 0.0.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • tool failures on Feb 13, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1
  • Flutter: 0.0.22

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
96 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
76 / 100
Overall score:
Weighted score of the above. [more]
93

Platforms

Detected platforms: unsure

Error(s) prevent platform classification.

Suggestions

  • Fix dependencies in pubspec.yaml.

    Running flutter packages pub upgrade failed with the following output:

    ERR: Invalid argument(s): Minimum version ("2.0.0-dev.23.0") must be less than maximum ("2.0.0-dev.16.0").
    ERR: package:pub_semver/src/version_range.dart 59         new VersionRange
     package:pub/src/pubspec.dart 366                     Pubspec._ensureEnvironment
     package:pub/src/pubspec.dart 331                     Pubspec.dartSdkConstraint
     package:pub/src/solver/backtracking_solver.dart 511  BacktrackingSolver._checkPubspecMatchesSdkConstraint
     package:pub/src/solver/backtracking_solver.dart 474  BacktrackingSolver._checkVersion
     ===== asynchronous gap ===========================
     package:pub/src/solver/backtracking_solver.dart 432  BacktrackingSolver._findValidVersion.<fn>
     ===== asynchronous gap ===========================
     dart:async                                           Future.doWhile
     package:pub/src/solver/backtracking_solver.dart 430  BacktrackingSolver._findValidVersion
     package:pub/src/solver/backtracking_solver.dart 337  BacktrackingSolver._versionQueueFor
     ===== asynchronous gap ===========================
     package:pub/src/solver/backtracking_solver.dart 290  BacktrackingSolver._solve.<fn>
     ===== asynchronous gap ===========================
     dart:async                                           _completeOnAsyncReturn
     package:pub/src/solver/backtracking_solver.dart 315  BacktrackingSolver._solve.<fn>
     dart:async                                           _completeOnAsyncReturn
     package:pub/src/solver/version_selection.dart 64     VersionSelection.select
     dart:async                                           _completeOnAsyncReturn
     package:pub/src/solver/version_selection.dart 91     VersionSelection._addDependencies
     dart:async                                           _completeOnAsyncReturn
     package:pub/src/solver/version_selection.dart 91     VersionSelection._addDependencies
    ERR: This is an unexpected error. Please run
     
         pub --trace upgrade --verbosity io --no-precompile
     
     and include the logs in an issue on https://github.com/dart-lang/pub/issues/new
    
  • Fix platform conflicts.

    Make sure none of the libraries use mutually exclusive dependendencies.

  • Fix issues reported by dartanalyzer.

    dartanalyzer reported 1 error(s) and 0 warning(s).

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.8.0 <2.0.0