怎样用video src=blob做资源防盗？

在HTML中，video标签用于定义多媒体中的视频播放。标签内的 src 属性用于指定视频文件的来源URL。当 src 值为 "blob" 后跟一串唯一的字符串时（如 src="blob:https://www.bilibili.com/049ab66a-4743-4eb0-a301-4642c0c28082"），这通常意味着视频文件是一个 Blob（Binary Large Object）。

Blob URL 是一种临时的URL，它指向一个内存中的资源，比如一个文件或一段字节数据。Blob URL 可以由 JavaScript 动态创建并绑定到元素上，用来表示任何类型的数据，包括文本、图片、音频和视频等。
 

Blob URL常见场景

从服务器获取二进制数据：服务器返回的是二进制数据，而不是直接的文件路径。这种情况下，可以使用 Blob URL 来引用这些数据。
生成动态内容：JavaScript 可以创建一个新的 Blob 对象，并通过 URL.createObjectURL() 方法将其转换成一个 Blob URL，然后将这个 Blob URL 设置为video元素的 src。
保护隐私和安全：对于一些敏感的数据或者临时生成的数据，使用 Blob URL 可以避免暴露实际的文件路径或数据源，增加安全性。
提高性能：在某些情况下，使用 Blob URL 可能会比直接加载文件路径更快，因为它可以缓存数据，并且减少服务器上的文件请求。
 

演示

// 假设 blobUrl 是一个 Blob URL
const blobUrl = "blob:https://www.example.com/049ab66a-4743-4eb0-a301-4642c0c28082";

fetch(blobUrl)
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.blob(); // 转换响应体为 Blob 对象
    })
    .then(blob => {
        const reader = new FileReader();
        reader.onload = function(e) {
            console.log('Data:', e.target.result);
            // 例如，如果是文本数据，可以使用 split(',') 等方法来解析
        };
        // 读取 Blob 数据为文本格式
        reader.readAsText(blob);
        // 如果是二进制数据，可以使用 readAsArrayBuffer(blob) 或 readAsDataURL(blob)
    })
    .catch(error => console.error('Fetch error:', error));

当不再需要 Blob URL 时，应该通过调用 URL.revokeObjectURL() 方法来释放与 Blob URL 关联的内存资源，防止内存泄漏。