问题:一个.mp4视频进度条无法拖动,只在谷歌浏览器中有问题,火狐中没有问题,console也不报错。
初步排查到的bug原因:与Video标签适配的请求响应有问题。
无法拖动的视频响应截图如下:
能正常拖动的视频响应截图如下:
如何去解决:
1.Chrome浏览器默认请求会在 Header 添加一个Range如下:服务器要做的就是响应这个Header
Range: bytes=0-
2.服务器接收到这个Header以后,响应的Header如下,同时需要设置状态码为206:
Accept-Ranges: bytes
Content-Length: 2097152
Content-Range: bytes 0-2097151/38696534
3.百度了个服务端设置响应的代码,如下(我不太懂后台代码,仅供参考,有更好的解决方案,欢迎大家留言哈~):
public ActionResult Video(Guid id)
{
//数据库存储的文件路径
var archive = ManagerFactory.ArchiveManager.GetVideoArchive(id);
//物理绝对路径
var path = Server.MapPath("~/" + archive.Path);
//设置响应头
HttpContext.Response.Headers.Add("Accept-Ranges", "bytes");
//判定是否响应Chrome中的Range请求
var rangeQuery = HttpContext.Request.Headers["Range"];
if (rangeQuery.IsNotNullAndNotEmpty())
{
//startIndex 与 endIndex 是索引值,是0开始的,注意在与 Length 比较的时候 Length 要 -1
var startIndex= 0;
//视频每节长度为2MB
var length = 2 * 1024 * 1024;
var range = rangeQuery.Split('=')[1].Split('-');
startIndex= range[0].ParseToInt();
var endIndex = startIndex + length - 1;
var fileLength = (int)archive.Length;
//是否指定了索引终结点
if (range[1].IsNotNullAndNotEmpty())
{
endIndex = range[1].ParseToInt();
}
if (endIndex <= startIndex )
{
endIndex = startIndex + length - 1;
}
if (endIndex > fileLength - 1)
{
endIndex = fileLength - 1;
}
//关键设置
HttpContext.Response.Headers.Add("Content-Range", $"bytes {startIndex}-{endIndex}/{archive.Length}");
//关键设置
HttpContext.Response.StatusCode = 206;
//按照索引读取文件流
using (var fs = System.IO.File.OpenRead(path))
{
var buffer = new byte[endIndex - startIndex + 1];
fs.Position = startIndex ;
fs.Read(buffer, 0, buffer.Length);
return File(buffer, archive.ContentType);
}
}
//如果未设置则返回整个文件
return File(path, archive.ContentType);
}