flutter_video_controls

Description:

flutter video controls

flutter_video_controls #




The video player for Flutter with a heart of gold.
The video_player plugin provides low-level access to video playback. flutter_video_controls uses the video_player under the hood and wraps it in a friendly Material or Cupertino UI!
Preview #



MaterialControls
MaterialDesktopControls









CupertinoControls #

Installation #
In your pubspec.yaml file within your Flutter Project add flutter_video_controls and video_player under dependencies:
dependencies:
flutter_video_controls: <latest_version>
video_player: <latest_version>
copied to clipboard
Using it #
import 'package:flutter_video_controls/flutter_video_controls.dart';
final videoPlayerController = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final ChewieController = ChewieController(
videoPlayerController: videoPlayerController,
autoPlay: true,
looping: true,
);

final playerWidget = flutter_video_controls(
controller: ChewieController,
);
copied to clipboard
Please make sure to dispose both controller widgets after use. For example, by overriding the dispose method of the a StatefulWidget:
@override
void dispose() {
videoPlayerController.dispose();
ChewieController.dispose();
super.dispose();
}
copied to clipboard
Options #

flutter_video_controls has some options which control the video. These options appear by default in a showModalBottomSheet (similar to YT). By default, flutter_video_controls passes Playback speed and Subtitles options as an OptionItem.
To add additional options, just add these lines to your ChewieController:
additionalOptions: (context) {
return <OptionItem>[
OptionItem(
onTap: () => debugPrint('My option works!'),
iconData: Icons.chat,
title: 'My localized title',
),
OptionItem(
onTap: () =>
debugPrint('Another option that works!'),
iconData: Icons.chat,
title: 'Another localized title',
),
];
},
copied to clipboard
Customizing the modal sheet #
If you don't like the default showModalBottomSheet for showing your options, you can override the View with the optionsBuilder method:
optionsBuilder: (context, defaultOptions) async {
await showDialog<void>(
context: context,
builder: (ctx) {
return AlertDialog(
content: ListView.builder(
itemCount: defaultOptions.length,
itemBuilder: (_, i) => ActionChip(
label: Text(defaultOptions[i].title),
onPressed: () =>
defaultOptions[i].onTap!(),
),
),
);
},
);
},
copied to clipboard
Your additionalOptions are already included here (if you provided additionalOptions)!
Translations #
What is an option without proper translation?
To add your translation strings add:
optionsTranslation: OptionsTranslation(
playbackSpeedButtonText: 'Wiedergabegeschwindigkeit',
subtitlesButtonText: 'Untertitel',
cancelButtonText: 'Abbrechen',
),
copied to clipboard
Subtitles #

Since version 1.1.0 flutter_video_controls supports subtitles. Here you can see how to use them.

You can provide an List<Subtitle> and customize your subtitles with the subtitleBuilder function.
Add subtitles to your ChewieController like the following example:
ChewieController(
videoPlayerController: _videoPlayerController,
autoPlay: true,
looping: true,
subtitle: Subtitles([
Subtitle(
index: 0,
start: Duration.zero,
end: const Duration(seconds: 10),
text: 'Hello from subtitles',
),
Subtitle(
index: 1,
start: const Duration(seconds: 10),
end: const Duration(seconds: 20),
text: 'Whats up? :)',
),
]),
subtitleBuilder: (context, subtitle) => Container(
padding: const EdgeInsets.all(10.0),
child: Text(
subtitle,
style: const TextStyle(color: Colors.white),
),
),
);
copied to clipboard
The index attribute is for if you want to structure your subtitles in your database and provide your indexes here. end and text are the key attributes.
The Duration defines which part of your video your subtitles should start and end. For example, if your video is 10 minutes long and you want to add a subtitle between: 00:00 and 00:10'th of a second:
Subtitle(
index: 0,
start: Duration.zero,
end: const Duration(seconds: 10),
text: 'Hello from subtitles',
),
copied to clipboard
Example #
Please run the app in the example/ folder to start playing!
Migrating from flutter_video_controls < 0.9.0 #
Instead of passing the VideoPlayerController and your options to the flutter_video_controls widget you now pass them to the ChewieController and pass that later to the flutter_video_controls widget.
final playerWidget = flutter_video_controls(
videoPlayerController,
autoPlay: true,
looping: true,
);
copied to clipboard
becomes
final ChewieController = ChewieController(
videoPlayerController: videoPlayerController,
autoPlay: true,
looping: true,
);

final playerWidget = flutter_video_controls(
controller: ChewieController,
);
copied to clipboard
Roadmap #

✅ MaterialUI
✅ MaterialDesktopUI
✅ CupertinoUI
✅ Options with translations
✅ Subtitles
✅ CustomControls
✅ Auto-Rotate on FullScreen depending on Source Aspect-Ratio
✅ Live-Stream and UI
✅ AutoPlay
✅ Placeholder
✅ Looping
✅ Start video at
✅ Custom Progress-Bar colors
✅ Custom Overlay
✅ Allow Sleep (Wakelock)
✅ Playbackspeed Control
✅ Custom Route-Pagebuilder
✅ Custom Device-Orientation and SystemOverlay before and after fullscreen
✅ Custom ErrorBuilder
❌ Support different resolutions of video
❌ Re-design State-Manager with Provider
❌ Screen-Mirroring / Casting (Google Chromecast)

iOS warning #
The video_player plugin used by flutter_video_controls will only work in iOS simulators if you are on flutter 1.26.0 or above. You may need to switch to the beta channel flutter channel beta
Please refer to this issue.
000000000000000KKKKKKKKKKKKXXXXXXXXXXXXXKKKKKKKKKKKKKKKKKKKKKKKKKKK00
000000000000000KKKKKKKKKKKKKXXXXXXXXXXKKKKKKKKKKKKKKKKKKKKKKKKKKKKK00
000000000000000KKKKKKKKKKKKKXXXXXXK0xdoddoclodxOKKKKKKKKKKKKKKKKKKK00
00000000000000KKKKKKKKKKKKKKKK0xoc:;;,;,,,,''';cldxO0KKKKKKKKKKKKK000
00000000000000KKKKKKKKKKKKKKx:'',,,'.,'...;,'''',;:clk0KKKKKKKKKKK000
00000000000000KKKKKKKKKKKKd;'',,,;;;'.,..,c;;,;;;;;:;;d0KKKKKKKKKK000
00000000000000KKKKKKKKKKx,',;:ccl;,c;';,,ol::coolc:;;,,x0KKKKKKKKK000
00000000000000KKKKKKKKOl;:;:clllll;;o;;;cooclddclllllc::kKKKKKKKKK000
00000000000000KKKKKK0o;:ccclccccooo:ooc:ddoddloddolc;;;:c0KKKKKKK0000
00000000000000KKKKKOccodolccclllooddddddxdxddxkkkkxxo;'';d0KKKKKK0000
00000000000000KKKKkcoddolllllclloodxxxxdddxdddxxxddool:'.;O0KKKKK0000
00000000000000000xloollcccc:cclclodkkxxxdddxxxkkxdlllolc,,x0KKKKK0000
0000000000000000xccllccccc:;,'',;:dxkxxddddxkkkxdollcc:cc;d0KKKKKK000
000000000000000kcc:::cllol:'......odxxdoccldxxxdollllc:;;:d0KKKKK0000
00000000000000klc;;;clcc::;'...';;;:cll..',cdddolccccccc;:x0KKKKK0000
0000000000000kdl;:cclllclllc::;,;.'.''o;,,'.;ccoooollllc:;x0KKKKK0000
000000000000kol;:;::coolcc:::,.....,..cd,....':lolclolllc;x0KKKK00000
00000000000Odl;:'cllol;''',;;;;::''.',:doc;,',::looc:lcol:x0K00000000
0000000000Oxl:c,:lolc,..',:clllollodoc;cllolccloolllcclollO0K00000000
0000000000xllc,:lool:'.,...o.;llxdo:loc;;ccodlolodldllolld00K0K000000
000000000Ooc::coooc,,.',;:lx,,...':;o;l;':o:oolccocdoldloO0000KK00000
00000000kol:clllc;;,.;::;:clllllolxc;.:c':ocldlccl;clldox000000000000
000000Odll:cccc;:;,';cllooodoollcloll;c:.:d:ooo;cl;oloddkO00000000000
0000OOddOdll;c,;;,,;;:cldodddoxdoodlcc:.,ox:o:lllocdlodx00O0000000000
000Oxdl:::ll,:,:;,';c,:oloddolkxddxolc.'coccocolcccoooc;oxO00KOOOO000
dc;,'...';c,,:c:::'c:';cldoo;:odolxoc:.,o:oldlxol;lddl,.,lkO0KdlcckKO
'.......,:''';cll:cc,,;:l:c,,;:oc;cdc,.;::dldoxd:ldol;,'..,:lo,,,,kOk
.......';'.',:clcll,,;:l:;'..''c:,;cl'.';dxoooxlddl;',''..,,;'...,ool
.......,,.'';;:cld;.;,do:..;:,':c',:c''';xxdldocol'..';,.......',;;,;
.......'..'',,coxc'';:do'.clc:lco',o;',;cOxdol:cc:.....'..oxd;','.'..
'.......''..,:cxl;';;cx:''cll:clc'cl',:l:ko:c..;c:..';...,KNNl;:;ll:'
.......''...;,ooc,,,:od'.':cccdd,,l''cl:co;;,..;;'..','..;d0O,;;:XXXK
............'cll;',,lo'.'.::codl,c..:c;doc.,:.',....'...'......'l0XKk
'............c;;,':lc.'',.;ccol;:,.:c.:o,;'.;'......,...',,.'...'.,;;
.............',;;,cc..;,'';:lc':;..c'.c:;.,......,'..'...'',:,,;;,...
..............',,;:'.';,',:c;.;;..';..,;,.........''..'...'kko.,,....
...............;,:'..;''';:,..;''.''..''............'...'.lK0c';;c;'.
...............,,'...,.',;''...''....,......'............'dOx',;:dd,'
..............',.....'.,;..'..',..........'..............';:;',,ldo.'
.............'''.'.....,'..',','..'...''..'............'.......,dx'.'
.......................,...';,'..'.....,.'.............''.'......'..'
...........'......'...',..'';,'..'.....................',';,..'....'.
copied to clipboard