解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放

最新推荐文章于 2025-06-17 11:43:16 发布

ywp2021

最新推荐文章于 2025-06-17 11:43:16 发布

阅读量7.4k

点赞数 9

CC 4.0 BY-SA版权

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/ywp2021/article/details/127845110

本文介绍了如何在使用Vue CLI 5.0.0和Vue 2.6.14构建的项目中，针对通过后台下载接口返回的视频流，解决谷歌浏览器拖动进度条问题。后端通过检查Range头并相应地设置Content-Type、Content-Length和Content-Range来确保流畅播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue/cli版本号: 5.0.0

使用vue版本号: 2.6.14

使用 vue-video-player 版本号: 5.0.2

解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放的问题

当前端video的src不是直接使用视频文件的地址，而是通过后台下载接口返回文件流时，后台返回流因为没为response的header设置一些参数，会在部分浏览器出现问题，比如在谷歌浏览器无法拖动进度条，因为Chrome浏览器默认请求会在 Header 添加一个Range如下：服务器要做的就是响应这个Header，所以做了Range的判断，存在则做一些处理

后端关键代码:

 /*
            * 当前端video的src不是直接使用视频文件的地址，而是通过后台下载接口返回文件流时，
            * 后台返回流因为没为response的header设置一些参数，
            *会在部分浏览器出现问题，比如在谷歌浏览器无法拖动进度条
            * Chrome浏览器默认请求会在 Header 添加一个Range如下：服务器要做的就是响应这个Header，
            * 所以做了Range的判断存在则做一些处理*/
            String rangeString = request.getHeader("Range");
            if (rangeString != null && rangeString.trim().length() > 0 && !"null".equals(rangeString)) {
                long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));

                response.setHeader("Content-Type", "video/mp4");

                response.setContentLength(Math.toIntExact(file.length()));//10000是视频文件的大小，上传文件时都会有这些参数的

                response.setHeader("Content-Range", String.valueOf(range + (file.length() - 1)));//拖动进度条时的断点，其中10000是上面的视频文件大小，改成你的就好

                response.setHeader("Accept-Ranges", "b