universal_video_controls

Description:

universal video controls

universal_video_controls #
Overview #
The universal_video_controls package provides a comprehensive solution for video controls that can be universally applied to various video players. This package is a port and generalization of the media_kit controls, designed to create an abstraction that allows these controls to work with any video player backend, provided that the backend's interface is compatible with the AbstractPlayer class.
Images #



Desktop
Mobile









Examples #
Examples can be found at:

[Universal Video Controls Examples](https://github.com/abdelaziz-mahdy/universal_video_controls/tree/main/
universal_video_controls/example)
Example Demo

Getting Started #
This section will guide you through the steps to get started with the universal_video_controls package.
Installation #
Add the following dependencies to your pubspec.yaml file:
dependencies:
universal_video_controls: ^1.0.10
universal_video_controls_video_player: ^1.0.1
video_player: ^2.2.5
copied to clipboard
Then run flutter pub get to install the packages.
Usage #
To use the universal_video_controls package, you need to integrate it with a video player backend that implements the AbstractPlayer interface. Here is a minimal example demonstrating how to set up and use the universal_video_controls with the video_player package.
Example: Single Player Single Video
import 'package:flutter/material.dart';
import 'package:universal_video_controls/universal_video_controls.dart';
import 'package:universal_video_controls_video_player/universal_video_controls_video_player.dart';
import 'package:video_player/video_player.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SinglePlayerSingleVideoScreen(),
);
}
}

class SinglePlayerSingleVideoScreen extends StatefulWidget {
@override
State<SinglePlayerSingleVideoScreen> createState() => _SinglePlayerSingleVideoScreenState();
}

class _SinglePlayerSingleVideoScreenState extends State<SinglePlayerSingleVideoScreen> {
late VideoPlayerController _controller;
bool _isInitialized = false;

@override
void initState() {
super.initState();
_initializeVideoPlayer('https://www.example.com/video.mp4');
}

void _initializeVideoPlayer(String source) async {
_controller = VideoPlayerController.network(source);
await _controller.initialize();
setState(() {
_isInitialized = true;
});
_controller.play();
_controller.addListener(() {
if (_controller.value.hasError) {
debugPrint(_controller.value.errorDescription);
}
});
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Video Player'),
),
body: Center(
child: _isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoControls(
player: VideoPlayerControlsWrapper(_controller),
),
)
: const CircularProgressIndicator(),
),
);
}
}
copied to clipboard
Select existing video controls
Modify the controls argument. For advanced theming of existing video controls, see theming & modifying video controls section.
Scaffold(
body: VideoControls(
controller: controller,
// Select [MaterialVideoControls].
controls: MaterialVideoControls,
),
);
copied to clipboard
Scaffold(
body: VideoControls(
controller: controller,
// Select [CupertinoVideoControls].
controls: CupertinoVideoControls,
),
);
copied to clipboard
Build custom video controls
Pass custom builder Widget Function(BuildContext, VideoController) as controls argument.
Scaffold(
body: VideoControls(
controller: controller,
// Provide custom builder for controls.
controls: (state) {
return Center(
child: IconButton(
onPressed: () {
state.widget.controller.player.playOrPause();
},
icon: StreamBuilder(
stream: state.widget.controller.player.stream.playing,
builder: (context, playing) => Icon(
playing.data == true ? Icons.pause : Icons.play_arrow,
),
),
// It's not necessary to use [StreamBuilder] or to use [Player] & [VideoController] from [state].
// [StreamSubscription]s can be made inside [initState] of this widget.
),
);
},
),
);
copied to clipboard
Use & modify video controls
AdaptiveVideoControls

Selects MaterialVideoControls, CupertinoVideoControls etc. based on platform.
Theming:

Theme the specific controls according to sections below.



MaterialVideoControls

Material Design video controls.
Theming:

Use MaterialVideoControlsTheme widget.
VideoControls widget(s) in the child tree will follow the specified theme:



// Wrap [VideoControls] widget with [MaterialVideoControlsTheme].
MaterialVideoControlsTheme(
normal: MaterialVideoControlsThemeData(
// Modify theme options:
buttonBarButtonSize: 24.0,
buttonBarButtonColor: Colors.white,
// Modify top button bar:
topButtonBar: [
const Spacer(),
MaterialDesktopCustomButton(
onPressed: () {
debugPrint('Custom "Settings" button pressed.');
},
icon: const Icon(Icons.settings),
),
],
),
fullscreen: const MaterialVideoControlsThemeData(
// Modify theme options:
displaySeekBar: false,
),
child: Scaffold(
body: VideoControls(
controller: controller,
),
),
);
copied to clipboard

Related widgets (may be used in primaryButtonBar, topButtonBar & bottomButtonBar):

MaterialPlayOrPauseButton
MaterialSkipNextButton
MaterialSkipPreviousButton
MaterialFullscreenButton
MaterialCustomButton
MaterialPositionIndicator



MaterialDesktopVideoControls

Material Design video controls for desktop.
Theming:

Use MaterialDesktopVideoControlsTheme widget.
VideoControls widget(s) in the child tree will follow the specified theme:



// Wrap [VideoControls] widget with [MaterialDesktopVideoControlsTheme].
MaterialDesktopVideoControlsTheme(
normal: MaterialDesktopVideoControlsThemeData(
// Modify theme options:
seekBarThumbColor: Colors.blue,
seekBarPositionColor: Colors.blue,
toggleFullscreenOnDoublePress: false,
// Modify top button bar:
topButtonBar: [
const Spacer(),
MaterialDesktopCustomButton(
onPressed: () {
debugPrint('Custom "Settings" button pressed.');
},
icon: const Icon(Icons.settings),
),
],
// Modify bottom button bar:
bottomButtonBar: const [
Spacer(),
MaterialDesktopPlayOrPauseButton(),
Spacer(),
],
),
fullscreen: const MaterialDesktopVideoControlsThemeData(),
child: Scaffold(
body: VideoControls(
controller: controller,
),
),
);
copied to clipboard

Related widgets (may be used in primaryButtonBar, topButtonBar & bottomButtonBar):

MaterialDesktopPlayOrPauseButton
MaterialDesktopFullscreenButton
MaterialDesktopCustomButton
MaterialDesktopVolumeButton
MaterialDesktopPositionIndicator


Keyboard shortcuts may be modified using keyboardShortcuts argument. Default ones are listed below:




Shortcut
Action




Media Play Button
Play


Media Pause Button
Pause


Media Play/Pause Button
Play/Pause


Space
Play/Pause


J
Seek 10s Behind


I
Seek 10s Ahead


Arrow Left
Seek 5s Behind


Arrow Right
Seek 5s Ahead


Arrow Up
Increase Volume 5%


Arrow Down
Decrease Volume 5%


F
Enter/Exit Fullscreen


Escape
Exit Fullscreen



CupertinoVideoControls

iOS-style video controls.
Theming:

Use CupertinoVideoControlsTheme widget.
VideoControls widget(s) in the child tree will follow the specified theme:



// Wrap [VideoControls] widget with [CupertinoVideoControlsTheme].
CupertinoVideoControlsTheme(
normal: const CupertinoVideoControlsThemeData(
// W.I.P.
),
fullscreen: const CupertinoVideoControlsThemeData(
// W.I.P.
),
child: Scaffold(
body: VideoControls(
controller: controller,
),
),
);
copied to clipboard
NoVideoControls

Disable video controls i.e. only render video output.
Theming:

No theming applicable.



Contributing #
We welcome contributions to the universal_video_controls project! If you have ideas, suggestions, or improvements, please feel free to submit a pull request or open an issue.
License #
This project is licensed under the MIT License. See the LICENSE file for more details.
Thank you for using universal_video_controls!