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;
}
