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

1 篇文章 0 订阅

前端 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();
            }
        }
    }

还总结啥呢,直接贴代码不香嘛,拿走

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值