寫(xiě)demo的時(shí)候遇到的問(wèn)題，想要記錄一下，正好也沒(méi)有發(fā)表過(guò)文章所以想借此記錄一下，內(nèi)容有很多是查詢資料獲得的，畢竟我只是個(gè)萌新。
以下內(nèi)容涉及到：Java 使用blob對(duì)H5視頻播放進(jìn)行加密
DplayerH5視頻播放器
js中Blob轉(zhuǎn)字符串
普通Mp4格式的視頻
使用Blob將普通格式的視頻加密并用Dplayer播放器進(jìn)行播放比較簡(jiǎn)單。
Java后臺(tái)將視頻以文件流的形式傳給前端
@ResponseBody
@RequestMapping("/getVideoSrc")
public OutputStream getVideoSrc(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse){
//1.創(chuàng)建文件對(duì)象
File f = new File("E:/test/1.mp4");
//2.獲取文件名稱(chēng)
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.由于火狐和其他瀏覽器顯示名稱(chēng)的方式不相同，需要進(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è)置輸出文件類(lèi)型
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對(duì)象
//創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
//配置請(qǐng)求方式、請(qǐng)求地址以及是否同步
xhr.open('POST', '/armystudy/blob/getVideoSrc', true);
//設(shè)置請(qǐng)求結(jié)果類(lèi)型為blob
xhr.responseType = 'blob';
//請(qǐng)求成功回調(diào)函數(shù)
xhr.onload = function(e) {
if (this.status == 200) {//請(qǐng)求成功
//獲取blob對(duì)象
var blob = this.response;
//獲取blob對(duì)象地址，并把值賦給容器
$("#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>
文章來(lái)源：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后臺(tái)不用變，只需要將js內(nèi)容進(jìn)行合并
//創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
//配置請(qǐng)求方式、請(qǐng)求地址以及是否同步
xhr.open('GET', '/test03', true);
console.log("請(qǐng)求")
//設(shè)置請(qǐng)求結(jié)果類(lèi)型為blob
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200 ){
//獲取blob對(duì)象
var blob = this.response;
var dp = new DPlayer({
container: document.getElementById('dplayer'),//播放器容器元素
theme: '#FADFA3', //控件的顏色
loop: false,//視頻循環(huán)播放
screenshot: true,//開(kāi)啟截圖，如果開(kāi)啟，視頻和視頻封面需要允許跨域
hotkey: true,//開(kāi)啟熱鍵，支持快進(jìn)、快退、音量控制、播放暫停
lang: 'zh-cn',//可選值: 'en', 'zh-cn', 'zh-tw'
volume: 0.7,//默認(rèn)音量，請(qǐng)注意播放器會(huì)記憶用戶設(shè)置，用戶手動(dòng)設(shè)置音量后默認(rèn)音量即失效
video: {
url: URL.createObjectURL(blob),//視頻鏈接
pic: '',//封面
type: 'hls',//'auto'可選值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定義類(lèi)型
}
});
}
}
xhr.send();
使用Blob加密.m3u8類(lèi)型的流媒體文件
這個(gè)方面內(nèi)容我查了很久的資料都沒(méi)有相關(guān)的內(nèi)容，在使用dplayer播放器情況下如果按照上面的那個(gè)方案使用blob將.m3u8文件進(jìn)行加密，會(huì)出現(xiàn)一個(gè)問(wèn)題：前端在請(qǐng)求.ts切片文件的時(shí)候的請(qǐng)求地址的前面會(huì)加上<kbd>blob:</kbd>導(dǎo)致請(qǐng)求錯(cuò)誤404，然后我一直陷入一個(gè)誤區(qū)：為什么非要將.m3u8文件使用Blob進(jìn)行加密隱藏。 可以將請(qǐng)求.m3u8的地址進(jìn)行隱藏，這樣可以達(dá)到一樣的目的，這是我的一個(gè)思路，如果大家有更好的思路可以評(píng)論出來(lái)，讓我學(xué)習(xí)一下。
將Bolb文件轉(zhuǎn)成字符串
var reader = new FileReader();
reader.onload = function(event){
var content = reader.result;//內(nèi)容就在這里
};
reader.readAsText(blob);
將上面的內(nèi)容整合一下就可以實(shí)現(xiàn)使用blob隱藏.m3u8的地址，達(dá)到和使用blob隱藏普通視頻格式一樣的效果。
//創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
//配置請(qǐng)求方式、請(qǐng)求地址以及是否同步
xhr.open('GET', '/test03', true);
console.log("請(qǐng)求")
//設(shè)置請(qǐng)求結(jié)果類(lèi)型為blob
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200 ){
//獲取blob對(duì)象
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,//開(kāi)啟截圖，如果開(kāi)啟，視頻和視頻封面需要允許跨域
hotkey: true,//開(kāi)啟熱鍵，支持快進(jìn)、快退、音量控制、播放暫停
lang: 'zh-cn',//可選值: 'en', 'zh-cn', 'zh-tw'
volume: 0.7,//默認(rèn)音量，請(qǐng)注意播放器會(huì)記憶用戶設(shè)置，用戶手動(dòng)設(shè)置音量后默認(rèn)音量即失效
video: {
url: content,//視頻鏈接
pic: '',//封面
type: 'hls',//'auto'可選值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定義類(lèi)型
}
});
}
reader.readAsText(blob);
}
}
xhr.send();
