首页 > 编程知识 正文

谷歌浏览器中video播放视频进度条无法拖动,一点击进度条就回到0重新播放

时间:2023-05-03 13:55:25 阅读:282977 作者:3229

问题:一个.mp4视频进度条无法拖动,只在谷歌浏览器中有问题,火狐中没有问题,console也不报错。

初步排查到的bug原因:与Video标签适配的请求响应有问题。

无法拖动的视频响应截图如下:

能正常拖动的视频响应截图如下:

如何去解决:

1.Chrome浏览器默认请求会在 Header 添加一个Range如下:服务器要做的就是响应这个Header

Range: bytes=0-

 2.服务器接收到这个Header以后,响应的Header如下,同时需要设置状态码为206:

Accept-Ranges: bytesContent-Length: 2097152Content-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); }

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。