Flutter Web如何获取文件本地路径 并将选取视频转为File供video_player使用

1. Web端无法获取本地文件真实路径是浏览器沙箱安全限制导致的，属于预期行为，file_picker的path字段在Web环境下固定返回null，不存在绕过限制的方法。
2. dart:io包下的File类型在Web端本身不支持，video_player的Web端实现也不接收io.File类型的入参，不需要强行转成该类型。

你不需要强制获取路径，通过Blob URL方案即可实现Web端视频播放，全程仅依赖file_picker和video_player的原生能力：

步骤1：选取视频时获取PlatformFile对象 #

选文件时直接读取返回的PlatformFile实例，无需读取path字段：

FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.video);
if (result != null) {
  PlatformFile videoFile = result.files.first;
  // 传入初始化方法
  await initVideoPlayer(videoFile);
}

步骤2：跨平台适配初始化播放器 #

使用条件导入区分Web和移动端逻辑，Web端通过字节生成Blob URL传给播放器即可：

// 导入foundation包使用kIsWeb判断平台
import 'package:flutter/foundation.dart';
// 条件导入：移动端用io，Web端用html，避免编译报错
import 'dart:io' if (dart.library.html) 'dart:html' as html;
import 'package:video_player/video_player.dart';

VideoPlayerController? _controller;

Future<void> initVideoPlayer(PlatformFile file) async {
  if (kIsWeb) {
    // Web端逻辑：字节转Blob生成可播放链接
    final blob = html.Blob([file.bytes!]);
    final playUrl = html.Url.createObjectUrlFromBlob(blob);
    _controller = VideoPlayerController.network(playUrl);
  } else {
    // 移动端原有逻辑，直接用路径创建
    _controller = VideoPlayerController.file(File(file.path!));
  }
  // 通用初始化逻辑
  await _controller!.initialize();
  _controller!.play();
}

注意事项 #

• 如果确实需要Web端可用的File对象，可直接通过html.File([file.bytes!], file.name, {'type': file.extension})生成，后续同样用createObjectUrlFromBlob生成播放链接即可。
• 页面销毁时需调用html.Url.revokeObjectUrl(playUrl)释放Blob资源，避免内存泄漏。

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