Flutter video_player本地视频加载耗时久及iPhone视频兼容问题求助

针对你开发TikTok类应用时遇到的两个核心问题，以下是具体分析和解决方法：

一、首次视频初始化卡顿（耗时超1分钟） #

核心原因 #

1. 文件写入未完全落盘：同步写入文件后未触发磁盘刷新，导致video_player读取时需等待系统缓存同步，拉长初始化时间。
2. 重复初始化：VideoCard的FutureBuilder每次重建都会重新调用initializePlayer，造成重复初始化阻塞主线程。
3. IO资源竞争：首次启动同时下载3个视频，磁盘IO抢占导致第一个视频的文件读取/初始化变慢。

解决方案 #

1. 确保文件完全写入磁盘

修改Video类的downloadVideo方法，添加磁盘刷新操作：

// ... 原有代码
raf.writeFromSync(response.data);
raf.flushSync(); // 新增：强制将数据写入磁盘，避免缓存延迟
raf.close();
// ...

2. 缓存初始化任务，避免重复执行

在Video类中添加初始化任务缓存，防止重复调用：

class Video {
  // ... 原有成员
  Future<void>? _initializeFuture; // 新增：缓存初始化任务

  // ...

  Future<void> initializePlayer() async {
    if (_initializeFuture != null) return _initializeFuture!;
    controller = VideoPlayerController.file(file!);
    _initializeFuture = controller!.initialize().then((_) {
      _initializationStreamController.sink.add(true);
      play();
      controller!.setLooping(true);
    });
    return _initializeFuture!;
  }

  // ... 重置缓存
  Future<void> dispose() async {
    if (controller != null) {
      await controller!.dispose();
      controller = null;
      _initializeFuture = null; // 重置缓存，下次可重新初始化
    }
  }
}

3. 调整预下载策略，减少IO竞争

修改VideoProvider的downloadVideos方法，优先完成当前视频下载后，异步启动其他视频下载：

import 'dart:async'; // 导入unawaited

// ...

Future<void> downloadVideos() async {
  // 先同步下载当前视频，确保优先可用
  await videos[_currentVideoIndex].downloadVideo();
  // 异步下载其他视频，不阻塞当前流程
  if (_currentVideoIndex - 1 >= 0) {
    unawaited(videos[_currentVideoIndex - 1].downloadVideo());
  }
  for (int i = _currentVideoIndex + 1;
      i < _currentVideoIndex + 3 && i < videos.length;
      i++) {
    unawaited(videos[i].downloadVideo());
  }
}

4. 优化VideoCard的初始化触发

修改VideoCard的FutureBuilder，直接使用缓存的初始化任务：

// ...
return FutureBuilder<void>(
  future: widget.video._initializeFuture ?? widget.video.initializePlayer(),
  builder: (BuildContext ctx, AsyncSnapshot<void> snapshot) {
    // ... 原有逻辑
  },
);
// ...

二、iPhone录制视频白屏兼容 #

核心原因 #

1. 编码兼容性：iPhone录制的视频多为HEVC编码（.mov格式），部分设备/平台的video_player对HEVC硬件解码支持不足。
2. 旋转元数据未处理：iPhone视频常带有90/180度旋转元数据，video_player未自动应用旋转，导致画面显示异常。

解决方案 #

1. 转码为通用格式

服务器端将iPhone录制的视频转码为H.264编码的MP4格式，这是跨平台兼容性最好的视频格式。

2. 手动处理视频旋转

利用video_player提供的旋转信息，通过Transform组件调整画面：

• 先在Video类中添加旋转角度获取方法：

int get rotation => controller?.value.rotation ?? 0;

• 修改VideoCard的视频显示逻辑：

// ... 原有代码
child: SizedBox(
  width: widget.video.controller!.value.size.width,
  height: widget.video.controller!.value.size.height,
  child: Transform(
    alignment: Alignment.center,
    // 根据旋转角度转换画面
    transform: Matrix4.identity()
      ..rotateZ(widget.video.rotation * 3.1415926 / 180),
    child: VideoPlayer(widget.video.controller!),
  ),
),
// ...

3. 使用封装插件优化兼容性

替换为chewie插件（基于video_player封装），它内置了旋转处理、错误重试等兼容性优化：

// 添加依赖：chewie: ^latest_version
import 'package:chewie/chewie.dart';

// 在Video类中添加ChewieController
ChewieController? chewieController;

Future<void> initializePlayer() async {
  // ... 原有初始化逻辑
  chewieController = ChewieController(
    videoPlayerController: controller!,
    autoPlay: true,
    looping: true,
    handleSubtitles: false,
  );
}

// 在VideoCard中替换为Chewie组件
child: Chewie(controller: widget.video.chewieController!),

内容的提问来源于stack exchange，提问作者sm-sayedi