前端进行src地址blob加密处理

这里我用的axios;

getBlob(url) {
     
	//封装一个Promise
	return new Promise(resolve => {
     
		//发送axios请求
		axios.get(url, {
     
				responseType: 'blob'
			})
			.then(response => {
     
				if (response.status == 200) {
     
					//请求成功
					let blob = URL.createObjectURL(response.data);
					resolve(blob); //resolve将加密后的url地址返回出去
				}
			})
			.catch(error => {
     
				console.log(error);
			});
	})
}

使用的话

async mounted() {
     //放到放到mounted里面加上async异步
	console.log('=======挂载dom========');
	let url = 'http://localhost:8080/static/video/DATA000.MP4'; //资源地址(get请求)
	let bloburl = await this.$methods.getBlob(url); //await同步获取Promise返回的blob值,一定要同步阻塞
	const dp = new DPlayer({
     
		container: document.getElementById('dplayer'),
		video: {
     
			url: bloburl //我这里赋值给DPlayer
		}
	});
}

最终效果:就能实现YouTube,b站,虎牙…等同样的效果了
前端进行src地址blob加密处理_第1张图片

你可能感兴趣的:(js,blob,js)