在 IE 中播放 HTML5 视频失败（或：缺少范围请求）答案

【问题标题】：HTML5 video playback fails in IE (or: Missing range request)在 IE 中播放 HTML5 视频失败（或：缺少范围请求）
【发布时间】：2014-10-11 19:20:53
【问题描述】：

对于之前在 SO 上被问过一万次的问题，我深表歉意。这种情况似乎与其他情况不同。简而言之，视频播放始终在 Firefox 和 Chrome 上有效，但在 Internet Explorer、所有版本、所有 Windows 版本中总是失败。

我有一个根据 Microsoft 的 HTML5 建议设置的网页。模态窗口提供视频：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    </head>
    <body>
        <div class="popupwindow">
            <video controls autoplay preload="auto" style="width:100%">
                <source src="streamvideo.rails?file=$fileName" type="video/mp4" />
            </video>
        </div>
    </body>
</html>

streamvideo.rails 是 Castle Monorail C# 函数，它以 Stream 的形式获取云服务器中的视频文件，并将其作为范围请求流回。

首先，我确定这不是常见的问题：编解码器可能没问题，响应的 Content-Type 正确（视频/mp4），IE 甚至可以正确拾取视频，至少最初是这样。浏览器内的网络嗅探器显示它收到了一小段 MP4 文件，然后停止了。

我注意到一个奇怪的地方：IE 没有将视频请求构建为范围请求，而 Chrome/FF 是。 Chrome 的标题：

GET [my URL]?fileName=e65b0b0d-0911-4e3f-bc71-7b5d5a65db57.mp4 HTTP/1.1
Host: localhost
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36
Accept: */*
DNT: 1
Accept-Language: en-US,en;q=0.8
Range: bytes=0-6130

IE 的标题：

GET [same URL] HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept: */*
GetContentFeatures.DLNA.ORG: 1
Pragma: getIfoFileURI.dlna.org
Accept-Language: en-US
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
DNT: 1
Host: localhost

我推测如果我解决了这个差异，问题就会消失。那么：为什么 IE 决定不提出范围请求？我怎么能强迫它？如果您认为我在寻找虚假线索，我还能检查什么？

【问题讨论】：

您找到任何解决方案了吗？我遇到了同样的问题，我的文件在 Chrome 和 Firefox 中像魅力一样工作和流式传输，但 IE 有些如何在播放前下载整个文件。我不想对它们进行网络优化以供播放。我想要的是 IE 应该能够像其他浏览器一样进行范围请求并让它播放。
不幸的是，我认为我没有这样做。 “解决方案”是将项目交给其他人，后者迅速将所有视频上传到 Vimeo。

标签： html internet-explorer video http-headers

【解决方案1】：

回复有点晚了。只是想如果有人搜索这个，我的回答会帮助他们。我发现，当 IE 请求视频内容时，“Accept-Ranges: Bytes”标头不像 Firefox 和 Chrome 那样存在，因此在第一次请求时将响应设置如下（这是一个 ASP.Net Core 示例）：

    response.Headers.Add("Accept-Ranges", "bytes");
    response.ContentLength = [length of actual video file];
    response.StatusCode = (int)HttpStatusCode.OK;
    response.ContentType = [ContentType of requested content];

当响应再次到达浏览器时，它将评估标头并设置视频控件以及具有正确标头的下一个请求。现在，当您验证 Range 标头是否存在时，它将存在并且流式传输的代码将正常工作。

希望这会有所帮助，它对我有用。

【讨论】：

【解决方案2】：

详细说明 Jean Roux 的回应：

通过范围请求和响应支持 HTML5 视频流。 MDN 有很好的介绍：https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests

W7 和 W8 上的 IE10 和 IE11 不会发出范围请求（没有 Range 标头）。根据 RFC，服务器可能会以 200 响应和整个文件内容进行响应。但这样做会导致 IE 无法播放文件（我不知道为什么，但基于开发工具中的网络选项卡，内容被截断，例如服务器发送 ~10MB 但 IE 只查看前几个 KB） .我不得不重新调整我的服务器，以便我响应 206、整个文件内容以及 Accept-Ranges 和 Content-Range 标头。

顺便说一句：你在 W10 发布之前问过这个问题。 W10 上的 Edge 和 IE11 都会发出范围请求。

【讨论】：

【解决方案3】：

我在 Android 上使用 Chrome 时遇到了同样的问题。缺少范围标头。对于 Internet Explorer，我做了这样的事情：

$http_range = (isset($_SERVER["HTTP_RANGE"])) ? $_SERVER["HTTP_RANGE"] : "bytes-0";

这在我的 PHP 脚本中提供视频/mp4 数据。它所做的只是检查是否设置了范围标头，如果没有，它将假定已请求文件的开头。 Internet Explorer 似乎足够聪明，可以在用户寻找视频的不同部分时接管，即生成所需的范围标头。

在 IE 中效果很好......但是，我在 Chrome 中尝试了上述方法，但仍然不满意 :((

【讨论】：

【解决方案4】：

我遇到了同样的问题。

MIME 设置正确。是视频/mp4。

我检查了 apache 配置。它支持视频/mp4和音频/mp4。

视频采用 H.264 编码。

我可以在 chrome 中看到视频，而不是在 IE 中（从 9、10、11 开始）。

我将视频尺寸从 1920 x 1280 更改为 720 x 720 并进行了编码。

而且效果很神奇。

现在我正在通过更改视频的宽度和高度来寻找它为什么会起作用。

【讨论】：

您是否有任何关于如何（如果您）解决问题的信息？我目前正走进同样的障碍。
@BRO_THOM 正如我所说，我所做的只是更改视频的宽度和高度，并在更改其宽度和高度之前使用相同的选项对其进行编码。而且我仍然不知道为什么会这样。抱歉。