Flutter - video_player 全屏

Question

我在我的Flutter项目中使用了一个名为video_player的插件。我可以播放和暂停视频，但我想要将其全屏和横向显示。我找不到相关的内容。

这是我正在使用的基本代码：

playerController = VideoPlayerController.network(
          "<VIDEO_URL>")
        ..addListener(listener)
        ..setVolume(1.0)
        ..initialize()
        ..play();

我能把它变成全屏吗？

- Notheros

Answer 1

据我所知，VideoPlayer并不知道它在哪里，而只是尽可能地在给定的空间内扩展以适应最佳空间。

我认为你想做的是使用RotatedBox作为视频的父级并设置旋转值。根据你的应用程序如何工作，你可能希望视频播放器开始时处于水平和小的状态，并具有全屏按钮，可以切换到横向模式。但是，如果应用程序本身被设置为旋转，你将必须考虑到这一点，在手机水平旋转后取消视频的旋转，这可能会导致flutter旋转发生，你取消视频的旋转时界面变得丑陋。

您可能还想使用对话框来显示全屏视频，以便您可以将其解除，返回到之前的屏幕。

我可能可以提供更多指导，但这取决于你选择的方式（锁定应用程序为纵向模式并手动旋转）与使用Flutter内置旋转。

- rmtmckenzie

---

很好的答案。我会研究一下RotatedBox。我会将我的应用锁定为竖屏模式，所以我认为这是一个很好的解决方案。感谢你的回答rmtmckenzie。 - Notheros

你很厉害。 - SardorbekR

Answer 2

我对这个问题有另一种解决方案，使用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,
          ),
        ),
      ),
    );
  }

- Nhật Trần

---

我尝试了这个解决方案，但在iOS上对我无效。 - Shangari C

这对我来说是完美的解决方案，因为进入全屏模式后，我的Android应用程序允许在退出全屏模式后旋转应用程序，尽管在清单文件中仅设置为纵向。遵循此解决方案为我解决了这个问题。谢谢。 - Munes

如果你有任何问题，只需问我！ - Nhật Trần

很高兴设备方向在全屏之前和之后对你们有所帮助:D 我会在 Chewie 中改进一切！它会变得更好！ - Rebar

这似乎不再起作用了，至少在 Chewie 1.2.2 中，当设备旋转到横向时，全屏模式不会被激活。 - schneida

Answer 3

尽管这是一个晚回答，但我想它可能会对某些人有所帮助，

我发现 flick_video_player 是最好的视频播放器之一。

您可以使用控制器预定义的方法轻松进入全屏模式。

 _activeManager!.flickControlManager!.enterFullscreen();

退出全屏播放器

 _activeManager!.flickControlManager!.exitFullscreen();

您可以在这里获取示例

Flick 视频播放器示例

- Abel Tilahun

Answer 4

我已经创建了一个函数，它可以在全屏模式下播放视频。

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,
      ],
    );
  },
);
}

- Nandakishor Dhanaji Valakunde

---

这会在同一页上播放视频吗？ - Nikhil Jain

当您按下返回按钮时，它将恢复为原始状态。 - Nandakishor Dhanaji Valakunde

Answer 5

为了使其在iOS上正常工作，您应该在ios/Runner/Info.plist中添加以下更改：

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

- Luiz Velloso