后台代碼:
/** * 獲取視頻流 * @param response * @param videoId 視頻存放信息索引 * @return * @author xWang * @Date 2020-05-20 */ @RequestMapping("/getVideo/{videoId}") public void getVideo(HttpServletRequest request,HttpServletResponse response,@PathVariable Integer videoId) { //視頻資源存儲信息 VideoSource videoSource = videoSourceService.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,而不是200 response.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>