Flutter - video_player 全屏
Flutter - video_player fullscreen
我在我的 Flutter 项目中使用了一个名为 video_player 的插件。我可以毫无问题地播放和暂停视频,但我想让它全屏和水平播放。我找不到与此相关的任何内容。
这是我使用的基本代码:
playerController = VideoPlayerController.network(
"<VIDEO_URL>")
..addListener(listener)
..setVolume(1.0)
..initialize()
..play();
我可以全屏吗?
据我所知,VideoPlayer 并不知道它的位置,只是尽可能地扩展以适应给定的 space。
我相信您想做的是使用 RotatedBox
作为视频的父级并设置旋转值。根据您的应用程序的具体工作方式,您可能希望视频播放器以水平和小尺寸开始,并有一个切换到横向模式的全屏按钮。但是,如果应用程序本身设置为旋转,您必须考虑到这一点,并在 phone 水平旋转后取消旋转视频,这可能会导致 UI 当抖动旋转发生时,您取消旋转视频。
您可能还想使用一个对话框来全屏显示视频,以便您可以关闭它并返回到您所在的屏幕。
我可能会提供更多指导,但这取决于您使用哪种方式(将应用程序锁定为纵向模式并手动进行旋转)与使用 flutter 的内置旋转。
这个问题我有另一种情况,那就是使用Chewie插件,你可以在这里安装它:
https://pub.dev/packages/chewie
这是我实现它的代码:
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,
]);
}
});
}
记得在退出页面后恢复设备的方向:
@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,
),
),
),
);
}
为了使其在 iOS 中工作,您应该在 ios/Runner/Info.plist
中添加以下更改:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
我创建了一个可以全屏播放视频的函数
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,
],
);
},
);
}
我在我的 Flutter 项目中使用了一个名为 video_player 的插件。我可以毫无问题地播放和暂停视频,但我想让它全屏和水平播放。我找不到与此相关的任何内容。
这是我使用的基本代码:
playerController = VideoPlayerController.network(
"<VIDEO_URL>")
..addListener(listener)
..setVolume(1.0)
..initialize()
..play();
我可以全屏吗?
据我所知,VideoPlayer 并不知道它的位置,只是尽可能地扩展以适应给定的 space。
我相信您想做的是使用 RotatedBox
作为视频的父级并设置旋转值。根据您的应用程序的具体工作方式,您可能希望视频播放器以水平和小尺寸开始,并有一个切换到横向模式的全屏按钮。但是,如果应用程序本身设置为旋转,您必须考虑到这一点,并在 phone 水平旋转后取消旋转视频,这可能会导致 UI 当抖动旋转发生时,您取消旋转视频。
您可能还想使用一个对话框来全屏显示视频,以便您可以关闭它并返回到您所在的屏幕。
我可能会提供更多指导,但这取决于您使用哪种方式(将应用程序锁定为纵向模式并手动进行旋转)与使用 flutter 的内置旋转。
这个问题我有另一种情况,那就是使用Chewie插件,你可以在这里安装它: https://pub.dev/packages/chewie 这是我实现它的代码:
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,
]);
}
});
}
记得在退出页面后恢复设备的方向:
@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,
),
),
),
);
}
为了使其在 iOS 中工作,您应该在 ios/Runner/Info.plist
中添加以下更改:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
我创建了一个可以全屏播放视频的函数
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,
],
);
},
);
}