HTML页面请求Mp4文件流，页面支持视频快进，前后端实现

三天打鱼两天晒网呦

已于 2022-04-25 22:23:34 修改

阅读量1.2k

点赞数

分类专栏： JAVA HTML 文章标签： java html

于 2022-04-25 22:19:54 首次发布

本文链接：https://blog.csdn.net/qq_18121845/article/details/124415894

版权

JAVA 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

该博客介绍了一种在HTML页面中嵌入视频的实现方式，通过`<video>`标签加载后端提供的视频资源。后端使用Java处理GET请求，根据请求参数返回指定文件，并依据请求头的Range字段进行字节范围响应，支持视频流处理。

摘要由CSDN通过智能技术生成

前端 html body 中加入如下

<video id="video" width="600" height="360" preload controls>
<source src="http://xxxxx/getFile?fileNameId=aaa&type=bbbb" type='video/mp4'> 
</video>

后端 controller 代码

	@RequestMapping(value = "/getFile")
    @ResponseBody
    public void getFile(HttpServletRequest request, HttpServletResponse response, @RequestParam("fileNameId") String fileNameId, @RequestParam("type") String type){
        InputStream is = null;
        ByteArrayOutputStream baos = null;
        OutputStream os = null;
        try {
            is = fileSvc.getFileById(fileNameId);
            baos = new ByteArrayOutputStream();
            os = response.getOutputStream();
            int ch;
            while (-1 != (ch = is.read())) {
                baos.write(ch);
            }
            byte[] data = baos.toByteArray();//Content-Type: video/mp4
            if(type.equals("mp4")){

                response.addHeader("Content-Type","video/mp4");
                String rangeStr = request.getHeader("Range");
                if(StringUtils.isEmpty(rangeStr)){
                    os.write(data);
                }else {
                    response.setHeader("Access-Control-Allow-Origin", "*");
                    response.addHeader("Content-Length","" + data.length);
                    response.addHeader("accept-ranges","bytes");
                    response.addHeader("Content-Range","bytes 0-" + (data.length-1) + "/"+ (data.length));
                    os.write(data);
                }
            }else {
                os.write(data);
            }
        } catch (IOException e) {
            if(e instanceof ClientAbortException){

            }else {
                e.printStackTrace();
            }
        }finally {
            try {
                if(is!=null)is.close();
                if(baos!=null)baos.close();
                if(os!=null)os.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }