Flutter VideoView

Language: 中文 | English

flutter_video_view is a video player for flutter. The video_player plugin gives low level access for the video playback.

Installation

Please move to step video_player for specific configuration.

⚠️ PS: There is no need to add video_player dependency to the pubspec.yaml file.

Preparing for use

Version constraints

  sdk: ">=3.2.3 <4.0.0"
  flutter: ">=3.16.6"

Rely

1. Add flutter_video_view to pubspec.yaml dependencies.

dependencies:
  flutter_video_view: ^latest_version

2. Get the package by executing the flutter command.

flutter pub get

3. Introduce

import 'package:flutter_video_view/flutter_video_view.dart';

Localized configuration

Add in MaterialApp.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        ...
        localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
            ...
            VideoViewLocalizationsDelegate.delegate,
        ],
        ...
    );
  }
}

Usage

import 'package:flutter_video_view/flutter_video_view.dart';

final VideoPlayerController videoPlayerController = VideoPlayerController.xxx();

final view = VideoView(
  controller: VideoViewController(
    videoPlayerController: videoPlayerController,
    videoViewConfig: VideoViewConfig(),
  ),
);

Popups are implemented by using VideoViewConfig.

Name	Type	Description	Default
width	double?	The width of video	MediaQuery.of(context).size.width
height	double?	The height of video	MediaQuery.of(context).size.height
backgroundColor	Color	The background color of video	Colors.black
tooltipBackgroundColor	Color	The background color of a widget that displays information about volume, brightness, speed, playback progress, and so on	Colors.black54
foregroundColor	Color	The color for the video's ButtonandText` widget descendants	Colors.white
textSize	double	Size of all texts	14
iconSize	double	Size of all icons	16
useSafe	bool	When it is at the top, whether to maintain a safe distance from the top	true
maxScale	double	The maximum allowed scale	2.5
minScale	double	The minimum allowed scale	0.8
panEnabled	bool	Whether or not to allow panning	false
scaleEnabled	bool	Whether or not to allow zooming	false
aspectRatio	double?	The Aspect Ratio of the Video	null
allowedScreenSleep	bool	Defines if the player will sleep in fullscreen or not	true
autoInitialize	bool	Initialize the Video on Startup. This will prep the video for playback	false
autoPlay	bool	Play the video as soon as it's displayed	false
startAt	Duration?	Where does the video start playing when it first plays	null
volume	double	The volume of the video, not the device volume	1.0
looping	bool	Whether the video is looped	false
overlay	PlaceholderBuilder?	A widget which is placed between the video and the controls	null
placeholderBuilder	PlaceholderBuilder?	Widgets in various initialized states	null
fullScreenByDefault	bool	Whether to play full screen when auto play is enabled, Valid only if [autoPlay] is true	false
useRootNavigator	bool	Defines if push/pop navigations use the rootNavigator	true
deviceOrientationsEnterFullScreen	List<DeviceOrientation>?	Defines the set of allowed device orientations on entering fullscreen	null
systemOverlaysExitFullScreen	List<SystemUiOverlay>	Defines the system overlays visible after exiting fullscreen	SystemUiOverlay.values
deviceOrientationsExitFullScreen	List<DeviceOrientation>	Defines the set of allowed device orientations after exiting fullscreen	DeviceOrientation.values
showControlsOnInitialize	bool	Whether controls are displayed when initializing the widget	true
showControls	FullScreenBuilder<bool>?	Whether to display controls	true
hideControlsTimer	Duration	Defines the [Duration] before the video controls are hidden	Duration(seconds: 3)
controlsType	ControlsType	Types of controls.	ControlsType.normal
showBuffering	bool	Whether to show placeholders in the buffer	true
bufferingBuilder	Widget?	The placeholder when buffered is displayed above the video	null
finishBuilder	FullScreenBuilder<Widget>?	Widget to display when video playback is complete	null
controlsBackgroundColor	List<Color>	The background color of the controller	[Color.fromRGBO(0, 0, 0, .7), Color.fromRGBO(0, 0, 0, .3), Color.fromRGBO(0, 0, 0, 0)]
showCenterPlay	bool	Whether to show the play button in the middle.	true
centerPlayButtonBuilder	CenterPlayButtonBuilder?	Play button in the middle.	null
canLongPress	bool	Whether the video can be played at double speed by long pressing	true
canChangeVolumeOrBrightness	bool	Whether the volume or brightness can be adjusted	true
canChangeProgress	bool	Whether the video progress can be adjusted	true
canBack	bool	Whether to show [BackButton].	true
canCloseOnBack	bool	Whether [BackButton] directly closes the video in full screen mode.	false
title	String?	The title of video	null
titleTextStyle	TextStyle?	The textStyle of [title]	null
topActionsBuilder	FullScreenBuilder<List<Widget>>?	Widgets placed at the top right	null
canShowLock	bool	Whether the lockable button is displayed	false
centerLeftActionsBuilder	CenterActionsBuilder?	Widgets on the middle left	null
centerRightActionsBuilder	CenterActionsBuilder?	Widgets on the middle right	null
bottomBuilder	BottomBuilder?	It is used to define the control buttons at the bottom and the layout of the display content.	null
onTextPosition	FullScreenBuilder<VideoTextPosition>?	Enumeration value where the progress information is located on the progress bar	null
onProgressBarGap	FullScreenBuilder<double>?	The interval width of the progress bar and time information widget.	10
videoProgressBarColors	VideoProgressBarColors?	The default colors used throughout the indicator	null
maxPreviewTime	Duration?	Maximum preview duration.	null
maxPreviewTimeBuilder	FullScreenBuilder<Widget>?	The widget displayed when the maximum preview duration is reached.	null

If you like my project, please in the upper right corner of the project "Star". Your support is my biggest encouragement! ^_^