java后端视频流接口和前端video标签

/*** 获取视频流* @param response* @param videoId 视频存放信息索引*/@RequestMapping("/getVideo")public void getVideo(HttpServletRequest request,HttpServletResponse response,Integer videoId){//数据库视频信息Video video = videoService.selectById(videoId);response.reset();//获取从那个字节开始读取文件String rangeString = request.getHeader("Range");try {//获取响应的输出流OutputStream outputStream = response.getOutputStream();File file = new File(videoSource.getFileAddress());if(file.exists()){RandomAccessFile targetFile = new RandomAccessFile(file, "r");long fileLength = targetFile.length();//播放if(rangeString != null){long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));//设置内容类型response.setHeader("Content-Type", "video/mp4");//设置此次相应返回的数据长度response.setHeader("Content-Length", String.valueOf(fileLength - range));//设置此次相应返回的数据范围response.setHeader("Content-Range", "bytes "+range+"-"+(fileLength-1)+"/"+fileLength);//返回码需要为206，而不是200response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);//设定文件读取开始位置（以字节为单位）targetFile.seek(range);}else {//下载//设置响应头，把文件名字设置好response.setHeader("Content-Disposition", "attachment; filename="+videoSource.getFileName() );//设置文件长度response.setHeader("Content-Length", String.valueOf(fileLength));//解决编码问题response.setHeader("Content-Type","application/octet-stream");}byte[] cache = new byte[1024 * 300];int flag;while ((flag = targetFile.read(cache))!=-1){outputStream.write(cache, 0, flag);}}else {String message = "file:"+videoSource.getFileName()+" not exists";//解决编码问题response.setHeader("Content-Type","application/json");outputStream.write(message.getBytes(StandardCharsets.UTF_8));}outputStream.flush();outputStream.close();} catch (FileNotFoundException e) {} catch (IOException e) {}}

<!-- poster:视频封面图片地址 -->
<video id="my-video" class="video-js vjs-big-play-centered" controls="controls" poster=""><source src="/videoSource/getVideo/${videoId}" type='video/mp4'><p class="vjs-no-js">你的浏览器貌似不支持 %>_<%<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video><!-- 实测使用 controlsList="nodownload"关闭下载--><video width="100%" height="270px" controls autoplay id="videoId" style="margin-top: 2px;"  controlsList="nodownload"><source  :src="videoUrl" type="video/mp4"></video>

java后端视频流接口和前端video标签相关推荐

关于前端video标签视频无法拖动进度条快进问题(Django)
因为后端返回的是视频的文件流,并不是视频文件地址.后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如Google Chrome...). django中常用返回文件流写法: c ...
php前端java后端开发_java是前端还是后端
java是前端还是后端对于java来讲那个以后发展的会更好 java是前端还是后端这个问题问的其实并没有什么技术含量,但是出于还有很多的朋友对于java还不是很熟悉,对于在作java后端还要懂前端的 ...
java后端返回二进制图片前端进行展示详解
java后端代码: /*** 图片展示* @param map* @return*/@ApiOperation("图片展示")@PostMapping("/getPuct ...
Java后端feign接口调用
现如今微服务架构十分流行,而采用微服务构建系统也会带来更清晰的业务划分和可扩展性.java如果使用微服务就离不开springcloud,我这里是把服务注册到nacos上,各个服务之间的调用使用feig ...
video标签学习 xgplayer视频播放器分段播放mp4
文章目录学习链接目标 video标签自带视频和制作的视频区别 video标签的src属性本地视频文件前端代码播放效果服务器视频文件示例1 后端代码前端代码播放效果示例2 后端代码 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
前后端分离后的前端时代
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...
前后端分离后的前端时代 1
本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家在传统的像ASP,JSP和PH ...
前后端分离后的前端时代，使用前端技术能做哪些事？
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...

java后端视频流接口和前端video标签

java后端视频流接口和前端video标签相关推荐

最新文章

热门文章