HTML5提供video标签、FileReader和MediaSource API三种方式读取视频：video标签直接加载网络视频；FileReader可将本地文件转为Data URL或Blob URL播放；MediaSource API支持动态拼接分段视频流。
如果您希望在网页中读取本地或网络视频文件，HTML5 提供了多种原生方式，包括使用 video 标签直接加载、FileReader 读取本地文件为 Blob 或 Data URL，以及通过 MediaSource API 动态拼接视频流。以下是具体操作步骤：
一、使用 video 标签直接加载网络视频
video 标签是最基础的视频展示方式，适用于可公开访问的网络视频资源（如 MP4、WebM 等），浏览器会自动发起 HTTP 请求并解码播放。
1、在 HTML 中插入 <video></video> 标签，并设置 src 属性为视频的完整 URL。
2、添加 controls 属性 以启用播放控件。
立即学习“前端免费学习笔记（深入）”；
3、可选添加 preload="metadata" 仅预加载元数据（时长、尺寸等），减少初始带宽消耗。
4、为兼容性考虑，在 <video></video> 内嵌套多个 <source></source> 标签，分别指定不同格式的视频地址。
二、使用 FileReader 读取本地视频文件
FileReader 接口允许网页在用户选择本地视频文件后，异步读取其内容为 Blob、DataURL 或 ArrayBuffer，适用于需前端处理（如截帧、校验、加密）的场景。
1、在页面中添加一个 type="file" 的 input 元素，并设置 accept="video/*" 限制仅选择视频文件。
2、监听 input 的 change 事件，获取 event.target.files[0] 得到 File 对象。
3、创建新的 FileReader 实例，调用 readAsDataURL() 方法将文件读取为 base64 编码字符串。
4、在 FileReader 的 onload 事件中，将 reader.result 赋值给 video 元素的 src 属性。
三、使用 FileReader 读取为 Blob 并生成 Object URL
相比 Data URL，Blob URL 更节省内存且支持大文件，Object URL 是浏览器内部为 Blob 创建的临时引用，生命周期与文档绑定，适合直接播放或后续流式处理。
1、同方法二，通过 file input 获取 File 对象。
2、创建 FileReader 实例，调用 readAsArrayBuffer() 或直接跳过 FileReader，使用 URL.createObjectURL(file) 生成 Blob URL。
3、将生成的 Blob URL 赋值给 video 元素的 src 属性。
4、在页面卸载或不再需要该视频时，调用 URL.revokeObjectURL() 释放引用，避免内存泄漏。
四、使用 MediaSource API 动态加载视频片段
MediaSource API 支持将视频数据分段传入 SourceBuffer，适用于自定义协议解析、DRM 流、或从非标准响应中构建可播放流，需配合 fetch 或 XMLHttpRequest 获取二进制数据。
1、创建 MediaSource 实例，并将其赋值给 video 元素的 src 属性：video.src = URL.createObjectURL(mediaSource)。
2、监听 mediaSource 的 sourceopen 事件，在回调中创建 SourceBuffer：sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"')。
3、使用 fetch 获取视频片段的 ArrayBuffer，调用 sourceBuffer.appendBuffer() 将其追加至缓冲区。
4、确保每次 append 前 sourceBuffer.updating 为 false，并在 append 后监听 updateend 事件 以触发下一次加载。
