如何让Flutter的video_player结合Chewie实现点击播放后才开始流加载？

嘿，这个问题我刚好折腾过，默认情况下video_player一初始化就会拉取视频流，要实现点击才加载其实核心就是延迟初始化控制器，我给你捋捋具体怎么做：

• 第一步：先不要在页面初始化时就创建VideoPlayerController，而是把它设为可空状态，同时加个标记位判断视频是否已加载：

VideoPlayerController? _videoController;
ChewieController? _chewieController;
bool _isVideoReady = false;

• 第二步：写一个专门的初始化方法，只有用户点击播放时才调用它。在这个方法里完成控制器的初始化、视频加载，然后触发播放：

void _startPlayVideo() async {
  // 避免重复初始化
  if (_videoController != null) return;

  // 初始化video_player控制器
  _videoController = VideoPlayerController.networkUrl(Uri.parse("你的视频地址"));
  await _videoController!.initialize();

  // 创建Chewie控制器，这里一定要把autoPlay设为false！
  _chewieController = ChewieController(
    videoPlayerController: _videoController!,
    autoPlay: false,
    looping: false,
    // 可以根据需求添加其他配置，比如自定义控件样式等
  );

  // 更新状态，让UI切换到播放器
  setState(() {
    _isVideoReady = true;
  });

  // 初始化完成后手动触发播放
  await _chewieController!.play();
}

• 第三步：在UI层根据标记位显示不同内容。未加载时可以放一个播放按钮（或者带封面图的按钮），加载完成后显示Chewie播放器：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: _isVideoReady
          ? Chewie(controller: _chewieController!)
          : GestureDetector(
              onTap: _startPlayVideo,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 可以替换成视频封面图
                  Icon(Icons.play_circle_outline, size: 100, color: Colors.blue),
                  SizedBox(height: 16),
                  Text("点击播放视频"),
                ],
              ),
            ),
    ),
  );
}

• 最后别忘了在页面销毁时释放资源，防止内存泄漏：

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

另外还有个小细节：如果你的视频有封面图，可以先预加载封面图代替默认的播放图标，这样体验会更好。而且一定要确保ChewieController的autoPlay是false，不然初始化后会自动播放，还是会提前加载视频流哦～

备注：内容来源于stack exchange，提问作者Miguel Gamboa