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

使用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", "bytes");}

后端文件下载完整代码参考service层

/*** @Description: 文件下载:以流的方式* @Date: 2022/11/14*/public static String downloadFile(String filePath, HttpServletRequest request, HttpServletResponse response) {logger.info("传入路径参数" + filePath);FileInputStream fis = null;BufferedInputStream bis = null;try {//设置文件路径File file = new File(filePath);//获取文件名String fileName = file.getName();//转码String encodeFileName = URLEncoder.encode(fileName, "utf-8");logger.info("文件名" + file.getName());/** 当前端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", "bytes");}//告诉浏览器输出内容为流response.setContentType("application/octet-stream");// 设置文件名response.addHeader("Content-Disposition", "attachment;fileName=" + encodeFileName);response.addHeader("Content-Length", "" + file.length());byte[] buffer = new byte[1024];fis = new FileInputStream(file);bis = new BufferedInputStream(fis);OutputStream os = response.getOutputStream();int i = bis.read(buffer);while (i != -1) {os.write(buffer, 0, i);i = bis.read(buffer);}os.flush();} catch (Exception e) {e.printStackTrace();} finally {if (bis != null) {try {bis.close();} catch (IOException e) {e.printStackTrace();}}if (fis != null) {try {fis.close();} catch (IOException e) {e.printStackTrace();}}}logger.info("下载成功");return null;}

 简单点的方法,直接在controller层写,不用service层,比较不规范

/*** 文件下载接口   http://localhost:8080/file/{fileName}** @param fileName*/@GetMapping("/{fileName}")public void downLoad(@PathVariable String fileName, HttpServletRequest request, HttpServletResponse response) throws IOException {// 根据文件的唯一标识码获取文件File file = new File(uploadParentPath, fileName);/** 方式一:* 当前端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", "bytes");}*///方式二://解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置放,//拖动或点击进度条会立即反弹回起点播放的问题,直接设置下面两行就行response.setHeader("Accept-Ranges", "bytes");response.setContentLength(Math.toIntExact(file.length()));// 设置输出流的格式,告诉浏览器输出内容为流response.setContentType("application/octet-stream");// 设置文件名response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));ServletOutputStream os = response.getOutputStream();// 读取文件的字节流os.write(FileUtil.readBytes(file));os.flush();os.close();}

以上解决方案同样可解决使用kkFileView进行文件视频预览不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放的问题,以下是使用kkFileView进行文件视频预览的前端代码

methods:{/*预览图片文件图片视频*/preview(url){window.open('https://file.keking.cn/onlinePreview?url='+ encodeURIComponent(window.btoa((url))))},},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！