Flutter应用中better_player加载小视频过慢问题求助

问题描述 #

在Flutter应用中使用better_player、video_player、cached_video_player包时，均遇到同一异常：仅1.4MB的11秒网络小视频，加载启动播放需要3-5秒；但时长超10分钟的大体积视频却能几乎立即启动播放。

代码示例 #

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

class VideoPlayer extends StatefulWidget {
  @override
  State<VideoPlayer> createState() => _VideoPlayerState();
}

class _VideoPlayerState extends State<VideoPlayer> {
  @override
  Widget build(BuildContext context) {
    return BetterPlayer.network(
      "https://dropovercl.s3.amazonaws.com/b7c13ee1-36c6-42ce-857e-fb79a60c7103/856224b4-b678-4bbf-97fc-ef716fe30bed/a132375d-ea99-4930-90c4-bef5efb9ab9b.mp4"
    );
  }
}

已测试情况 #

• 10分钟长视频：几乎立即启动播放
• 11秒/1.4MB小视频：需3-5秒启动播放

复现步骤 #

1. 使用Flutter better_player包加载上述自定义网络小视频
2. 对比长视频的加载启动速度
3. 观察到小视频加载耗时显著更长

环境信息 #

• Flutter版本：Flutter 3.11.0-18.0.pre.65 • channel master
• Dart版本：Dart 3.1.0
• 操作系统：Mac OS
• IDE：Visual Studio Code

Flutter Doctor结果 #

[✓] Flutter (Channel master, 3.11.0-18.0.pre.65, on macOS 13.4 22F66
   darwin-arm64, locale en-SI)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.81.0)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

问题原因分析 #

1. 视频元数据位置：小视频可能将元数据存储在文件末尾，播放器必须下载到文件末尾才能解析分辨率、时长等关键信息，导致启动延迟；而长视频通常将元数据放在文件开头，播放器能快速获取信息启动播放。
2. 服务器Range请求支持：若存储小视频的服务器未开启Range请求支持，播放器无法仅下载部分内容，必须等待整个文件下载完成才能启动；长视频所在服务器大概率支持Range请求，可分段加载首段内容。
3. 流媒体格式差异：长视频可能采用HLS/DASH等流媒体分段格式，播放器只需加载第一个分段即可启动；小视频为单个MP4文件，无分段支持。

优化解决方案 #

1. 调整视频元数据位置 #

使用ffmpeg工具将视频元数据移至文件开头，命令如下：

ffmpeg -i input.mp4 -movflags faststart output.mp4

此操作让播放器无需下载完整文件即可获取元数据，大幅缩短启动时间。

2. 配置better_player预加载与缓存 #

自定义BetterPlayer配置，设置预加载大小并开启缓存，提前加载部分内容：

BetterPlayer.network(
  "你的视频URL",
  configuration: BetterPlayerConfiguration(
    autoPlay: true,
    preloadSize: 500 * 1024, // 预加载500KB内容
    fit: BoxFit.contain,
  ),
  cacheConfiguration: const BetterPlayerCacheConfiguration(
    useCache: true,
    maxCacheSize: 10 * 1024 * 1024, // 最大缓存10MB
    maxCacheFileSize: 5 * 1024 * 1024, // 单个缓存文件最大5MB
  ),
)

3. 验证服务器Range请求支持 #

通过curl命令测试服务器是否支持部分内容请求：

curl -I -H "Range: bytes=0-100" 你的视频URL

若返回206 Partial Content，则说明支持；若返回200 OK，需在服务器端开启Range请求支持（如S3存储桶需确保未禁用分段下载）。

4. 转换为流媒体格式 #

将小视频转换为HLS（.m3u8）格式，分割为多个小片段，播放器可仅加载第一个片段立即启动播放。使用ffmpeg转换命令：

ffmpeg -i input.mp4 -c:v libx264 -c:a aac -hls_time 3 -hls_list_size 0 output.m3u8

之后使用BetterPlayer加载.m3u8链接即可实现分段播放。

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