使用 RangeFilePathResult 在 Chrome 中出现 HTML5 视频错误答案

【问题标题】：Error with HTML5 video in Chrome, using RangeFilePathResult使用 RangeFilePathResult 在 Chrome 中出现 HTML5 视频错误
【发布时间】：2013-04-26 17:18:28
【问题描述】：

使用 MVC3 和 flowplayer，我有一个视频播放器，用于获取具有以下标记的视频文件：

<div id="video">
    <div id="video-viewport">
      <!-- The data-ratio is a decimal number represeting the height of the video in proportion to the width -->
      <div class="flowplayer" data-swf="http://releases.flowplayer.org/5.1.1/flowplayer.swf"
        data-ratio="0.417" data-engine="html5" data-keyboard="true" data-native_ipad_fullscreen="true"
        data-volume="0.6">
        <video>
       <!-- By default Flowplayer attempts to use HTML5 video and if it's not
       supported then Flash (9.0+) and MP4 is used. MP4 is enough for
       complete browser support but providing WebM and/or OGG gives you
       broader support for HTML5 video which is the preferred technology. -->
     <!-- MP4 gives a complete cross browser support with the aid of Flash -->
     <source type="video/mp4" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMp4Video.Id })"/>
     <!-- WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browser -->
      <source type="video/webm" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMVideo.Id })"/> 
     <!-- OGG gives HTML5 support for older versions of Firefox and Opera -->
      <source type="video/ogv" src="@Url.Action("GetVideo", "Video", new { id = Model.OgvVideo.Id })"/> 
      </video>
      </div>
    </div>
  </div> <!--/video-->

在控制器中我有这个方法返回视频：

    public ActionResult GetVideo(string id) {
                ...
        var cd = new System.Net.Mime.ContentDisposition {
        Inline = false
    };
    FileInfo info = new FileInfo(path);
    Response.AppendHeader("Content-Disposition", cd.ToString());
    return new RangeFilePathResult(MimeType, info.FullName, info.LastWriteTimeUtc, info.Length); 
 }

RangeFilePathResult 一直是返回部分响应的救命稻草，这在 Firefox 和 IE 中一切正常，但在 Chrome 中我经常遇到错误：

“发送 http 标头后服务器无法设置状态”。

播放器本身崩溃，在页面上显示以下错误：

html5：视频未正确编码

我仍在尝试了解部分响应，但这可能是因为 RangeFileResult 为每个部分响应设置了状态代码 206？或者我这里还有什么遗漏的吗？

编辑：如果我通过 RangeFileResult 代码进行调试并检查 Chrome 中的“网络”选项卡，我注意到对控制器方法的请求返回部分响应，状态为待处理，只要代码打到这一行：

context.HttpContext.Response.Flush();

这似乎有一个延迟，有时超过 10 秒，但当这完成后，响应状态变为 206。但通常在播放视频时，状态再次变为 取消了，这是

html5：视频未正确编码

消息出现在视频播放器上。

Edit2：我得到的回复如下（3个回复，第一个和第三个被取消，第二个有206状态：

请求

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

请求标头

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax
Host:localhost:64729
Range:bytes=0-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

响应标头

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:7362920
Content-Range:bytes 0-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

请求

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

请求标头

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax
Host:localhost:64729
Range:bytes=7339303-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

响应标头

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:23617
Content-Range:bytes 7339303-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

请求

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

请求标头

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax 
Host:localhost:64729
Range:bytes=48-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

响应标头

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:7362872
Content-Range:bytes 48-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

【问题讨论】：

请删除Response.AppendHeader("Content-Disposition", cd.ToString()) 并重试（您在流式传输视频时不需要 Content-Disposition 标头，当然Inline = false 也不需要）。除此之外，我目前没有看到任何问题。让我们知道您的视频文件是如何编码的（并非所有浏览器都支持所有编码）。
谢谢，我试试看
@tpeczek，如果我删除您提到的代码，问题仍然存在。另外，我没有使用任何我知道的编码，默认值是什么？
您必须使用某种编码（编码是创建视频文件的格式）。三个主要是 MPEG-4 (H.264)、WebM (VP8)、OGG (Theora)，如果要覆盖所有浏览器，通常需要提供一种以上的格式。您可以在此处阅读更多相关信息：drupal.org/node/1565532（本文还提供了正确编码的示例文件用于测试目的）。
抱歉，我使用 FFMpeg 为每个上传的视频创建一个 MP4、WebM 和 Ogv 视频，所以这些格式中的每一个都可以在我的视频页面上使用。

标签： asp.net-mvc-3 html video-streaming flowplayer lib.web.mvc

【解决方案1】：

经过一些密集测试（感谢您提供示例项目），Chrome 似乎在 mp4 格式方面存在一些问题。

为了修复这种情况，将 webm 移动为第一种格式就足够了，因此 Chrome 会选择它而不是 mp4（IE 会跳到 mp4，所以它也可以工作）：

<div id="video">
    <div id="video-viewport">
        <div class="flowplayer" data-swf="http://releases.flowplayer.org/5.1.1/flowplayer.swf" data-ratio="0.417" data-engine="html5" data-keyboard="true" data-native_ipad_fullscreen="true" data-volume="0.6">
            <video>
                <source type="video/webm" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMVideo.Id })"/> 
                <source type="video/ogv" src="@Url.Action("GetVideo", "Video", new { id = Model.OgvVideo.Id })"/>
                <source type="video/mp4" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMp4Video.Id })"/>
            </video>
        </div>
    </div>
</div>

【讨论】：

我在 GetRanges 方法的末尾添加了代码（在 else 语句中），现在第一个响应是状态 200。但问题仍然存在。
此外，Firefox 视频仍在播放，但代码更改似乎影响了它，因为您无法在视频中向前跳过，并且它不显示缓冲条。
@Tyler 我需要你的复制项目，我无法从静态分析中找出更多信息。滴滴你检查了我发给你的文章中的示例文件，以确保它没有编码问题？
我还没有收到您的任何电子邮件。我将尝试将示例项目放在一起。感谢大家的帮助
@tepczek。您好，我已向您博客中列出的电子邮件地址发送了一个示例解决方案。抱歉耽搁了

【解决方案2】：

你可以试试这个，它解决了我的问题，看起来和你的一样。

<script>
    flowplayer.conf={
        engine:'flash'
    };
</script>

【讨论】：