寫demo的時候遇到的問題，想要記錄一下，正好也沒有發(fā)表過文章所以想借此記錄一下，內(nèi)容有很多是查詢資料獲得的几于，畢竟我只是個萌新。
以下內(nèi)容涉及到：Java 使用blob對H5視頻播放進(jìn)行加密
DplayerH5視頻播放器
js中Blob轉(zhuǎn)字符串
普通Mp4格式的視頻
使用Blob將普通格式的視頻加密并用Dplayer播放器進(jìn)行播放比較簡單沿后。
Java后臺將視頻以文件流的形式傳給前端
@ResponseBody
@RequestMapping("/getVideoSrc")
public OutputStream getVideoSrc(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse){
//1.創(chuàng)建文件對象
File f = new File("E:/test/1.mp4");
//2.獲取文件名稱
String fileName = f.getName();
//3.導(dǎo)出文件
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.由于火狐和其他瀏覽器顯示名稱的方式不相同沿彭，需要進(jìn)行不同的編碼處理
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.設(shè)置response編碼
httpServletResponse.setCharacterEncoding("UTF-8");
httpServletResponse.addHeader("Content-Length", "" + f.length());
//設(shè)置輸出文件類型
httpServletResponse.setContentType("video/mpeg4");
//7.獲取response輸出流
os = httpServletResponse.getOutputStream();
os.flush();
//8.輸出文件
os.write(buffer);
}catch(Exception e){
System.out.println(e.getMessage());
} finally{
//關(guān)閉流
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;
}
前端使用JavaScript將視頻文件接收并轉(zhuǎn)為Blob對象
//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//配置請求方式、請求地址以及是否同步
xhr.open('POST', '/armystudy/blob/getVideoSrc', true);
//設(shè)置請求結(jié)果類型為blob
xhr.responseType = 'blob';
//請求成功回調(diào)函數(shù)
xhr.onload = function(e) {
if (this.status == 200) {//請求成功
//獲取blob對象
var blob = this.response;
//獲取blob對象地址尖滚，并把值賦給容器
$("#sound").attr("src", URL.createObjectURL(blob));
}
};
xhr.send();
html
<video id="sound" type="video/mp4" controls="controls" autoplay="autoplay"
webkit-playsinline="true" playsinline="true" heigth="100%"></video>
文章來源：https://cloud.tencent.com/developer/article/1335832
使用Dplayer播放器
首先先要引用Dplayer的js文件
<script src="DPlayer.min.js"></script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
screenshot: true,
video: {
url: 'demo.mp4',
pic: 'demo.jpg',
thumbnails: 'thumbnails.jpg',
},
subtitle: {
url: 'webvtt.vtt',
},
danmaku: {
id: 'demo',
api: 'https://api.prprpr.me/dplayer/',
},
});
將Blob和使用Dplayer播放視頻進(jìn)行整合
java后臺不用變喉刘，只需要將js內(nèi)容進(jìn)行合并
//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//配置請求方式、請求地址以及是否同步
xhr.open('GET', '/test03', true);
console.log("請求")
//設(shè)置請求結(jié)果類型為blob
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200 ){
//獲取blob對象
var blob = this.response;
var dp = new DPlayer({
container: document.getElementById('dplayer'),//播放器容器元素
theme: '#FADFA3', //控件的顏色
loop: false,//視頻循環(huán)播放
screenshot: true,//開啟截圖漆弄，如果開啟睦裳，視頻和視頻封面需要允許跨域
hotkey: true,//開啟熱鍵，支持快進(jìn)撼唾、快退廉邑、音量控制、播放暫停
lang: 'zh-cn',//可選值: 'en', 'zh-cn', 'zh-tw'
volume: 0.7,//默認(rèn)音量倒谷，請注意播放器會記憶用戶設(shè)置蛛蒙，用戶手動設(shè)置音量后默認(rèn)音量即失效
video: {
url: URL.createObjectURL(blob),//視頻鏈接
pic: '',//封面
type: 'hls',//'auto'可選值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定義類型
}
});
}
}
xhr.send();
使用Blob加密.m3u8類型的流媒體文件
這個方面內(nèi)容我查了很久的資料都沒有相關(guān)的內(nèi)容，在使用dplayer播放器情況下如果按照上面的那個方案使用blob將.m3u8文件進(jìn)行加密渤愁，會出現(xiàn)一個問題：前端在請求.ts切片文件的時候的請求地址的前面會加上<kbd>blob:</kbd>導(dǎo)致請求錯誤404牵祟，然后我一直陷入一個誤區(qū)：為什么非要將.m3u8文件使用Blob進(jìn)行加密隱藏。 可以將請求.m3u8的地址進(jìn)行隱藏猴伶，這樣可以達(dá)到一樣的目的课舍，這是我的一個思路，如果大家有更好的思路可以評論出來他挎，讓我學(xué)習(xí)一下。
將Bolb文件轉(zhuǎn)成字符串
var reader = new FileReader();
reader.onload = function(event){
var content = reader.result;//內(nèi)容就在這里
};
reader.readAsText(blob);
將上面的內(nèi)容整合一下就可以實現(xiàn)使用blob隱藏.m3u8的地址捡需，達(dá)到和使用blob隱藏普通視頻格式一樣的效果办桨。
//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//配置請求方式、請求地址以及是否同步
xhr.open('GET', '/test03', true);
console.log("請求")
//設(shè)置請求結(jié)果類型為blob
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200 ){
//獲取blob對象
var blob = this.response;
var reader = new FileReader();
reader.onload = function (event) {
var content = reader.result;//獲取Blob的內(nèi)容
var dp = new DPlayer({
container: document.getElementById('dplayer'),//播放器容器元素
theme: '#FADFA3', //控件的顏色
loop: false,//視頻循環(huán)播放
screenshot: true,//開啟截圖站辉，如果開啟呢撞，視頻和視頻封面需要允許跨域
hotkey: true,//開啟熱鍵，支持快進(jìn)饰剥、快退殊霞、音量控制、播放暫停
lang: 'zh-cn',//可選值: 'en', 'zh-cn', 'zh-tw'
volume: 0.7,//默認(rèn)音量汰蓉，請注意播放器會記憶用戶設(shè)置绷蹲，用戶手動設(shè)置音量后默認(rèn)音量即失效
video: {
url: content,//視頻鏈接
pic: '',//封面
type: 'hls',//'auto'可選值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定義類型
}
});
}
reader.readAsText(blob);
}
}
xhr.send();
