Custom Video Player
This package wraps the official video_player package by flutter and extends it with a fully customisable control bar, a fullscreen mode and adjustable video settings. For every control in this video player you can decide if you want to show it and if so how it should look.
class _MyHomePageState extends State<MyHomePage> {
late VideoPlayerController videoPlayerController;
late CustomVideoPlayerController _customVideoPlayerController;
String videoUrl =
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
@override
void initState() {
super.initState();
videoPlayerController = VideoPlayerController.network(videoUrl)
..initialize().then((value) => setState(() {}));
_customVideoPlayerController = CustomVideoPlayerController(
context: context,
videoPlayerController: videoPlayerController,
);
}
@override
void dispose() {
_customVideoPlayerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text(widget.title),
),
child: SafeArea(
child: CustomVideoPlayer(
customVideoPlayerController: _customVideoPlayerController
),
),
);
}
}
Run this command:
With Flutter:
$ flutter pub add appinio_video_player
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
appinio_video_player: ^1.2.1
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:appinio_video_player/appinio_video_player.dart';
import 'package:appinio_video_player/appinio_video_player.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
debugShowCheckedModeBanner: false,
theme: CupertinoThemeData(
brightness: Brightness.light,
),
title: 'Appinio Video Player Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late VideoPlayerController _videoPlayerController,
_videoPlayerController2,
_videoPlayerController3;
late CustomVideoPlayerController _customVideoPlayerController;
late CustomVideoPlayerWebController _customVideoPlayerWebController;
final CustomVideoPlayerSettings _customVideoPlayerSettings =
const CustomVideoPlayerSettings();
final CustomVideoPlayerWebSettings _customVideoPlayerWebSettings =
CustomVideoPlayerWebSettings(
src: longVideo,
);
@override
void initState() {
super.initState();
_videoPlayerController = VideoPlayerController.network(
longVideo,
)..initialize().then((value) => setState(() {}));
_videoPlayerController2 = VideoPlayerController.network(video240);
_videoPlayerController3 = VideoPlayerController.network(video480);
_customVideoPlayerController = CustomVideoPlayerController(
context: context,
videoPlayerController: _videoPlayerController,
customVideoPlayerSettings: _customVideoPlayerSettings,
additionalVideoSources: {
"240p": _videoPlayerController2,
"480p": _videoPlayerController3,
"720p": _videoPlayerController,
},
);
_customVideoPlayerWebController = CustomVideoPlayerWebController(
webVideoPlayerSettings: _customVideoPlayerWebSettings,
);
}
@override
void dispose() {
_customVideoPlayerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text("Appinio Video Player"),
),
child: SafeArea(
child: ListView(
children: [
kIsWeb
? Expanded(
child: CustomVideoPlayerWeb(
customVideoPlayerWebController:
_customVideoPlayerWebController,
),
)
: CustomVideoPlayer(
customVideoPlayerController: _customVideoPlayerController,
),
CupertinoButton(
child: const Text("Play Fullscreen"),
onPressed: () {
if (kIsWeb) {
_customVideoPlayerWebController.setFullscreen(true);
_customVideoPlayerWebController.play();
} else {
_customVideoPlayerController.setFullscreen(true);
_customVideoPlayerController.videoPlayerController.play();
}
},
),
],
),
),
);
}
}
String videoUrlLandscape =
"https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4";
String videoUrlPortrait =
'https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4';
String longVideo =
"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
String video720 =
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4";
String video480 =
"https://www.sample-videos.com/video123/mp4/480/big_buck_bunny_480p_10mb.mp4";
String video240 =
"https://www.sample-videos.com/video123/mp4/240/big_buck_bunny_240p_10mb.mp4";
Download details:
Author: appinio.app
Source: https://github.com/appinioGmbH/flutter_packages