flutter如何实现videoplayer全屏播放

在Flutter中，如何实现VideoPlayer全屏播放功能？目前使用video_player插件播放视频时，只能在小窗口展示。想实现点击全屏按钮后，视频能横屏充满整个屏幕，退出全屏时恢复原状。有没有完整的代码示例或实现思路？需要注意哪些细节，比如横竖屏切换、状态栏隐藏等问题？

2 回复

使用Flutter实现VideoPlayer全屏播放，可通过以下步骤：

  1. 使用video_player插件加载视频。
  2. 监听设备方向变化，使用OrientationBuilder或SystemChrome.setPreferredOrientations切换横屏。
  3. 通过Transform.rotate或调整AspectRatio适配全屏布局。
  4. 添加全屏按钮，点击时切换界面和方向。

示例代码可参考官方video_player插件文档。

更多关于flutter如何实现videoplayer全屏播放的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现 VideoPlayer 全屏播放，可以通过以下步骤完成：

  1. 添加依赖：在 pubspec.yaml 中添加 video_player 和 chewie（推荐使用 Chewie 简化控制）。

    dependencies:
  video_player: ^2.8.2
  chewie: ^1.5.2

  2. 基本实现：

    • 使用 VideoPlayerController 初始化视频。
    • 用 ChewieController 包装，设置参数如 autoPlay、looping 和 allowFullScreen。
    • 通过 Chewie 组件显示播放器。

  3. 全屏切换：

    • Chewie 内置全屏按钮，点击自动切换。
    • 如需自定义逻辑，监听方向变化或按钮事件，使用 SystemChrome.setPreferredOrientations 和 Navigator.push 进入全屏页面。

示例代码：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(
        'https://example.com/sample.mp4');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
      allowFullScreen: true, // 启用全屏
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Chewie(controller: _chewieController),
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }
}

注意事项：

  • 确保处理设备方向权限（在 AndroidManifest.xml 和 Info.plist 中配置）。
  • 使用 dispose 方法释放资源，避免内存泄漏。
  • 测试网络视频需检查 URL 有效性。

通过 Chewie，全屏功能可自动处理，简化开发流程。

回到顶部