Flutter VideoPlayer仅显示循环视频首帧问题排查求助

Hey there! Let's troubleshoot why your video is only showing the first frame instead of looping. The most common culprit here is actually a simple oversight—you haven't told the player to start playing the video! Let's break down the fixes step by step.

1. Add the play() Method (Most Likely Fix) #

Your code initializes the video player, enables looping, and sets volume—but it never triggers playback. You need to call _controller.play() once the video is initialized.

Option A: Call play() After Initialization in initState #

Update your initState to start playing once the initialize future completes:

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.asset('assets/videos/intro.mp4');
  _initializeVideoPlayerFuture = _controller.initialize().then((_) {
    setState(() {}); // Ensure UI updates with the video's aspect ratio
    _controller.setLooping(true);
    _controller.setVolume(1.0);
    _controller.play(); // Start playback here
  });
}

Option B: Trigger Playback in the FutureBuilder #

If you prefer to start playing only when the UI is ready, add the check in the ConnectionState.done branch:

if (snapshot.connectionState == ConnectionState.done) {
  // Only play if the video isn't already playing
  if (!_controller.value.isPlaying) {
    _controller.play();
  }
  return Center(
    child: AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    ),
  );
}

2. Check Other Potential Issues #

If adding play() doesn't fix it, let's rule out other possibilities:

• Verify Video Format & Encoding: Ensure your MP4 uses H.264 video encoding and AAC audio encoding—these are the most widely supported by the video_player package. If your video uses a different codec, use a tool like FFmpeg to transcode it.
• Confirm Asset Configuration: Double-check your pubspec.yaml to make sure the video path is correctly listed (indentation matters!):

  assets:
    - assets/videos/intro.mp4
  

• Upgrade video_player Version: Your version (^0.10.11) is quite outdated. Newer versions fix many bugs—try upgrading to a stable recent version like ^2.7.0 (note: newer versions may require minor code adjustments, like using late for controller initialization).
• 20MB Video Size: 20MB isn't usually too large to cause this issue, but you can test with a smaller MP4 to rule out loading delays. If the small video works, you might want to optimize your 20MB video (compress it without losing quality) for better performance.

Full Modified Code Example #

Here's your updated clipVideo widget with the playback fix and some best practice adjustments:

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

class ClipVideo extends StatefulWidget {
  const ClipVideo({super.key}); // Use constructor with key (best practice)
  final String title = "titlu video";

  @override
  State<ClipVideo> createState() => _ClipVideoState();
}

class _ClipVideoState extends State<ClipVideo> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/videos/intro.mp4');
    _initializeVideoPlayerFuture = _controller.initialize().then((_) {
      setState(() {});
      _controller.setLooping(true);
      _controller.setVolume(1.0);
      _controller.play();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Noob at this