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:

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:

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:

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:

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

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

FAQ

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