1. 基本原理
1.1 Blob URL 的工作原理
在浏览器中，Blob URL 是通过 URL.createObjectURL(blob) 生成的一个临时地址，指向本地的二进制数据。这个 URL 可以直接赋值给视频元素的 src 属性，从而在不上传到服务器的前提下实现本地数据的播放。
使用本地 Blob URL 的好处是用户隐私得到保护，且不受同源策略的限制影响播放。只要浏览器拥有对本地数据的访问权，就可以播放。需要注意的是，这个 URL 的生命周期受文档和对象本身引用的约束，调用 URL.revokeObjectURL(url) 可以手动释放资源。
2. 准备本地视频文件
2.1 选择并准备视频
本教程将演示如何通过一个 文件输入控件 获取本地视频文件，然后用 Blob URL 将该文件绑定到页面上的 video 元素进行播放。你可以通过 accept="video/*" 来限制选择的文件类型，以提升用户体验。
另外一种常见方式是使用拖放区域来接收本地视频文件，接收后同样可以用 URL.createObjectURL 生成一个对象 URL 并绑定到视频播放器的 src。不过在实现中要处理事件，例如 dragover、drop，并阻止默认行为以避免浏览器打开文件。
3. 使用 Blob URL 将本地视频加载到页面
3.1 生成 Blob URL
获取本地视频文件后，先要使用 URL.createObjectURL 生成一个可用的 URL。这个 URL 只是在当前文档会话中有效，且与文件对象绑定。一旦不再需要，可以通过 URL.revokeObjectURL 进行释放，以释放浏览器内存。
在实际应用中，通常会将 Blob URL 设置为视频元素的 src，然后调用 video.play() 开始播放。为了避免重复创建，可在用户选择新文件时先释放旧的 URL。
// 代码示例：从输入获取文件，生成 Blob URL，并绑定到视频
const input = document.getElementById('video-input');
const video = document.getElementById('player');
let currentURL = null;input.addEventListener('change', () => {const file = input.files[0];if (!file) return;// 释放旧的 Blob URLif (currentURL) {URL.revokeObjectURL(currentURL);}// 生成新的 Blob URLcurrentURL = URL.createObjectURL(file);video.src = currentURL;video.play();
});// 可选：在视频结束后释放资源
video.addEventListener('ended', () => {if (currentURL) {URL.revokeObjectURL(currentURL);currentURL = null;}
});
4. 在网页中播放视频
4.1 绑定视频元素与对象 URL
HTML 中需要一个文件输入和一个视频元素来呈现本地视频。通过以下结构，可以让用户选择视频并直接在线播放，且界面更友好。
为用户提供控件，如 controls，以及跨浏览器的兼容性提示。使用 Blob URL 的重要点是：避免上传服务器，确保视频源指向本地创建的 URL。
<input id="video-input" type="file" accept="video/*">
<video id="player" controls></video>// 完整示例：HTML 与 JavaScript 结合使用 Blob URL 播放本地视频
const input = document.getElementById('video-input');
const video = document.getElementById('player');
let currentURL = null;input.addEventListener('change', () => {const f = input.files[0];if (!f) return;if (currentURL) URL.revokeObjectURL(currentURL);currentURL = URL.createObjectURL(f);video.src = currentURL;video.play();
});
5. 清理与问题排查
5.1 释放资源
为了避免内存占用，在更换视频或页面卸载时，应调用 URL.revokeObjectURL 释放 blob URL。未释放可能导致内存泄漏，尤其在重复选择多段视频时。
一个常用的做法是追踪当前的 URL，并在用户选择新文件时先 释放旧的 URL，再创建新的 Blob URL。
5.2 兼容性与降级策略
在极少数旧版浏览器中，可能遇到对 URL.createObjectURL 的兼容性问题。此时可以考虑降级方案，例如使用 FileReader 将文件读取为 Data URL，再将结果赋给视频的 src。这会带来较大的数据量和解码开销，但能兼容不支持 Blob URL 的环境。
// 降级方案：使用 FileReader 将视频读取为数据 URL
const input = document.getElementById('video-input');
const video = document.getElementById('player');
input.addEventListener('change', () => {const f = input.files[0];if (!f) return;const reader = new FileReader();reader.onload = () => {video.src = reader.result; // data URLvideo.play();};reader.readAsDataURL(f);
});
