使用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
经过一些密集的测试(感谢您的样本项目),看起来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>
你可以试试这个,它解决了我的问题,似乎与你的相同。
<script>
flowplayer.conf={
engine:'flash'
};
</script>