Flutter Chewie：如何判断视频第一帧已渲染且无需播放？

我之前也碰到过这个一模一样的问题——initialized状态只是表示视频元数据加载完成，并不代表第一帧已经渲染到屏幕上，所以用它来触发淡入肯定会提前，导致还是黑屏跳变。下面是两个经过验证的解决方案，核心都是判断第一帧是否真正准备好渲染：

方案一：监听VideoPlayerController的帧可用事件 #

VideoPlayerController会在第一帧可渲染时发出frameAvailable通知，我们可以利用这个时机触发淡入：

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

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _videoController;
  late ChewieController _chewieController;
  double _opacity = 0.0;

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

  void _initVideoPlayer() async {
    _videoController = VideoPlayerController.network(
      '你的视频地址',
    );

    await _videoController.initialize();
    
    // 添加帧可用监听器
    _videoController.addListener(_onFrameAvailable);

    _chewieController = ChewieController(
      videoPlayerController: _videoController,
      autoInitialize: true,
      autoPlay: false,
      // 其他Chewie配置项，比如占位图、控制器样式等
    );
  }

  void _onFrameAvailable() {
    // 确保视频已初始化且第一帧已准备好，同时只触发一次淡入
    if (_videoController.value.isInitialized && 
        _videoController.value.hasFrame && 
        _opacity == 0.0) {
      setState(() {
        _opacity = 1.0;
      });
      // 触发后移除监听器，避免重复调用
      _videoController.removeListener(_onFrameAvailable);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      opacity: _opacity,
      duration: const Duration(milliseconds: 300), // 可调整淡入速度
      curve: Curves.easeInOut,
      child: Chewie(controller: _chewieController),
    );
  }
}

方案二：用addPostFrameCallback轮询hasFrame状态 #

如果监听frameAvailable有触发多次的问题，也可以用Widget的帧回调来轮询hasFrame状态，直到第一帧准备好：

// 替换initState里的初始化逻辑
void _initVideoPlayer() async {
  _videoController = VideoPlayerController.network(
    '你的视频地址',
  );

  await _videoController.initialize();

  _chewieController = ChewieController(
    videoPlayerController: _videoController,
    autoInitialize: true,
    autoPlay: false,
  );

  // 等待当前帧渲染完成后开始检查
  WidgetBinding.instance.addPostFrameCallback((_) {
    _checkFirstFrame();
  });
}

void _checkFirstFrame() {
  if (_videoController.value.hasFrame) {
    setState(() {
      _opacity = 1.0;
    });
  } else {
    // 如果还没准备好，继续等下一帧
    WidgetBinding.instance.addPostFrameCallback((_) {
      _checkFirstFrame();
    });
  }
}

关键说明 #

• hasFrame是判断第一帧是否就绪的核心状态，它会在视频第一帧成功渲染到缓冲区后变为true，这时候触发淡入就不会有黑屏跳变的问题了。
• 记得在dispose时移除监听器或停止轮询，避免内存泄漏。
• 可以根据需求调整AnimatedOpacity的duration和curve参数，让淡入效果更贴合你的UI风格。

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