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