Sign up for free

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.

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:

ParameterMandatoryTypeDescription
videoOptionsYesVideoOptionsOptions from the video you want to display inside the current video player
autoplayNo (default false)boolWhether you want your video to be automatically played when it's ready or not
onReadyNoVoidCallbackA callback called when the video is ready to be played
onPlayNoVoidCallbackA callback called when the video is played
onPauseNoVoidCallbackA callback called when the video is paused
onEndNoVoidCallbackA callback called when the video has ended
onErrorNoFunction(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:

ParameterMandatoryTypeDescription
controllerYesApiVideoPlayerControllerThe controller that controls a video player
fitNo (default BoxFit.contain)BoxFitHow the player should be inscribed into its box.
styleNo (default api.video style)PlayerStyleAllows you to customize the video player's colors, shapes,...
childNo (default api.video overlay)WidgetReplace 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:

MethodDescription
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:

PropertyTypeDescription
isCreatedFuture<bool>Check if the player has been created
isPlayingFuture<bool>Check whether the video is playing
videoOptionsFuture<VideoOptions>Retrieve the current video options
currentTimeFuture<Duration>Retrieve the current playback time of the video
durationFuture<Duration>Retrieve the duration of the video
autoplayFuture<bool>Check whether the video is autoplayed
isMutedFuture<bool>Check whether the video is muted
isLoopingFuture<bool>Check whether the video is in loop mode
volumeFuture<double>Retrieve the current volume
videoSizeFuture<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);
EventTypeDescription
onReadyVoidCallbackA callback called when the video is ready to be played
onPlayVoidCallbackA callback called when the video is played
onPauseVoidCallbackA callback called when the video is paused
onEndVoidCallbackA callback called when the video has ended
onErrorFunction(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

PluginREADME
ExoplayerREADME.md

FAQ

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

Was this page helpful?