iOS Safari视频流播放异常问题解决（C# WebAPI+OwnCloud场景）

我之前碰到过一模一样的坑！Safari（包括iOS端的）对视频流式播放的要求比其他浏览器严格得多——哪怕直接访问OwnCloud的视频链接完全正常，通过你的WebAPI中转后就没法播放，核心问题是你的API没有处理范围请求（Range Requests），这是Safari加载视频的必要条件。

为什么会出现这个问题？ #

Safari不会一次性下载整个视频文件，而是会发送带Range头的请求，分片段获取视频内容（比如请求从第0字节到第10240字节的片段）。但默认的FileStreamResult只会返回完整的文件流，也不会返回Safari需要的Accept-Ranges、Content-Range等响应头，导致Safari无法正确解析和加载视频。

解决方案：让WebAPI支持范围请求并透传OwnCloud的响应 #

我们需要做两件核心事情：

1. 把前端的Range请求头透传给OwnCloud，让它返回对应的视频片段（不用自己下载整个文件再切片，节省带宽和服务器资源）
2. 把OwnCloud返回的响应头（包括范围相关的）原样返回给前端，同时设置正确的状态码

改造后的C# WebAPI代码示例 #

public async Task<IActionResult> GetVideo(string filepath)
{
    using var httpClient = new HttpClient();
    
    // 配置请求：添加授权信息，透传前端的Range请求头
    httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _secret);
    var requestUrl = $"{_serverAddress}{filepath}";
    var request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
    
    if (Request.Headers.ContainsKey("Range"))
    {
        request.Headers.Add("Range", Request.Headers["Range"].ToString());
    }

    // 请求OwnCloud并获取响应（只先读取响应头，避免提前加载整个流）
    var response = await httpClient.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
    
    // 透传OwnCloud的响应头给前端，包括范围请求相关的关键头
    foreach (var header in response.Headers)
    {
        Response.Headers.TryAdd(header.Key, new StringValues(header.Value.ToArray()));
    }
    foreach (var header in response.Content.Headers)
    {
        Response.Headers.TryAdd(header.Key, new StringValues(header.Value.ToArray()));
    }

    // 设置正确的状态码：206表示"部分内容"，对应范围请求的响应
    Response.StatusCode = (int)response.StatusCode;
    
    // 返回处理后的视频流
    var videoStream = await response.Content.ReadAsStreamAsync();
    return new FileStreamResult(videoStream, response.Content.Headers.ContentType.ToString());
}

前端视频标签优化（可选） #

保持原有标签的基础上，加上controls和preload="metadata"可以提升Safari的加载体验：

<video width="320" height="240" controls preload="metadata" src="/api/your-video-endpoint?filepath=your-video-path.mp4">
  Your browser does not support the video tag.
</video>

额外排查点 #

• 确认视频编码是Safari支持的：必须是H.264视频 + AAC音频的MP4文件（直接访问OwnCloud链接正常的话，这个条件应该已经满足）
• 不要添加Cache-Control: no-cache这类可能破坏Safari缓存策略的响应头
• 检查响应头里是否存在Accept-Ranges: bytes，这是告诉Safari服务器支持范围请求的关键标识

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