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

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

 

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
如果你在Swiper组件嵌入了视频播放,但是发现进度条无法拖拽或者点击调整播放进度,可能是因为Swiper组件自身的事件冲突导致的。此时可以尝试禁用Swiper组件的滑动事件,让视频播放组件接收到用户的拖拽和点击事件。 具体地,你可以在Swiper组件上使用`touchstart`和`touchmove`事件来禁止Swiper的滑动事件,然后在视频播放组件上使用`mousedown`和`mousemove`事件来接收用户的拖拽和点击事件。代码示例如下: ```javascript var mySwiper = new Swiper('.swiper-container', { // 禁用Swiper的滑动事件 on: { touchstart: function(e) { e.stopPropagation(); }, touchmove: function(e) { e.stopPropagation(); } } }); // 视频播放组件的拖拽和点击事件 var video = document.getElementById('my-video'); var progress = document.getElementById('my-progress'); progress.addEventListener('mousedown', function(e) { var rect = progress.getBoundingClientRect(); var x = e.clientX - rect.left; var percent = x / rect.width; video.currentTime = video.duration * percent; }); progress.addEventListener('mousemove', function(e) { if (e.buttons === 1) { var rect = progress.getBoundingClientRect(); var x = e.clientX - rect.left; var percent = x / rect.width; video.currentTime = video.duration * percent; } }); ``` 在上面的代码,`mySwiper`是一个Swiper组件的实例,`video`是一个视频播放组件的实例,`progress`是一个视频播放进度条的DOM元素。我们在Swiper组件上使用`touchstart`和`touchmove`事件来禁止Swiper的滑动事件,然后在视频播放组件上使用`mousedown`和`mousemove`事件来接收用户的拖拽和点击事件。注意,我们在`mousemove`事件判断`e.buttons`是否为1,以确保只有在鼠标左键按下时才会调整视频播放进度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐小亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值