1.創建一個H5 <video>標簽
<video id="sound" type="video/mp4" controls="controls" autoplay="autoplay"
webkit-playsinline="true" playsinline="true" heigth="100%"></video>
2.創建請求獲取視頻源,並將視頻源轉為blob對象
//創建XMLHttpRequest對象 var xhr = new XMLHttpRequest(); //配置請求方式、請求地址以及是否同步 xhr.open('POST', '/armystudy/blob/getVideoSrc', true); //設置請求結果類型為blob xhr.responseType = 'blob'; //請求成功回調函數 xhr.onload = function(e) { if (this.status == 200) {//請求成功 //獲取blob對象 var blob = this.response; //獲取blob對象地址,並把值賦給容器 $("#sound").attr("src", URL.createObjectURL(blob)); } }; xhr.send();
3.Java后台將視頻轉為視頻源(本地視頻)
@ResponseBody @RequestMapping("/getVideoSrc") public OutputStream getVideoSrc(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse){ //1.創建文件對象 File f = new File("E:/test/1.mp4"); //2.獲取文件名稱 String fileName = f.getName(); //3.導出文件 String agent = httpServletRequest.getHeader("User-Agent").toUpperCase(); InputStream fis = null; OutputStream os = null; try { //4.獲取輸入流 fis = new BufferedInputStream(new FileInputStream(f.getPath())); byte[] buffer; buffer = new byte[fis.available()]; fis.read(buffer); httpServletResponse.reset(); //5.由於火狐和其他瀏覽器顯示名稱的方式不相同,需要進行不同的編碼處理 if(agent.indexOf("FIREFOX") != -1){//火狐瀏覽器 httpServletResponse.addHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("GB2312"),"ISO-8859-1")); }else{//其他瀏覽器 httpServletResponse.addHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8")); } //6.設置response編碼 httpServletResponse.setCharacterEncoding("UTF-8"); httpServletResponse.addHeader("Content-Length", "" + f.length()); //設置輸出文件類型 httpServletResponse.setContentType("video/mpeg4"); //7.獲取response輸出流 os = httpServletResponse.getOutputStream(); os.flush(); //8.輸出文件 os.write(buffer); }catch(Exception e){ System.out.println(e.getMessage()); } finally{ //關閉流 try { if(fis != null){ fis.close(); } if(os != null){ os.flush(); } if(os != null){os.close(); } } catch (IOException e) { System.out.println(e.getMessage()); } } return os; }
4.Java后台將視頻轉為視頻源(網絡視頻)
@RequestMapping("/getVideoBlob_V2") public OutputStream getVideoBlob_V2(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) { String httpUrl = "http://alivideo.g2s.cn/zhs_yanfa_150820/ablecommons/demo/201802/6b79b99f40b14722af5cc90eeb517af6.mp4"; // 1.下載網絡文件 URL url = null; try { url = new URL(httpUrl); } catch (MalformedURLException e1) { e1.printStackTrace(); } InputStream inStream = null; OutputStream outputStream = null; try { //2.獲取鏈接 URLConnection conn = url.openConnection(); //3.輸入流 inStream = conn.getInputStream(); httpServletResponse.reset(); httpServletResponse.addHeader("Content-Disposition", "attachment;filename=" + httpUrl); //6.設置response編碼 httpServletResponse.setCharacterEncoding("UTF-8"); httpServletResponse.addHeader("Content-Length", "" + 47514017); //設置輸出文件類型 httpServletResponse.setContentType("video/mpeg4"); //7.獲取response輸出流 outputStream = httpServletResponse.getOutputStream(); int byteRead; while ((byteRead = inStream.read()) != -1) { outputStream.write(byteRead); } } catch (IOException e) { e.printStackTrace(); System.out.println(e); } finally { try { inStream.close(); outputStream.close(); } catch (IOException e) { e.printStackTrace(); } } return outputStream; }