Flutter中自定义播放、暂停等方法实现视频播放控制

完全可以实现你要的效果——只用负责视频显示的Widget，自己封装播放、暂停、停止的自定义方法。核心思路是把video_player包的VideoPlayer（仅负责渲染视频）和VideoPlayerController（控制播放状态）解耦，通过自定义组件封装Controller的操作逻辑，对外暴露你需要的自定义方法。

具体实现步骤 #

1. 封装自定义播放器组件
   创建一个StatefulWidget，内部维护VideoPlayerController实例，对外暴露自定义的播放控制方法：

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

class CustomVideoPlayer extends StatefulWidget {
  final String videoUrl; // 视频源地址

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

  @override
  State<CustomVideoPlayer> createState() => _CustomVideoPlayerState();
}

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl))
      ..initialize().then((_) {
        setState(() {}); // 初始化完成后刷新UI
      });
  }

  // 自定义播放方法
  void playVideo() {
    if (_controller.value.isInitialized) {
      _controller.play();
    }
  }

  // 自定义暂停方法
  void pauseVideo() {
    if (_controller.value.isPlaying) {
      _controller.pause();
    }
  }

  // 自定义停止方法（回到开头并暂停）
  void stopVideo() {
    if (_controller.value.isInitialized) {
      _controller.seekTo(const Duration(zero));
      _controller.pause();
    }
  }

  @override
  void dispose() {
    // 释放控制器资源，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller), // 仅负责显示视频的Widget
          )
        : const Center(child: CircularProgressIndicator());
  }
}

2. 外部调用自定义方法
   在父组件中通过GlobalKey获取自定义播放器的状态实例，调用自定义方法：

class VideoPage extends StatelessWidget {
  final _videoPlayerKey = GlobalKey<_CustomVideoPlayerState>();

  VideoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          CustomVideoPlayer(
            key: _videoPlayerKey,
            videoUrl: "你的视频地址",
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => _videoPlayerKey.currentState?.playVideo(),
                child: const Text("播放"),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () => _videoPlayerKey.currentState?.pauseVideo(),
                child: const Text("暂停"),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () => _videoPlayerKey.currentState?.stopVideo(),
                child: const Text("停止"),
              ),
            ],
          )
        ],
      ),
    );
  }
}

关键说明 #

• VideoPlayer Widget本身只负责根据VideoPlayerController的状态渲染视频内容，不处理播放逻辑，所以你完全可以自己封装控制逻辑。
• 自定义方法本质是对VideoPlayerController内置方法的封装，这样既利用了video_player包对原生播放逻辑的封装，又能对外暴露符合你需求的调用接口。
• 如果需要全局状态管理，也可以结合Provider、Riverpod等状态管理工具，把播放逻辑抽离到状态类中，让UI层更简洁。

内容的提问来源于stack exchange，提问作者Yunnane