HTML5视频播放的一点儿小收获

最新推荐文章于 2024-03-14 09:56:50 发布

原创最新推荐文章于 2024-03-14 09:56:50 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web前端

事情的起因是因为本人最近在淘宝网上买了一套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，于是我想把视频下载下来的初衷似乎无法完成了，不过感谢这个机会让自己了解到这么多东西，提前祝大家新年快乐，希望能够帮到大家。