HTML5视频播放的一点儿小收获
事情的起因是因为本人最近在淘宝网上买了一套Photoshop的视频,但是有个问题就是,它只能在淘宝学习模块观看,但是淘宝学习做的不能用难用来形容(相比网易云课堂、慕课网),于是我萌生了把视频下载下来的想法。
开始准备工作,以为满心欢喜的打开了F12,准备把它抓取出来。然后就开始问题来了:
然后,发现它的URL是一个blob,由此,开始引入Blob类。
我才疏学浅,就不进行解释了,直接贴出MDN的地址 。
大概知道就是,这个东西被后台“加密”了一次(后面了解了这个技术以后,发现主流的iqiyi、bilibili都是这样的做法)。
这是个怎么样的过程呢,其实就是后台再向前台返回流的时候,前台以{ responseType: 'blob'}的形式进行接收。这样的话,我们的多媒体文件就没有直接暴露在浏览器中,就相对来说不会轻易的被爬虫获取。因为我是参考的网上的高人的博客,雷同的部分就不多追谁,在此,我仅仅贴出部分代码:
import Hls from 'hls.js';
import axios from 'axios';
export default {
name: 'home',
data () {
return {
videoSrc: "这是一个正确指向的url"
}
},
mounted(){
var video = this.$refs.hls;
axios.get(this.videoSrc, { responseType: 'blob' }).then(response => {
if(typeof Hls !== undefined && Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(URL.createObjectURL(response.data));
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,() => { video.play(); });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = this.videoSrc;
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
});
}
}
经过这样的折腾之后(请忽略代码中的Hls,稍后会提到),其实对于那种比较小的视频(当时我测试的),此时其实已经能够应付了,但是我比较好奇了,假如说我一个1G的视频文件也直接这样传输到前台,可能吗?我觉得是肯定不可能吧。
于是继续查资料,终于找到了目前主流的做法。跳转门,雷同的我就不多叙述,由此引入上面代码中的HLS(本文中我也仅仅只研究了HLS,RTMP尚未覆盖),因为HLS是Apple公司开发的技术,默认只有在Safari中支持,需要在Chrome等浏览器中支持需要引入hls.js(如果你用video.js那就另当别论了哟)。
最后,发现淘宝学习也是用的HLS,于是我想把视频下载下来的初衷似乎无法完成了,不过感谢这个机会让自己了解到这么多东西,提前祝大家新年快乐,希望能够帮到大家。