我们来分享一下就是怎么爬取这个视频。
其实一直以来在后台就会时不时的有粉丝来问我说怎么去爬这些网页的视频，还有就是就是问了就是说怎么爬这个blob的一些链接。那其实这两个东西的话基本都是一样。
那我们先看一下我们这个blob是什么，那这个就是一个MDN的(文档)
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
它的有一个解释就是说它这个blog对象就是一个类，文件对象就是文本或者二进制。那视频的话基本就是二进制的流，那我们去看这个视频的时候可以播放，等到我们按照常规的这个分析的时候，我们去打开浏览器的开发者工具 -> 元素，我们就发现这个链接是这样子的。
<video id="video-player" width="100%" controls="">
<source id="video-source" type="video/mp4" src="blob:http://localhost:5000/bd477c4d-4ecd-4939-862f-78c0a0d9cc42">
</video>
这个链接就放到爬虫里面，是爬不下来的，这个应该是很多人都已经去试过了。
那实际上的话，他这一个链接，并不是我们这个视频的实际的链接。那我们怎么去获取这个链接呢？
先来看看原始的网页代码：
<video id="video-player" width="100%" controls>
<source id="video-source" type="video/mp4">
</video>
可以看到网页上的原始 html 标签并没有包含任何视频的链接，但网页又能播放视频，那就只有一个解释，就是视频是通过 javascript 加载的。
以上的代码通过 javascript 处理后，就会变成我们经常看到的 blob 链接的。
我们在浏览器开发者工具这里切换到这个网络这里来，刷新一下网页，会看到一大堆加载的东西，有很多是类似的，而且在视频播放的过程中会不停地加载，这些就是视频的二进制流。
通常 javascript 加载视频的时候还会构造很多请求参数，包括加密等等，所以正常来说要爬视频是要逆向这个网页的 javascript。
以下是一个简单的加载视频的 javascript 示例代码。
const videoElement = document.getElementById('video-player');
const videoSource = document.getElementById('video-source');
// 使用 fetch 获取视频流
fetch('/video')
.then(response => {
const videoBlob = response.blob(); // 获取 Blob 对象
return videoBlob;
})
.then(blob => {
// 创建一个 URL 对象，将 Blob 转换成 URL
const videoUrl = URL.createObjectURL(blob);
videoSource.src = videoUrl; // 设置视频源
videoElement.load(); // 刷新 video 元素
videoElement.play(); // 播放视频
})
.catch(error => {
console.error("Error loading video: ", error);
});
可以看到 fetch 中的链接才是真正加载视频的链接，而我们看到的 video 里的 blob 链接是 javascript 创建对象时产生的，并不是加载视频真正的链接。
想要详细了解的朋友，可以查看对应的讲解视频。