在网页中播放本地视频或 Blob 视频已经成为前端开发常见需求之一，尤其是在离线应用、隐私保护或自定义播放器场景中。本指南围绕 如何在网页中用 JavaScript 实现本地或 Blob 视频播放？完整指南 进行系统讲解，覆盖从选择本地文件、创建 Blob URL、到在 video 元素中进行无缝播放的完整流程。
工作原理与核心概念
本地文件与 Blob URL 的关系
当用户选择本地视频或将数据封装为 Blob 时，可以使用 URL.createObjectURL 将该 Blob 或 File 转换为一个可在浏览器内部使用的 URL。这个 URL 可以直接赋值给 video.src，从而实现本地播放。需要注意的是，使用完成后应调用 URL.revokeObjectURL 释放内存。
Blob URL 的优势在于不需要通过远端服务器重新传输数据，这对离线播放和隐私保护尤为有利。与此同时，要确保在用户完成操作后及时释放资源，否则可能引发内存占用增加的问题。
为何选择本地或 Blob
在需要在无网络、低延迟场景中播放视频时，本地文件或 Blob URL 提供了稳定的数据源。它们避免了网络抖动引发的缓冲与缓慢加载，同时降低了对带宽的依赖。
此外，使用 Blob URL 还能实现更灵活的数据控制，如从 Canvas、视频处理管线或摄像头缓冲区中获取数据后再进行播放，确保 数据避免跨域风险。不过请注意，Blob URL 是基于当前页面的资源，关闭页面后会失效。
环境准备与兼容性
浏览器对 HTML5 video 的支持
现代浏览器对 HTML5 的支持非常广泛，基本能够处理本地文件、Blob URL 以及常见编解码格式。你应通过 video.canPlayType 及 视频编解码信息 来检测支持情况，确保在目标设备上可用。
要点包括：确保页面在浏览器环境中有交互行为触发播放、以及对 源对象的正确设置（如 blob URL、object URL、或直接文件对象）。如果使用较新编解码，如 AV1、VP9，需确认浏览器版本支持。
安全策略与用户交互
对本地文件播放，用户通常需通过文件选择器进行显式授权，这本身也是一项重要安全特性。你应在 用户手势 触发后再调用 video.play()，以避免浏览器的自动播放限制。
另外，涉及跨域资源时要遵循同源策略与 CORS 规则。对于本地文件和 Blob，跨域问题较小，但视频从服务器加载时仍需正确设置 CORS headers 以保障正常加载。
快速入门：从本地选择视频并播放
准备 HTML 结构
要实现本地选择并播放，首先需要在页面中放置一个 video 元素和一个 input type="file" 控件。通过这些控件，你可以将本地文件转换为可用于播放的 URL。
下面给出一个简化的 HTML 结构示例，便于你快速落地实现。此示例关注核心交互，不依赖外部依赖库，便于调试和维护。
<!-- 简化的播放器结构 -->
<video id="player" controls width="640" height="360">浏览器不支持视频标签。
</video>
<input type="file" id="fileInput" accept="video/*" />接下来，你需要将上述元素与 JavaScript 逻辑结合，确保在用户选择文件后能正确呈现并播放视频。关键点在于 生成 Blob URL、把它赋值给 video.src，以及在合适时机调用 play() 与 revokeObjectURL。
核心 JavaScript 实现
核心实现包括：获取文件对象、创建 Blob URL、给 video.src 赋值、并处理播放控制与资源回收。请确保在用户交互后执行以满足自动播放策略。
// 选择 DOM 元素
const video = document.getElementById('player');
const fileInput = document.getElementById('fileInput');// 处理文件选择
fileInput.addEventListener('change', async (e) => {const file = e.target.files?.[0];if (!file) return;// 生成 Blob URLconst blobUrl = URL.createObjectURL(file);// 设置视频源并尝试播放video.src = blobUrl;try {await video.play(); // 需要用户交互触发} catch (err) {// 自动播放失败，提示用户手动播放console.log('Play was blocked, user interaction is required.');}// 资源回收：在视频不再需要时再释放video.addEventListener('ended', () => URL.revokeObjectURL(blobUrl), { once: true });
});在上述实现中，Blob URL 的创建与释放 是核心环节。你将复杂的本地视频数据变为一个浏览器能直接访问的地址，从而实现流畅播放。
进阶技巧与性能优化
基于 Blob URL 的流式播放
如果你希望在同一个页面内对多个本地视频进行切换，仍然可以通过 URL.createObjectURL 为每个文件创建独立的 Blob URL，并在切换时调用 URL.revokeObjectURL 释放旧的资源。这样能避免同时存在过多 URL 而带来的内存压力。
注意：Blob URL 的生命周期与页面相绑定，虽然在多标签场景下也能存在，但当页面卸载时会自动释放。为确保可控，需要在页面卸载时显式回收已创建的 Blob URL。
// 示例：切换视频时回收前一个 blob
let currentBlobUrl = null;
async function loadVideoFromFile(file) {if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);currentBlobUrl = URL.createObjectURL(file);video.src = currentBlobUrl;await video.play();
}
使用 MediaSource Extensions（MSE）实现分段加载
对于需要更高控制粒度的场景，可以考虑使用 MediaSource Extensions（MSE） 来动态拼接视频片段并实现更灵活的播放策略。MSE 适用于对大文件的分段加载、断点续传和自定义缓冲策略。实现较为复杂，需要对 SourceBuffer 和 appendBuffer、以及编解码格式有一定了解。
下面给出一个简化的 MSE 使用骨架，帮助你理解核心流程。实际项目中，你通常需要对编码格式、封装（如 MP4、WebM）及清除缓存做更细致的处理。
// 伪代码：使用 MSE 动态追加片段
if ('MediaSource' in window) {const mediaSource = new MediaSource();video.src = URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen', async () => {const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';const sourceBuffer = mediaSource.addSourceBuffer(mime);// 拉取并解码分段数据，随后追加到 sourceBufferconst chunks = await fetchSegmentsSomehow();for (const chunk of chunks) {sourceBuffer.appendBuffer(chunk);// 需要处理 updateend 事件}});
}