I'm using a plugin called video_player on my Flutter project. I'm able to play and pause videos without a problem, but I want to make it fullscreen and horizontal. I couldn't find anything related to this.
This is the basic code I'm using:
playerController = VideoPlayerController.network(
"<VIDEO_URL>")
..addListener(listener)
..setVolume(1.0)
..initialize()
..play();
Can I make it fullscreen?
As far as I understand, the VideoPlayer doesn't know anything about where it is, but rather just expands to fit within the given space the best it can.
I believe what you want to do is use a RotatedBox as a parent of the video and set the rotation value. Depending on how exactly your app works, you may want to have the video player start horizontal and small, and have a full screen button that switches to landscape mode. However, if the app itself is set up to rotate you'll have to take that into account and un-rotate the video once the phone has been rotated horizontally, which will probably result in uglyness in the UI as the flutter rotation happens and you un-rotate the video.
You probably also want to use a dialog to show the video full-screen so that you can dismiss it and get back to the screen you were at.
I could probably provide a bit more guidance but it does depend on which way you go with that (either locking the app to portrait mode and doing the rotation manually) vs using flutter's built-in rotation.
I have another situation for this question, that's use Chewie plugin, you can install it right here: https://pub.dev/packages/chewie And this is the code that I implemented it:
VideoPlayerController _videoPlayerController;
ChewieController _chewieController;
double _aspectRatio = 16 / 9;
@override
initState() {
super.initState();
print(widget.videoUrl);
_videoPlayerController = VideoPlayerController.network(widget.videoUrl);
_chewieController = ChewieController(
allowedScreenSleep: false,
allowFullScreen: true,
deviceOrientationsAfterFullScreen: [
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
],
videoPlayerController: _videoPlayerController,
aspectRatio: _aspectRatio,
autoInitialize: true,
autoPlay: true,
showControls: true,
);
_chewieController.addListener(() {
if (_chewieController.isFullScreen) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
} else {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}
});
}
Remember restore orientation of the device after exit page:
@override
void dispose() {
_videoPlayerController.dispose();
_chewieController.dispose();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
child: Chewie(
controller: _chewieController,
),
),
),
);
}
Even tho this is a late answer figured it might help someone,
I have found flick_video_player to be one of the best video players out there.
You can simply enter to full screen using the predefined method, using the controller.
_activeManager!.flickControlManager!.enterFullscreen();
and to exit from the fullscreen player
_activeManager!.flickControlManager!.exitFullscreen();
You can get examples here
I have created a function which will play video in fullscreen
import 'package:flutter/services.dart';
.
.
void pushFullScreenVideo() {
//This will help to hide the status bar and bottom bar of Mobile
//also helps you to set preferred device orientations like landscape
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
SystemChrome.setEnabledSystemUIOverlays([]);
SystemChrome.setPreferredOrientations(
[
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
],
);
//This will help you to push fullscreen view of video player on top of current page
Navigator.of(navigatorKey.currentContext)
.push(
PageRouteBuilder(
opaque: false,
settings: RouteSettings(),
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return Scaffold(
backgroundColor: Colors.transparent,
resizeToAvoidBottomPadding: false,
body: Dismissible(
key: const Key('key'),
direction: DismissDirection.vertical,
onDismissed: (_) => Navigator.of(context).pop(),
child: OrientationBuilder(
builder: (context, orientation) {
isPortrait = orientation == Orientation.portrait;
return Center(
child: Stack(
//This will help to expand video in Horizontal mode till last pixel of screen
fit: isPortrait ? StackFit.loose : StackFit.expand,
children: [
AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller),
),
],
),
);
},
);
},
),
)
.then(
(value) {
//This will help you to set previous Device orientations of screen so App will continue for portrait mode
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
SystemChrome.setPreferredOrientations(
[
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
],
);
},
);
}
In order for it to work in iOS you should add the following change in ios/Runner/Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
