我们打开市面上主流流媒体平台网址查看视频，音频等数据时会发现在打开调试工具时，对应的video标签下的src会展示如blob:https ... 的一个资源路径，直接复制链接打开后发现资源是无法获取的。
在这种情况下， 可以避免一些网站爬虫爬取数据。在html结构上是不能直接看出数据资源的源地址。
使用blob 隐藏资源静态地址
<body>
<div class="video" style="width: 100%; height: 400px; border: 1px solid #000;">
<video autoplay controls muted loop style="width: 100%; height: 100%; background-color:#000;"></video>
</div>
</body>
<script>
const BASE_URL = "http://localhost:4800";
;(() => {
const videoRef = document.querySelector('video');
let vid = window.location.pathname.slice(window.location.pathname.indexOf('/video') + '/video'.length + 1)
fetch(BASE_URL + '/api/video/' + vid, {
method: 'get'
}).then((response) => {
return response.blob(); // 后台返回的二进制文件
}).then(result => {
let blobUrl = window.URL.createObjectURL(result); // 生成在内存中的映射地址
videoRef.src = blobUrl;
})
})();
</script>
需要注意的是，以上我们只是对htmlsrc的地址进行了处理，并不能阻止视频的下载，这种主要是干扰页面爬虫的获取。
另外，后台返回的视频资源一般不会直接返回二进制数据，因为随着文件越大，服务器资源占用就会越大。
一般情况下都是使用blob处理客户端路径，后台将视频分片(使用到m3u8切片格式)并进行blob处理
