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'),
);

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'),
);

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'),
);

await controller.initialize();

controller.play(); // Play the video

Properties

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

PropertyTypeDescription
isCreatedFutureCheck if the player has been created
isPlayingFutureCheck whether the video is playing
videoOptionsFutureRetrieve the current video options
currentTimeFutureRetrieve the current playback time of the video
durationFutureRetrieve the duration of the video
autoplayFutureCheck whether the video is autoplayed
isMutedFutureCheck whether the video is muted
isLoopingFutureCheck whether the video is in loop mode
volumeFutureRetrieve the current volume
videoSizeFutureRetrieve the current video size

Example:


final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

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'),
  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'),
);

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'),
);

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'),
    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?