如何将fetch()获取的ReadableStream传入<video>实现视频边加载边播放？

你要实现大视频边下边播，不用手动处理ReadableStream——浏览器原生就支持这个能力，核心是后端必须支持HTTP范围请求（Range Requests），前端直接用<video>标签对接接口即可，以下是具体步骤：

1. 核心原理 #

浏览器播放视频时，会自动发送带Range头的请求，要求后端返回视频的某一段字节（比如bytes=0-1024），后端返回206 Partial Content状态码和对应字节段，浏览器拿到片段后就能开始播放，同时继续请求后续片段。这是HTTP标准的流式播放方案，比手动处理流可靠得多。

2. .NET后端修改（关键） #

你的GetFileFromPath接口需要添加范围请求支持，示例代码（ASP.NET Core）：

[HttpGet("GetFileFromPath")]
public async Task<IActionResult> GetFileFromPath(string path)
{
    var filePath = Path.Combine("你的文件存储根目录", path);
    if (!System.IO.File.Exists(filePath))
        return NotFound();

    var fileInfo = new FileInfo(filePath);
    var rangeHeader = Request.Headers.Range.ToString();

    // 处理范围请求
    if (!string.IsNullOrEmpty(rangeHeader))
    {
        var rangeParts = rangeHeader.Replace("bytes=", "").Split('-');
        long start = long.Parse(rangeParts[0]);
        long end = rangeParts.Length > 1 && !string.IsNullOrEmpty(rangeParts[1]) 
            ? long.Parse(rangeParts[1]) 
            : fileInfo.Length - 1;
        end = Math.Min(end, fileInfo.Length - 1);

        var contentLength = end - start + 1;
        Response.Headers.Add("Accept-Ranges", "bytes");
        Response.Headers.Add("Content-Range", $"bytes {start}-{end}/{fileInfo.Length}");
        Response.StatusCode = StatusCodes.Status206PartialContent;

        using var stream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read);
        stream.Seek(start, SeekOrigin.Begin);
        var buffer = new byte[contentLength];
        await stream.ReadAsync(buffer, 0, (int)contentLength);
        return File(buffer, "video/mp4");
    }
    // 首次请求无Range头，返回完整文件（浏览器后续会自动发Range请求）
    else
    {
        Response.Headers.Add("Accept-Ranges", "bytes");
        return PhysicalFile(filePath, "video/mp4");
    }
}

注意：如果必须用POST请求，浏览器默认不会给POST请求加Range头，建议改成GET接口（用路径参数或QueryString传文件路径）。

3. 前端简化实现 #

直接把<video>的src指向接口即可，无需手动fetch和处理流：

<video
  src={`${url}/odata/Content/GetFileFromPath?path=${encodeURIComponent(props.content.Path)}`}
  controls
  preload="metadata" // 只预加载视频元数据，减少初始请求量
/>

4. 额外优化点 #

• 视频文件预处理：确保MP4文件的moov原子（存储视频元数据的部分）在文件开头，否则浏览器需要下载到文件末尾才能播放。可以用FFmpeg命令调整：ffmpeg -i input.mp4 -movflags faststart output.mp4
• 后端缓存设置：给视频接口添加合适的缓存头，避免重复请求相同片段
• 错误处理：前端可以监听<video>的error事件，处理加载失败的情况

为什么你的ReadableStream方案行不通 #

你手动构建的ReadableStream无法直接对接<video>——<video>需要的是一个可寻址的资源URL（支持Range请求），而内存中的流无法让浏览器随机请求片段。即使把流转成Blob URL，也需要全量下载完成才能生成URL，达不到边下边播的效果。

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