正常的 m3u8 格式视频通过控制台是无法下载的,但是可以通过插件下载,下面介绍如何规避这个问题。
思路:后端生成一个一次性的密钥,前端放在请求头中,可以防止大部分插件下载。这里只说前端。
集成 DPlayer 播放器这里就不说了,网上一大推。
// 接口封装
disposable() {
return new Promise((resolve, reject) => {
axios.get('file/disposable').then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
});
},
// m3u8
let that = this;
this.dplayer = new DPlayer({
container: document.getElementById('page-content-view-video'),
autoplay: true,
hotkey: true,
video: {
url: 'http:xxxx.m3u8',
type: 'customHls',
customType: {
customHls: function(video, player) {
let config = {
xhrSetup: async function(xhr, url) {
// 这里是为了每个请求携带不同的一次性密钥
if(url.endsWith('.m3u8')) {
xhr.setRequestHeader('disposable', await that.$api.disposable());
}else if(url.endsWith('.ts')) {
xhr.setRequestHeader('disposable', await that.$api.disposable());
}
},
};
const hls = new window.Hls(config);
hls.loadSource(video.src);
hls.attachMedia(video);
},
}
},
});