介绍

最近因为想做个在手机上播放电脑上视频的软件，所以就去了解了一下springboot播放视频流的技术实现。网上查了很多资料，发现都有问题：

1. 最低级的，直接在springboot中读取了整个视频文件，然后把读取到的文件流，写入HttpServletResponse的OutputStream。这种方案问题很大，服务器耗内存，客户端卡顿，因为客户端得把整个视频下载好才能播放。
2. 稍好一点的，意识到要使用http的range来实现分片加载，就是客户端无需下载整个视频了，可以拖动进度条，分段请求服务器。但是，网上的教程，都是自己动手实现的，代码逻辑大概是这样：根据客户端要的文件片段， spring boot加载本地文件，切分出具体那段文件，返回给客户端。逻辑没问题，就是没必要这么干~因为，springboot自己本身就有这方面的代码。自己写又不稳定，又麻烦。

ResourceHttp Request Handler

ResourceHttpRequestHandler是springboot加载静态资源的一个类，平时是用来从你resources/statics等目录加载文件的。所以，这个类本身就是支持range请求数据的。我们要做的，就是把要播放的文件 File 传递给ResourceHttpRequestHandler就行，三五行代码搞定！

springboot服务端代码

第一步，先自定义实现一个ResourceHttpRequestHandler。代码如下：

 package com.tec666.moviebar.config;

import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.resource.ResourceHttpRequestHandler;

import javax.servlet.http.HttpServletRequest;

/**
 * @author longge93
 */@Component
public class Non static ResourceHttpRequestHandler  extends  ResourceHttpRequestHandler {

    public final static String ATTR_FILE = "NON-STATIC-FILE";

    @Override
    protected Resource getResource(HttpServletRequest request) {
        String filePath =  (String) request.getAttribute(ATTR_FILE);
        return new FileSystemResource(filePath);
    }
}
  

上面代码的意思是：从HttpServletRequest的attribute中读取文件path，然后返回给ResourceHttpRequestHandler处理。当然，这个attribute是我们后面传进来的。

第二步，在视频播放controller中，把本地文件路径传入ResourceHttpRequestHandler。代码如下：

 @Controller
@RequestMapping(value = "/api/baseResource")
public class BaseSourceApiController {

  
    @Autowired
     private  NonStaticResourceHttpRequestHandler nonStaticResourceHttpRequestHandler;


    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @RequestMapping(value = "/video", method = RequestMethod.GET)
    public  void  video(
            HttpServletRequest request,
            HttpServletResponse response
    ) {
        try {
            String path = "D:/abc.mp4";
            File file = new File(path);
            if (file. exists ()) {
                request.setAttribute(NonStaticResourceHttpRequestHandler.ATTR_FILE, path);
                nonStaticResourceHttpRequestHandler.handleRequest(request, response);
            } else {
                response.setStatus(HttpServletResponse.SC_NOT_FOUND);
                response.setCharacterEncoding(StandardCharsets.UTF_8.toString());
            }
        } catch ( Exception  e) {

        }
    }
}
  

参数解释：记得把上面代码中的path替换成你的路径，或者从controller请求参数里获取。

到此，整个springboot播放视频流的功能就实现了，感觉是全网最最简便的了。因为可以根据range返回视频流片段，所以客户端是可以随意拖动进度条，可以倍速播放的。相比把整个视频下载好再播放，这个方案才是yyds！

Vue前端播放器

我使用的是vue-video-player这个开源组件，你可以自己用npm安装一下，然后在你的项目中直接用就行。配置参数的时候，视频地址就填上面springboot的这个controller地址。

java 截取视频生成图片封面、GIF封面

主要分为两个功能：

1. java截取视频，把视频帧拆分成几张图片，用作视频封面。
2. java把几张图片拼接成一个gif图片。

这两个功能是在做播放器的时候，一起顺手实现的，网上的教程相对挺多的，如果有需要请点击右侧“联系作者”联系我，我再开单独的文章介绍。

播放器效果展示

我们打开 chrome 的开发者工具，查看播放视频时的网络请求，可以发现视频是被切分成小片段，根据你当前的播放进度，分片下载的。请看下图：

版权声明：《springboot+vue播放视频流（无需下载视频，可以拖动进度、倍速播放）》为CoderBBB作者「ʘᴗʘ」的原创文章，转载请附上原文出处链接及本声明。

原文链接：