HTML5中通过MediaSource API实现动态广告插入，核心是用SourceBuffer分段追加fMP4格式的主内容与广告，精准控制时间点切换、缓冲管理及事件监听，确保无缝播放。
在HTML5中通过MediaSource API实现动态广告插入，核心是将视频主内容与广告内容按时间线分段，用SourceBuffer动态追加媒体数据，同时控制播放时机与切换逻辑。关键不在于替换整个视频流，而是在播放过程中无缝拼接、暂停主内容、注入广告片段并恢复——这需要精确的时间控制、缓冲管理与事件监听。
准备可变比特率的分段媒体（如fMP4）
MediaSource仅支持特定格式，推荐使用fragmented MP4（fMP4），它支持按时间轴切片、独立解码，适合动态拼接。HLS或DASH本身不被MediaSource原生支持，需用MSE（Media Source Extensions）+ 解析器（如mp4box.js或dash.js底层逻辑）转为fMP4片段。
- 主内容与广告均需预处理为fMP4格式，每个片段带准确的
moof+mdat结构和时间戳（baseMediaDecodeTime） - 广告片段应与主内容保持相同编码参数（分辨率、帧率、编解码器），避免解码器重初始化导致卡顿
- 推荐使用
ffmpeg生成：ffmpeg -i ad.mp4 -c:v libx264 -c:a aac -f mp4 -movflags +frag_keyframe+empty_moov+default_base_moof ad-frag.mp4
构建MediaSource并管理多个SourceBuffer
一个MediaSource实例可挂载多个SourceBuffer（如video、audio分离），便于独立控制音视频轨道，也利于广告音频静音或替换。
- 创建MediaSource后，将其赋值给
<video>的src属性，并监听sourceopen事件再添加SourceBuffer - 主内容与广告共用同一组SourceBuffer（不重复创建），每次插入前调用
sourceBuffer.remove()清空待覆盖区间，再用appendBuffer()写入新数据 - 注意
updateend事件：只有该事件触发后，才表示上一段已成功送入解码器，此时才能安全append下一段（含广告）
在播放中精准触发广告插入点
不能依赖currentTime轮询判断——精度低且耗性能。应结合timeupdate事件与video.buffered范围，再辅以播放器自定义的广告时间表（如[{start: 120, duration: 30, url: "ad1.mp4"}]）。
立即学习“前端免费学习笔记（深入）”；
- 监听
timeupdate，当video.currentTime接近广告起始时间（如±0.5s内）且该时间点尚未缓冲时，暂停播放、移除后续主内容缓冲区、开始加载并append广告fMP4数据 - 广告播放结束前，提前加载下一段主内容（从广告结束时间起），并在广告
ended事件中调用video.currentTime = 广告结束时间，然后resume播放 - 若广告为VAST响应，需解析XML获取媒体URL、时长、跳过按钮配置等，再执行对应加载逻辑
处理边界问题与用户体验细节
真实场景中容易忽略缓冲中断、音画不同步、seek后状态错乱等问题，需针对性加固。
- 广告插入时主动调用
video.pause()，append完首帧后再play()；避免直接seek到广告时间点导致buffer缺口 - 监听
sourcebuffer.updating状态，防止并发append引发InvalidStateError - 用户拖拽（seek）到广告区间？应在
seeking事件中检测目标时间是否落在广告时段，若是，则跳转至广告开头并加载广告，而非主内容 - 提供“跳过广告”按钮：点击后清除当前广告buffer，append主内容对应时间段，并更新
currentTime
不复杂但容易忽略的是时间戳对齐与buffer清理时机。MediaSource对时间连续性敏感，广告片段的presentation timestamp必须紧接主内容末尾，否则会黑屏或卡死。实际开发中建议封装一个TimelineController类，统一维护当前播放时间、已加载区间、广告计划与buffer状态，让逻辑更可控。
