flutter video_player(或chewie)在横向模式下进入全屏,如youtube

wfauudbj  于 2023-05-23  发布在  Flutter
关注(0)|答案(2)|浏览(815)

我需要一个视频播放器,进入全屏时,设备旋转到横向模式和回来。就像YouTube和Udemy等应用程序中的视频播放器一样。我正在使用chewie,有一个开放的问题,关于它在https://github.com/brianegan/chewie/issues/15从那,我发现这个解决方案https://gist.github.com/ihrankouski/0a353a8de649b648b3ceff0d8e97f1d7有一个问题,它不会回到正常的位置在肖像模式。
另外,在chewie示例中还有一个文件
https://github.com/brianegan/chewie/blob/master/example/lib/auto_rotate.dart这样做(也许。我不知道代码是什么),但不工作时,我尝试。这有什么问题吗?如果是的话,问题是什么?
是否有另一个库具有此功能,如果是,如何使用该库完成此操作。

5lwkijsr

5lwkijsr1#

关于全屏,你可以把它作为一个参数添加到你的ChewieController中

_chewieController = ChewieController(
  _videoPlayerController: videoPlayerController,
  fullScreenByDefault: true);

关于方向,您可以在initiState()中设置

import 'package:flutter/services.dart';

  @override
  void initState() {
    super.initState();
    initializePlayer();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
    ]);
  }
i7uq4tfw

i7uq4tfw2#

在Youtube Johannes Milke的视频video link的帮助下,我设法让这个工作为我的目的。也发布在chewie的github here上。他的方法是这样的:
首先,将native_device_orientation包添加到依赖项中。然后,在初始化ChewieController的initstate中,监听用户请求的方向变化,由智能手机的传感器检测到(因此,useSensor: true标志在这里至关重要)。如果现在传感器检测到,用户想要在肖像模式,但Chewie播放器目前处于全屏模式,您命令小部件返回到SystemChrome.setPreferredOrientations(DeviceOrientation.values);,所以到当前感测到的手机方向.它被设置为值-所以所有可能的方向-不强迫手机在纵向方向,这可能会阻止你的应用进入横向模式在任何其他页面。你也可以调用_chewieController.exitFullScreen();,这样Chewie就知道发生了什么。
然后,我也涵盖相反的情况下,所以手机想是在肖像,但chewieController是在全屏。这就是代码:

NativeDeviceOrientationCommunicator()
            .onOrientationChanged(useSensor: true)
            .listen((event) {
          final bool isPortrait = (event == NativeDeviceOrientation.portraitUp ||
              event == NativeDeviceOrientation.portraitUp);
          final bool isLandscape =
              (event == NativeDeviceOrientation.landscapeLeft ||
                  event == NativeDeviceOrientation.landscapeRight);
    
          if (isPortrait && _chewieController.isFullScreen) {
        _chewieController.exitFullScreen();
        SystemChrome.setPreferredOrientations(DeviceOrientation.values);
          } else if (isLandscape && !_chewieController.isFullScreen) {
        _chewieController.enterFullScreen();
        SystemChrome.setPreferredOrientations(DeviceOrientation.values);  
          }
        });

另外,我在我的ChewieController中添加了以下内容:

deviceOrientationsAfterFullScreen: [
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]

最后但并非最不重要的是,我在Chewie小部件上方添加了一个WillPopScope,这保证了我的应用程序不会陷入任何旋转,即使用户点击Android上的“返回”按钮。就像这样:

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        await SystemChrome.setPreferredOrientations(DeviceOrientation.values);
        return true;
      },
      child: AspectRatio(
        aspectRatio: aspectRatio,
        child: Chewie(
          controller: _chewieController,
        ),
      ),
    );
  }

如果我错了,请纠正我,但到目前为止,这对我来说很好!

相关问题