Flutter全屏视频播放功能完整实现教程

在Flutter中实现全屏视频播放功能时遇到几个问题：1）使用chewie和video_player插件时，如何正确处理横竖屏切换？2）全屏模式下如何隐藏状态栏和导航栏？3）视频加载较慢时如何添加缓冲动画？4）有没有办法在退出全屏时记住之前的播放进度？5）在Android和iOS上全屏控制的实现方式是否有差异？希望有经验的开发者能分享完整的实现方案和注意事项。

3 回复

首先在pubspec.yaml中添加video_player依赖。

dependencies:
  video_player: ^2.4.5

接着创建一个VideoPlayerWidget：

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

class VideoPlayerWidget extends StatefulWidget {
  final String videoUrl;

  const VideoPlayerWidget({Key? key, required this.videoUrl}) : super(key: key);

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

使用时传入视频链接即可实现全屏播放。注意处理视频加载状态和生命周期管理。

更多关于Flutter全屏视频播放功能完整实现教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下为实现Flutter全屏视频播放功能的简单教程：

  1. 添加依赖：
dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.0
  fullscreen: ^1.0.1
  1. 初始化VideoPlayerController
final VideoPlayerController _controller = VideoPlayerController.network(
  'https://www.example.com/yourvideo.mp4',
)..initialize().then((_) {
  setState(() {});
});
  1. 构建UI
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: _controller.value.isInitialized
          ? GestureDetector(
              onTap: () => FullScreen.enterFullScreen(),
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            )
          : CircularProgressIndicator(),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}
  1. 全屏切换监听
@override
void dispose() {
  super.dispose();
  _controller.dispose();
  FullScreen.setEnableFullScreen(false);
}

通过以上步骤即可完成基本的全屏视频播放功能。注意处理好生命周期和资源释放。

Flutter全屏视频播放实现教程

要在Flutter中实现全屏视频播放功能，可以使用video_player和chewie这两个插件组合。下面是一个完整实现方案：

1. 添加依赖

在pubspec.yaml中添加：

dependencies:
  video_player: ^2.8.0
  chewie: ^1.4.0

2. 基本实现代码

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

class FullScreenVideoPlayer extends StatefulWidget {
  final String videoUrl;

  const FullScreenVideoPlayer({super.key, required this.videoUrl});

  @override
  State<FullScreenVideoPlayer> createState() => _FullScreenVideoPlayerState();
}

class _FullScreenVideoPlayerState extends State<FullScreenVideoPlayer> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _initializePlayer();
  }

  Future<void> _initializePlayer() async {
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    await _videoPlayerController.initialize();
    
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
      allowFullScreen: true,
      fullScreenByDefault: true,  // 默认全屏
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,
        handleColor: Colors.red,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.lightGreen,
      ),
      placeholder: Container(
        color: Colors.black,
      ),
    );
    
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: _chewieController.videoPlayerController.value.isInitialized
            ? Chewie(controller: _chewieController)
            : const CircularProgressIndicator(),
      ),
    );
  }

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

3. 使用方法

// 在其他页面调用
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => FullScreenVideoPlayer(
      videoUrl: 'https://example.com/video.mp4',
    ),
  ),
);

4. 功能说明

  1. video_player提供基础视频播放能力
  2. chewie提供了美观的UI控件和全屏功能
  3. 默认进入即为全屏模式
  4. 包含播放进度条、播放/暂停按钮、全屏切换等控件
  5. 正确处理了资源释放

你可以根据需要调整ChewieController的参数来改变播放器的行为和外观。

回到顶部