HTML5 多媒体 API 本身不支持大文件分片加载，真正依赖的是 Media Source Extensions（MSE）；它通过 MediaSource 和 SourceBuffer 实现动态分片喂入、解码与缓冲，需使用 fMP4/WebM 格式、连续时间戳及服务端 Range 支持。
HTML5 多媒体 API 本身不直接支持“大文件分片加载”，真正起作用的是 Media Source Extensions（MSE） —— 它是 HTML5 多媒体生态中专为动态喂入分片媒体数据而设计的扩展能力。浏览器原生 <video> 或 <audio> 元素只负责播放，而 MSE 提供了可写入的 MediaSource 对象，让开发者能手动控制视频/音频数据的分片拉取、解码与缓冲。
分片加载不是靠 <video src="...">，而是靠 MediaSource + SourceBuffer
-
<video>标签必须绑定MediaSource实例：const mediaSource = new MediaSource(); video.src = URL.createObjectURL(mediaSource);
-
mediaSource创建后，需监听sourceopen事件，再创建SourceBuffer：mediaSource.addEventListener('sourceopen', () => { const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640032"'); }); - 所有分片（如 fMP4 的
moof+mdat）必须以ArrayBuffer形式调用sourceBuffer.appendBuffer()喂入，不能传 URL。
分片格式决定能否成功加载
- 必须使用分片化媒体格式（fragmented MP4 或 WebM），普通完整 MP4 文件无法分段 append。
- 每个分片需含独立初始化段（init segment，含 SPS/PPS）或在首次
appendBuffer前单独注入。 - 时间戳必须连续且严格递增（
mode = 'sequence'下由浏览器自动推算起始时间），否则触发decode error。
真正影响大文件分片加载效果的关键点
- 浏览器兼容性：Chrome 90+、Edge 90+、Safari 15.4+ 对 4K+fMP4 支持较稳；Firefox 对高码率 fragmented MP4 易卡顿或静音。
-
硬件与解码能力：4K 视频依赖 GPU 解码，低端设备即使格式正确也可能频繁
stalled或abort。 -
网络与缓冲策略：需主动管理缓冲窗口（如保留最近 20–30 秒），定期
remove()已播放旧数据，避免内存超限（>500 MB 易被 Chrome 强制回收）。 -
服务端配合：HTTP 范围请求（Range）需支持字节偏移，CDN 或对象存储要允许跨域（CORS）且响应头含
Accept-Ranges: bytes。
不推荐直接用 File API 加载本地大视频做分片播放
-
file.slice()可切 Blob，但直接URL.createObjectURL(blob)交给<video>会触发整块加载，失去“分片控制权”。 - 若需本地文件分片播放（如离线预览），仍需 MSE + 手动读取
FileReader→ArrayBuffer→sourceBuffer.appendBuffer()，并自行按时间轴切片（非字节切），否则时间线错乱。
本质上，HTML5 多媒体 API 提供播放容器，MSE 提供分片管道，二者配合才构成真正可控的大文件流式加载能力。单靠 <video> 或 File API 都无法完成可靠分片加载。
