HTML5 <video> 标签需配合 MSE 实现边下边播：先创建 MediaSource 并绑定 video.src，监听 sourceopen 后添加匹配 MIME 的 SourceBuffer；分段 fetch fMP4/WebM，校验 updating 状态后 appendBuffer，监听 updateend 触发下一段加载；音视频时间戳需对齐，可设 mode="sequence"；动态清理旧缓冲、适配 seek 和倍速播放，避免过度预加载。
HTML5 的 <video> 标签本身不支持“边下边播”的大视频分段加载，必须配合 MediaSource Extensions（MSE）由 JavaScript 主动控制数据流。核心不是改标签属性，而是用 JS 搭建一条可控的媒体管道：把大视频切成小段，按需拉取、校验状态、追加缓冲、动态维护。
先搭好 MSE 基础管道
这是所有后续操作的前提，缺一不可：
- 创建
MediaSource实例，再用URL.createObjectURL(mediaSource)赋值给video.src—— 不能直接写文件 URL - 监听
sourceopen事件，在回调中调用addSourceBuffer()创建缓冲区；readyState是"closed"时调用会报错 -
SourceBuffer的 MIME 类型必须与实际分片严格匹配，例如video/mp4; codecs="avc1.640020"；填错会导致appendBuffer()静默失败 - 服务端必须提供 fMP4（fragmented MP4）或 WebM 分片，完整 MP4 文件无法被正确解析和追加
分段加载与安全追加
大视频不能一次性加载，要切成 2–6 秒的小段，逐段喂入：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
fetch下载当前需要的下一个分片（如seg-001.m4s），拿到ArrayBuffer后必须先判断sourceBuffer.updating === false，再调用appendBuffer() - 监听
updateend事件确认写入完成，这是触发下一段加载的可靠时机；在updating === true时重复写入会直接报错 - 音视频混流时，两个
SourceBuffer的时间戳（PTS/DTS）必须对齐，否则出现音画不同步 - 可设
sourceBuffer.mode = 'sequence'简化时间戳管理，配合mediaSource.duration动态更新总时长
维持缓冲与清理旧数据
只管“喂”不行，还得盯住缓冲水位和内存占用：
立即学习“前端免费学习笔记（深入）”；
- 定期读取
video.buffered.end(0) - video.currentTime，当差值小于 2–3 秒时主动触发预加载 - 对已播放过的旧数据调用
sourceBuffer.remove(start, end)清理，例如保留最近 30 秒，防止内存溢出 - 若用户拖拽进度（seek），需暂停当前加载逻辑，根据新
currentTime重新计算应加载的分片索引
适配播放速率变化
倍速播放会改变数据消费速度，预加载策略也要同步调整：
- 监听
video.onratechange，根据新playbackRate重算目标缓冲终点：target = video.currentTime + video.playbackRate × 15 - 若
video.buffered.end(0) < target，立即拉取缺失分片；若已缓冲过多（如从 2x 切回 0.5x），可暂停预加载，但无需清除已写入数据 - 避免过度预加载——尤其在弱网或低端设备上，应结合
video.getVideoPlaybackQuality().droppedVideoFrames判断解码压力
