apivideo_player 1.4.0 copy "apivideo_player: ^1.4.0" to clipboard
apivideo_player: ^1.4.0 copied to clipboard

The official Flutter player for api.video for iOS, Android and Web.

badge   badge   badge

api.video Flutter player

api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.

Table of contents #

Project description #

Easily integrate a video player for videos from api.video in your Flutter application for iOS, Android and Web.

Getting started #

Installation #

Run the following command at the root of your project.

flutter pub add apivideo_player

Documentation #

Instantiation #

1. The ApiVideoPlayerController

To use a video player, you must instantiate a new controller.

The ApiVideoPlayerController parameters are:

Parameter Mandatory Type Description
videoOptions Yes VideoOptions Options from the video you want to display inside the current video player
autoplay No (default false) bool Whether you want your video to be automatically played when it's ready or not
onReady No VoidCallback A callback called when the video is ready to be played
onPlay No VoidCallback A callback called when the video is played
onPause No VoidCallback A callback called when the video is paused
onEnd No VoidCallback A callback called when the video has ended
onError No Function(Object) A callback called when an error occured

Once instantiated, you need to initialize the controller by calling its initialize() method.

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'), // `VIDEO_ID` is the video id or the live stream id
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

See the sample application below for more details.

2. The ApiVideoPlayer

A Widget that displays the video and its controls.

The ApiVideoPlayer constructor takes 3 parameters:

Parameter Mandatory Type Description
controller Yes ApiVideoPlayerController The controller that controls a video player
fit No (default BoxFit.contain) BoxFit How the player should be inscribed into its box.
style No (default api.video style) PlayerStyle Allows you to customize the video player's colors, shapes,...
child No (default api.video overlay) Widget Replace api.video overlay by your own implementation.

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

Widget build(BuildContext context) {
  return ApiVideoPlayer(
    controller: controller,
  );
}

Methods #

Once the ApiVideoPlayerController has been instantiated, you can control the player it has been assigned to with its methods:

Method Description
play() Play the video
pause() Pause the video
seek(Duration offset) Add/substract the given Duration from the current time
setVolume(double volume) Change the audio volume to the given value. From 0 to 1 (0 = muted, 1 = 100%)
setIsMuted(bool isMuted) Mute/unmute the video
setAutoplay(bool autoplay) Define if the video should start playing as soon as it is loaded
setIsLooping(bool isLooping) Define if the video should be played in loop
setCurrentTime(Duration currentTime) Set the current playback time
setVideoOptions(VideoOptions videoOptions) Set the video options

Example:


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

controller.play(); // Play the video

Properties #

Once the ApiVideoPlayerController has been instantiated, you can access the video player's properties:

Property Type Description
isCreated Future<bool> Check if the player has been created
isPlaying Future<bool> Check whether the video is playing
videoOptions Future<VideoOptions> Retrieve the current video options
currentTime Future<Duration> Retrieve the current playback time of the video
duration Future<Duration> Retrieve the duration of the video
autoplay Future<bool> Check whether the video is autoplayed
isMuted Future<bool> Check whether the video is muted
isLooping Future<bool> Check whether the video is in loop mode
volume Future<double> Retrieve the current volume
videoSize Future<Size?> Retrieve the current video size

Example:


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

final bool isMuted = await controller.isMuted;

Events listener #

Add a new event listener: Method 1

When you instantiate a new ApiVideoPlayerController, you can bind callbacks to some events:


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
  onPlay: () => print('PLAY'),
  onPause: () => print('PAUSE'),
);

Add a new event listener: Method 2

Once the ApiVideoPlayerController has been instantiated, you can bind callbacks to some events:


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

final ApiVideoPlayerControllerEventsListener eventsListener =
ApiVideoPlayerControllerEventsListener(
  onPlay: () => print('PLAY'),
);

controller.addListener(eventsListener);
Event Type Description
onReady VoidCallback A callback called when the video is ready to be played
onPlay VoidCallback A callback called when the video is played
onPause VoidCallback A callback called when the video is paused
onEnd VoidCallback A callback called when the video has ended
onError Function(Object) A callback called when an error occured

Remove an event listener

To remove an event listener, you need to call the controller's removeListener method.


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

final ApiVideoPlayerControllerEventsListener eventsListener =
ApiVideoPlayerControllerEventsListener(
  onPlay: () => print('PLAY'),
);

controller.removeListener(eventsListener);

Sample application #

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ApiVideoPlayerController _controller = ApiVideoPlayerController(
    videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
    // For private video: VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
    onPlay: () => print('PLAY'),
  );
  String _duration = 'Get duration';

  @override
  void initState() {
    super.initState();
    _controller.initialize();
    _controller.addListener(
      ApiVideoPlayerControllerEventsListener(
        onPause: () => print('PAUSE'),
      ),
    );
  }

  void _getDuration() async {
    final Duration duration = await _controller.duration;
    setState(() {
      _duration = 'Duration: $duration';
    });
  }

  void _muteVideo() {
    _controller.setIsMuted(true);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          body: Center(
            child: Column(
              children: <Widget>[
                SizedBox(
                  width: 400.0,
                  height: 300.0,
                  child: ApiVideoPlayer(
                    controller: _controller,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.volume_off),
                  onPressed: _muteVideo,
                ),
                TextButton(
                  onPressed: _getDuration,
                  child: Text(
                    _duration,
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

Dependencies #

We are using external library

Plugin README
Exoplayer README.md

FAQ #

If you have any questions, ask us in the community or use issues.