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

admin管理员组

文章数量:1579085

问题：一个.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);
        }

本文标签： 进度条拖动器中视频Video