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 #

• Table of contents
• Project description
• Getting started
  • Installation
• Documentation
  • Instantiation
    • 1. The ApiVideoPlayerController
    • 2. The ApiVideoPlayer
  • Methods
  • Properties
  • Events listener
    • Add a new event listener: Method 1
    • Add a new event listener: Method 2
    • Remove an event listener
• Sample application
• Dependencies
• FAQ

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'), // `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:

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:

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:

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

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

FAQ #

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