如何限制浏览器仅加载视频指定时间段的最小必要数据？

我在Google Cloud Storage的私有存储桶中托管了一些时长约1小时的长视频，需要循环播放其中3-4秒的片段（例如1120秒至1123秒区间）。

即使给<video>标签指定了带时间参数的URL（类似https://mybucket.storage.googleapis.com/path-to-my-video.mp4?access_token=...&t=1120,1123），Chrome或Firefox仍会下载约10MB的数据，对于仅3秒的片段来说耗时过长。浏览器下载的数据远超出播放该区间的实际需求，我需要找到一种只加载必要最小数据量的方法。

我已尝试使用preload="metadata"并添加事件监听器来限制播放区间，代码如下：

已尝试的HTML代码 #

<video controls preload="metadata"
          src={`${videosRootUrl}/${videoMetadata.name}/${videoMetadata.name}.mp4?access_token=${accessToken}#t=${from},${to}`}
          onError={err => handleVideoError(err)}
          onTimeUpdate={e => handleTimeUpdate(e, from, to)}
          onLoadedMetadata={e => onloadedmetadata(e.currentTarget, from)}
        >
</video>

已尝试的JavaScript代码 #

function handleTimeUpdate(event, from, to) {
  const videoElt = event.currentTarget
  const currentTime = videoElt.currentTime
  if(currentTime < from || currentTime >= to) {
    videoElt.currentTime = from;
  }
}
function onloadedmetadata(video, from) {
  video.currentTime = from;
}

（注：原代码中currentTim为笔误，已修正为currentTime >= to）

核心原因分析 #

浏览器下载过多数据主要有两个原因：

1. MP4的moov原子（存储关键帧索引等元数据）通常在文件末尾，浏览器为获取元数据会下载大量前置内容；
2. 原视频关键帧间隔过大，浏览器需要下载目标区间之前最近的关键帧到目标区间的所有数据，导致冗余下载。

方案1：优化原视频结构（推荐） #

通过预处理视频，让浏览器能够精准请求所需片段：

1. 缩小关键帧间隔
   使用FFmpeg将关键帧间隔设置为1秒（适配25fps视频），确保目标区间内存在关键帧，避免浏览器下载大量前置数据：

   ffmpeg -i input.mp4 -g 25 -c:v libx264 -c:a copy output.mp4
   

   （-g 25表示每25帧生成一个关键帧，可根据视频帧率调整数值）

2. 将moov原子移至文件开头
   优化MP4文件结构，让浏览器无需下载整个文件即可获取元数据：

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

3. 调整视频标签参数
   使用preload="none"替代preload="metadata"，让浏览器仅在需要时加载数据，同时保留时间参数和事件监听：

   <video controls preload="none"
          src={`${videosRootUrl}/${videoMetadata.name}/${videoMetadata.name}_optimized.mp4?access_token=${accessToken}#t=${from},${to}`}
          onError={err => handleVideoError(err)}
          onTimeUpdate={e => handleTimeUpdate(e, from, to)}
          onLoadedMetadata={e => onloadedmetadata(e.currentTarget, from)}
   >
   </video>
   

方案2：提取独立片段文件 #

如果优化后仍无法满足需求，可直接提取目标区间的独立视频文件上传至GCS，播放时直接加载小文件：

ffmpeg -ss 1120 -i input.mp4 -t 3 -c:v libx264 -c:a copy clip_1120-1123.mp4

（-ss指定起始时间，-t指定片段时长）

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