video_player_controls 2.1.6 video_player_controls: ^2.1.6 copied to clipboard
Video player controls is a flutter video player package with more custom user interface and state management via flutter bloc
video_player_controls #
Video player controls is a flutter Video player package with more customizable user interface and state management via Flutter bloc.
Installation #
dependencies:
flutter:
sdk: flutter
video_player_controls:
Screenshot #
Features #
- Able to play a list of videos from the first to the last.
- Play and pause button
- Ability to enable and disable vtt subtitles
- Next and Previous button
- Fast rewind and fast forward buttons
- Flutter_bloc state management
- Ability to listen to player state, isPlaying, through a simple interface, which returns with true if the video is playing, else false
isPlaying: (isPlaying) {
//
print(isPlaying);
},
- Ability to listen to the playing player item, see it's position, duration, and the other specified properties
- Allow video player to play in fullscreen mode (optional)
- Allow the video player to toggle full screen mode
playerItem: (playerItem) {
print('Player title: ' + playerItem.title); // specified title of the video
print('position: ' + playerItem.position.inSeconds.toString()); // current position of the video
print('Duration: ' + playerItem.duration.inSeconds.toString()); // Duration of the playing video
});
- Callback when the final player item plays
videosCompleted: (isCompleted) {
print(isCompleted);
});
- Added android tv controls
- Listen to D-Pad media controls
Documentation #
Import the controller #
import 'package:video_player_controls/video_player_controls.dart';
Initialize the Controller #
controller = new Controller(
items: [
new PlayerItem(
title: 'video 1',
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
),
new PlayerItem(
startAt: Duration(seconds: 2),
title: 'video 2',
aspectRatio: 16 / 4,
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
),
new PlayerItem(
title: 'video 3',
aspectRatio: 16 / 9,
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
),
],
autoPlay: true,
errorBuilder: (context, message) {
return new Container(
child: new Text(message),
);
},
// index: 2,
autoInitialize: true,
// isLooping: false,
allowedScreenSleep: true,
// showControls: false,
// hasSubtitles: true,
// isLive: true,
// showSeekButtons: false,
// showSkipButtons: false,
// allowFullScreen: false,
fullScreenByDefault: false,
// placeholder: new Container(
// color: Colors.grey,
// ),
isPlaying: (isPlaying) {
//
// print(isPlaying);
},
playerItem: (playerItem) {
// print('Player title: ' + playerItem.title);
// print('position: ' + playerItem.position.inSeconds.toString());
// print('Duration: ' + playerItem.duration.inSeconds.toString());
},
videosCompleted: (isCompleted) {
print(isCompleted);
},
);
The video source property of the Controller class is an enum datatype which cao either be:
// use a network video
VideoSource.NETWORK
or
// use an asset video
VideoSource.ASSET
Example in code #
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player_controls/video_player_controls.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.select):
const Intent(ActivateAction.key)
},
child: MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
accentColor: Colors.redAccent,
),
home: new HomePage()));
}
}
class HomePage extends StatefulWidget {
HomePage({this.title = 'Video player controls'});
final String title;
@override
State<StatefulWidget> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Controller controller;
@override
void initState() {
super.initState();
controller = new Controller(
items: [
new PlayerItem(
title: 'video 1',
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
),
new PlayerItem(
startAt: Duration(seconds: 2),
title: 'video 2',
aspectRatio: 16 / 4,
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
),
new PlayerItem(
title: 'video 3',
aspectRatio: 16 / 9,
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
),
],
autoPlay: true,
errorBuilder: (context, message) {
return new Container(
child: new Text(message),
);
},
// index: 2,
autoInitialize: true,
// isLooping: false,
allowedScreenSleep: true,
// showControls: false,
// hasSubtitles: true,
// isLive: true,
// showSeekButtons: false,
// showSkipButtons: false,
// allowFullScreen: false,
fullScreenByDefault: false,
// placeholder: new Container(
// color: Colors.grey,
// ),
isPlaying: (isPlaying) {
//
// print(isPlaying);
},
playerItem: (playerItem) {
// print('Player title: ' + playerItem.title);
// print('position: ' + playerItem.position.inSeconds.toString());
// print('Duration: ' + playerItem.duration.inSeconds.toString());
},
videosCompleted: (isCompleted) {
print(isCompleted);
},
);
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: VideoPlayerControls(
controller: controller,
),
),
);
}
}
Getting Started with flutter #
This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.