开发者社区> 问答> 正文

flutter_aliplayer这个插件怎么横屏播放啊?

flutter_aliplayer设置横屏之后视频会从头开始播放

展开
收起
努力的人呐 2023-07-10 22:22:31 299 1
5 条回答
写回答
取消 提交回答
  • 要在Flutter中使用flutter_aliplayer插件实现横屏播放,您可以按照以下步骤进行设置:

    1. 配置屏幕方向支持:在您的Flutter项目中,打开android/app/src/main/AndroidManifest.xml文件,并添加以下代码,以支持横屏方向:
    <activity
      android:name="io.flutter.embedding.android.FlutterActivity"
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
      android:hardwareAccelerated="true"
      android:windowSoftInputMode="adjustResize">
    
    1. 使用OrientationBuilder控制屏幕方向:在您的Flutter页面中,使用OrientationBuilder小部件来包裹AliPlayerView,并根据需要进行横屏或竖屏播放。
    import 'package:flutter/material.dart';
    import 'package:flutter_aliplayer/flutter_aliplayer.dart';
    
    class VideoPlayerPage extends StatelessWidget {
      
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Video Player'),
          ),
          body: OrientationBuilder(
            builder: (context, orientation) {
              return Center(
                child: Container(
                  height:
                      orientation == Orientation.landscape ? double.infinity : 300,
                  child: AliPlayerView(
                    onCreated: (controller) {
                      // 初始化播放器控制器
                    },
                    // 设置其他属性和回调
                  ),
                ),
              );
            },
          ),
        );
      }
    }
    
    1. 处理横屏和竖屏切换:根据您的需求,在AliPlayerView的回调函数中处理横屏和竖屏切换事件,例如,当用户点击全屏按钮时,触发屏幕方向变更。
    class VideoPlayerPage extends StatelessWidget {
      bool isFullScreen = false;
    
      
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Video Player'),
          ),
          body: OrientationBuilder(
            builder: (context, orientation) {
              return Center(
                child: Container(
                  height:
                      orientation == Orientation.landscape || isFullScreen ? double.infinity : 300,
                  child: AliPlayerView(
                    onCreated: (controller) {
                      // 初始化播放器控制器
    
                      controller.onFullScreenChange = (isFullScreen) {
                        // 处理横屏和竖屏切换事件
                        this.isFullScreen = isFullScreen;
                        if (isFullScreen) {
                          SystemChrome.setPreferredOrientations([
                            DeviceOrientation.landscapeLeft,
                            DeviceOrientation.landscapeRight,
                          ]);
                        } else {
                          SystemChrome.setPreferredOrientations([
                            DeviceOrientation.portraitUp,
                            DeviceOrientation.portraitDown,
                          ]);
                        }
                      };
                    },
                    // 设置其他属性和回调
                  ),
                ),
              );
            },
          ),
        );
      }
    }
    

    通过以上步骤,您可以使用flutter_aliplayer插件在Flutter中实现横屏播放。

    2023-07-11 13:45:56
    赞同 展开评论 打赏
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    要在Flutter中使用flutter_aliplayer插件实现横屏播放,您可以按照以下步骤进行操作:

    1. 确保已经在项目的pubspec.yaml文件中添加了flutter_aliplayer插件的依赖,并运行了flutter pub get命令来获取插件。

    2. 在需要播放视频的页面中,导入flutter_aliplayer插件的库文件:

      import 'package:flutter_aliplayer/flutter_aliplayer.dart';
      
    3. 创建一个AliPlayerView小部件,并设置其属性。例如,您可以将其包装在Container小部件内以设定播放器的宽度和高度,并为其指定一个controller

      Container(
      width: double.infinity,
      height: 200,
      child: AliPlayerView(
       onCreated: (controller) {
         // 在这里可以访问到播放器的控制器
         // 可以通过控制器进行播放、暂停等操作
         // 例如 controller.start() 开始播放
       },
      ),
      )
      
    4. 在需要切换到横屏播放时,可以调用以下方法:

      SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
      SystemChrome.setEnabledSystemUIOverlays([]);
      

      这将设置应用程序的方向为横屏模式,并隐藏系统UI(如状态栏和底部导航栏)。

    5. 为了确保在退出横屏播放后恢复到竖屏模式,可以在适当的位置调用以下方法:

      SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
      SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
      

      这将设置应用程序的方向为竖屏模式,并恢复系统UI的可见性。

    2023-07-11 13:29:38
    赞同 展开评论 打赏
  • 值得去的地方都没有捷径

    在Flutter中,使用flutter_aliplayer插件实现视频播放时,切换到横屏模式可能会导致视频从头开始播放的问题。这是因为切换屏幕方向会触发页面重建,导致flutter_aliplayer重新初始化,从而导致视频重新加载。

    为了解决这个问题,你可以尝试以下方法:

    1. 使用WillPopScope来阻止页面重建:在切换到横屏模式时,可以使用WillPopScope组件来阻止页面重建。通过这种方式,即使屏幕方向改变,页面也不会被销毁和重建,从而避免视频重新加载。示例代码如下:
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class VideoPlayerScreen extends StatefulWidget {
      
      _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
    }
    
    class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
      
      Widget build(BuildContext context) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.landscapeRight,
        ]);
    
        return WillPopScope(
          onWillPop: () async {
            SystemChrome.setPreferredOrientations([
              DeviceOrientation.portraitUp,
              DeviceOrientation.portraitDown,
            ]);
            return true;
          },
          child: Scaffold(
            // Your video player widget here
          ),
        );
      }
    }
    
    1. 使用OrientationBuilder监听屏幕方向变化:另一种方法是使用OrientationBuilder组件来监听屏幕方向的变化,并在方向变化时更新视频播放器的状态,以保持视频的播放进度。示例代码如下:
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class VideoPlayerScreen extends StatefulWidget {
      
      _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
    }
    
    class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
      Orientation _orientation;
    
      
      void initState() {
        super.initState();
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.landscapeRight,
        ]);
      }
    
      
      void dispose() {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]);
        super.dispose();
      }
    
      
      Widget build(BuildContext context) {
        return Scaffold(
          body: OrientationBuilder(
            builder: (BuildContext context, Orientation orientation) {
              _orientation = orientation;
              // Your video player widget here
            },
          ),
        );
      }
    
      
      void didUpdateWidget(covariant VideoPlayerScreen oldWidget) {
        super.didUpdateWidget(oldWidget);
        if (_orientation != null &&
            MediaQuery.of(context).orientation != _orientation) {
          SystemChrome.setPreferredOrientations([
            DeviceOrientation.landscapeLeft,
            DeviceOrientation.landscapeRight,
          ]);
        }
      }
    }
    

    请注意,上述代码仅提供了一种思路,具体的实现方式可能需要根据你的项目结构和需求进行调整。希望这些信息对你有帮助。如有任何进一步的问题,请随时提问。

    2023-07-11 12:56:48
    赞同 展开评论 打赏
  • 就是我在竖屏播放的情况下、点击全屏按钮后设置为横屏播放、然后播放器会重新加载视频、这个问题有什么比较好的解决办法吗···

    2023-07-11 10:30:29
    赞同 展开评论 打赏
  • 北京阿里云ACE会长

    在您的Flutter项目中添加flutter_aliplayer插件,并按照插件文档中的说明进行初始化设置。

    设置屏幕方向,使其支持横屏模式。可以在您的Flutter项目的Android或iOS原生代码中设置屏幕方向。如果您使用的是Flutter的官方工具集,则可以在main.dart中添加以下代码以设置屏幕方向:

    dart
    Copy
    import 'package:flutter/services.dart';

    void main() {
    SystemChrome.setPreferredOrientations(
    [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
    runApp(MyApp());
    }
    在flutter_aliplayer插件中调用setScreenOrientation方法,以适应横屏播放。您可以在flutter_aliplayer插件的播放页面中添加以下代码,以设置屏幕方向:
    dart
    Copy
    import 'package:flutter_aliplayer/flutter_aliplayer.dart';

    FlutterAliplayer flutterAliplayer = FlutterAliplayer();

    // 横屏模式
    flutterAliplayer.setScreenOrientation(FullScreen);
    在播放器开始播放之前,可以在flutter_aliplayer插件中设置videoStartCallback回调函数,以在横屏模式下启动播放器。
    dart
    Copy
    flutterAliplayer.videoStartCallback = () {
    // 横屏模式下启动播放器
    flutterAliplayer.setScreenOrientation(FullScreen);
    flutterAliplayer.start();
    };

    2023-07-11 07:51:35
    赞同 展开评论 打赏
问答分类:
CDN
问答标签:
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
基于flutter的产品应用实践 立即下载
《Flutter in action》 立即下载
闲鱼《Flutter 技术解析与实战》 立即下载