解决kkfileview视频进度条无法拖动问题

young 1 2025-11-13

参考文档

现象

项目中使用kkfileview进行文件预览，用户反馈预览视频的时候，进度条无法进行拖拽。
进过测试，发现动了进度条，不管是拖拽还是点击，进度条都会立马回到起始位置。

解决

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

经过浏览器控制台查看，请求时，request header 中有Range 的header，响应中没有对应的header，故增加相关响应配置

首先判断要下载的文件是否为视频文件

......
// 在配置类中定义视频文件的后缀
private List<String> videoType = Arrays.asList("mp4","avi","wmv","mov","flv","mkv");
......
private boolean isVideo(String suffix){
       return fileViewProperties.getVideoType().stream().anyMatch(e -> StringUtils.equalsIgnoreCase(e, suffix));
}

然后添加响应头对应的响应

private void processVideoResponse(boolean isVideo,AttachmentModel attachmentModel,HttpServletRequest request,HttpServletResponse response){
        if (!isVideo){
            return ;
        }
        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("-")));
			// 由于上传时保留了media-type,所以直接采用原来的响应头，不进行单独设置
//            response.setHeader("Content-Type", "video/mp4");
		  // fileSize在文件上传时进行保存
            response.setContentLength(Math.toIntExact(attachmentModel.getFileSize()));

            response.setHeader("Content-Range", String.valueOf(range + (attachmentModel.getFileSize() - 1)));

            response.setHeader("Accept-Ranges", "bytes");

        }
    }

添加好相关的header后，发现文件可以正常预览，且可以通过进度条进行跳转

kkfileview