Flutter video_player播放本地资源视频显示空白问题求助

问题描述 #

我在Flutter应用中使用video_player插件展示视频，网络视频播放正常，但本地资源视频仅显示空白。尝试过多种现有解决方案均无效，改用native_video_view插件后又出现大量错误，寻求其他可行解决方案。

相关代码 #

页面代码（Dart）

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

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

  @override
  State<TrainingDetailScreen> createState() => _TrainingDetailScreenState();
}

class _TrainingDetailScreenState extends State<TrainingDetailScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('video/cliip.mp4');
    _initializeVideoPlayerFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: FutureBuilder(
              future: _initializeVideoPlayerFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  );
                } else {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                if (_controller.value.isPlaying) {
                  _controller.pause();
                } else {
                  _controller.play();
                }
              });
            },
            child: Icon(
              _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
            ),
          )
        ],
      ),
    );
  }
}

pubspec.yaml配置

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_rating_bar: ^4.0.1
  font_awesome_flutter: ^10.5.0
  intl: ^0.18.1
  flip_card: ^0.7.0
  appinio_swiper: ^2.0.3
  carousel_slider: ^4.2.1
  audioplayers: ^5.2.0
  video_player: ^2.7.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/img/tab_1.png
    - assets/img/tab_1s.png
    - assets/img/tab_2.png
    - assets/img/tab_2s.png
    - assets/img/tab_3.png
    - assets/img/tab_3s.png
    - assets/img/tab_4.png
    - assets/img/tab_4s.png
    - assets/img/toman1.png
    - assets/img/sp1.jpg
    - assets/img/sp2.jpg
    - assets/img/sp3.jpg
    - assets/img/sp4.jpg
    - assets/img/sp5.jpg
    - assets/img/header_home_quiz.jpg
    - assets/img/animal.jpg
    - assets/img/gaav.jpg
    - assets/img/gav.jpg
    - assets/img/envir.jpg
    - assets/img/sad.png
    - assets/img/happy.png
    - assets/img/cow.jpg
    - assets/img/cat.jpg
    - assets/img/dog.jpg
    - assets/img/duck.jpg
    - assets/img/goose.jpg
    - assets/img/lion.jpg
    - assets/img/wolf.jpg
    - assets/img/mouse.jpg
    - assets/img/hen.jpg
    - assets/img/roster.jpg
    - assets/img/tiger.jpg
    - assets/img/snake.jpg
    - assets/audio/
    - assets/video/

目录结构 #

项目根目录下存在assets文件夹，内部包含img、audio、video三个子文件夹，目标视频文件cliip.mp4位于assets/video/路径下。

可行解决方案 #

1. 修正资源路径 #

代码中使用的路径'video/cliip.mp4'不符合Flutter asset路径规则，正确路径应从pubspec配置的根路径开始，修改为：

_controller = VideoPlayerController.asset('assets/video/cliip.mp4');

2. 验证视频编码兼容性 #

video_player仅支持标准编码的视频文件，确保你的mp4文件采用H.264视频编码和AAC音频编码。可通过FFmpeg转码修复：

ffmpeg -i cliip.mp4 -c:v libx264 -c:a aac fixed_cliip.mp4

3. 清理缓存并重启项目 #

• 执行flutter clean清理构建缓存
• 执行flutter pub get重新拉取依赖
• 重启IDE与测试设备，确保资源被正确打包加载

4. 添加初始化错误排查 #

在FutureBuilder中增加错误捕获逻辑，定位初始化失败原因：

builder: (context, snapshot) {
  if (snapshot.connectionState == ConnectionState.done) {
    if (snapshot.hasError) {
      return Center(child: Text('视频初始化失败: ${snapshot.error}'));
    }
    return AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    );
  } else {
    return const Center(child: CircularProgressIndicator());
  }
}

5. 切换至Chewie插件 #

Chewie是基于video_player封装的增强型播放器，兼容性与易用性更好：

1. 添加依赖到pubspec.yaml：

dependencies:
  chewie: ^1.7.0
  video_player: ^2.7.2

2. 修改代码使用Chewie：

import 'package:chewie/chewie.dart';

// ...

late ChewieController _chewieController;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.asset('assets/video/cliip.mp4');
  _initializeVideoPlayerFuture = _controller.initialize();
  _chewieController = ChewieController(
    videoPlayerController: _controller,
    autoPlay: false,
    looping: false,
  );
}

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

// 替换原VideoPlayer组件
AspectRatio(
  aspectRatio: _controller.value.aspectRatio,
  child: Chewie(controller: _chewieController),
)

6. 真机测试 #

部分模拟器存在资源加载兼容性问题，建议直接在真机上测试验证。

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