我们昨天看了 blob 协议，那么具体我们在播放视频的时候怎么使用 blob 协议进行播放，把视频流转为 blob 协议，然后放到 video 中进行播放。

今天我们就来研究下怎么实现。

以 blob URL 加载网络视频

现在我们有一个网络视频的地址，怎么才能才能将这个视频地址变为 blob URL 形式呢？

实现思路是要先拿到存储这个视频原始数据的 Blob 对象。

但是不同于 input 上传可以直接拿到 File 对象，我们只有一个网络地址。

我们平时请求接口我们可以使用 xhr或者 fetch。请求一个服务端地址可以返回我们相应的数据。

我们这里就要用 xhr 或者 fetch 去请求一个图片或者视频地址。不过我没你这里要注意我们返回视频的数据格式要设置正确。

也就是 responseType 要设置正确，这样才能拿到我们想要的格式数据。

示例代码

const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onload = function() {
    // todo
}
xhr.send();

这里用 xhr 请求视频的时候可能会遇到跨域问题，所以要设置跨域资源共享（CORS）来解决。

这样我们返回就是一个 Blob 对象。然后通过

const src = URL.createObjectURL(xhr.response);
video.src = src;

这样用调试工具看视频标签的 src 属性已经变成了一个 blob URL。