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

本文主要是介绍谷歌浏览器中video播放视频进度条无法拖动，一点击进度条就回到0重新播放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：一个.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 要 -1var startIndex= 0;//视频每节长度为2MBvar 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);}

 

这篇关于谷歌浏览器中video播放视频进度条无法拖动，一点击进度条就回到0重新播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---