如何为大体积视频快速创建Blob URL？优化加载耗时问题

嘿，这个问题我太熟了——直接用Blob URL处理500MB级别的视频确实会踩这个坑！本质原因是Blob URL需要把整个文件完全加载到浏览器内存后才能生成引用，大文件不仅读取耗时，还容易占满内存导致页面卡顿甚至崩溃。YouTube这类平台根本不会用Blob URL，它们靠的是流媒体传输技术，把视频切成小片段，边下载边播放，完全不需要加载整个文件。

下面给你具体的实现思路和可落地的方案：

一、核心思路：放弃Blob，改用流媒体传输 #

流媒体的核心是把视频分割成若干个小片段（比如10秒一段），生成一个播放列表文件（比如HLS的.m3u8，DASH的.mpd）。前端只需要请求这个播放列表，然后按需加载对应的视频片段，实现“边下边播”，初始加载速度极快，而且内存占用低。

二、前端实现步骤（以HLS为例，YouTube常用方案之一） #

现代浏览器对HLS的支持已经很完善：Safari原生支持，Chrome/Edge/Firefox可以借助hls.js库来兼容。

1. 引入hls.js库 #

可以通过npm安装后引入，或者下载官方库文件放到本地项目中：

npm install hls.js

然后在代码中导入：

import Hls from 'hls.js';

2. 编写前端播放代码 #

const video = document.getElementById('my-video');
const hlsPlaylistUrl = '/path/to/your/video/output.m3u8'; // 服务器上的播放列表地址

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(hlsPlaylistUrl);
  hls.attachMedia(video);
  
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    console.log('播放列表解析完成，准备播放');
    // 自动播放需符合浏览器自动播放策略（比如用户已交互）
    video.play().catch(err => console.error('自动播放失败:', err));
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari原生支持HLS，直接设置播放列表地址
  video.src = hlsPlaylistUrl;
  video.addEventListener('loadedmetadata', () => {
    video.play().catch(err => console.error('自动播放失败:', err));
  });
}

三、后端视频转码（关键步骤） #

要实现流媒体，你需要先把大视频转成HLS/DASH格式，推荐用ffmpeg这个开源工具，命令行就能搞定：

转成HLS格式的命令 #

ffmpeg -i input.mp4 \
  -c:v libx264 -c:a aac \
  -hls_time 10 \          # 每个视频片段的时长（这里设为10秒）
  -hls_list_size 0 \      # 保留所有片段在播放列表中
  -hls_segment_filename "output_%03d.ts" \  # 片段文件名格式（比如output_001.ts）
  output.m3u8

这个命令会生成一个output.m3u8播放列表文件，以及一堆.ts格式的视频片段。把这些文件放到你的静态服务器上，前端就能通过.m3u8地址播放了。

四、如果暂时无法修改后端？（临时折中方案） #

如果你的场景必须用本地文件或者已上传的完整视频文件，没法做后端转码，可以尝试用FileReader分段读取文件，结合MediaSource Extensions来模拟流媒体，但这个实现复杂度高，体验远不如真正的流媒体：

const video = document.getElementById('my-video');
const fileInput = document.getElementById('file-input');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 注意：codecs参数需要和你的视频编码匹配，这里是MP4的常见编码
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  const chunkSize = 5 * 1024 * 1024; // 每次读取5MB的片段
  let startByte = 0;
  const file = fileInput.files[0];

  while (startByte < file.size) {
    const endByte = Math.min(startByte + chunkSize, file.size);
    const chunk = file.slice(startByte, endByte);
    const arrayBuffer = await readChunkAsArrayBuffer(chunk);
    
    // 等待sourceBuffer准备好接受新数据
    while (sourceBuffer.updating) {
      await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
    }
    
    sourceBuffer.appendBuffer(arrayBuffer);
    startByte = endByte;
  }
});

// 辅助函数：读取文件片段为ArrayBuffer
function readChunkAsArrayBuffer(chunk) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsArrayBuffer(chunk);
  });
}

这个方案只是分段加载文件，避免一次性读入整个大文件，但还是需要客户端加载完整文件，而且兼容性需要测试，远不如后端转码的流媒体方案靠谱。

总结 #

如果要达到YouTube那样的流畅体验，后端转码+前端流媒体播放是唯一靠谱的方案。Blob URL只适合小文件预览，大视频场景完全不适用。

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