html5中实现多段短视频无缝播放需用mediasource api：使用fragmented mp4格式，设sourcebuffer.mode为segments并显式设置timestampoffset对齐时间戳，手动更新mediasource.duration，监听timeupdate主动续播。
要在HTML5中实现多段短视频的无缝连续播放，核心是用MediaSource API手动管理视频数据流，而不是依赖video标签原生的loop或src切换——后者必然存在解码重启、缓冲中断和时间跳变，无法真正“无缝”。关键在于：把多个MP4片段按时间轴拼成一个逻辑连续的媒体流，由JavaScript控制写入节奏与时间戳对齐。
确保视频源符合MSE要求
不是所有MP4都能直接用于MediaSource。必须使用fragmented MP4（fMP4）格式，即每个片段都包含独立的moof+mdat结构，且不含全局moov头（moov需放在首段或单独提供）。普通MP4需用工具如ffmpeg转码：
ffmpeg -i input.mp4 -c copy -f mp4 -movflags +frag_keyframe+empty_moov output.fmp4- 所有分段应统一编码参数（分辨率、帧率、profile、level），否则sourceBuffer可能拒绝追加
- 推荐用
avc1.64001F（H.264 High@3.1）或更通用的avc1.42E01E，并确认浏览器支持：MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E"')
正确设置SourceBuffer时间戳与模式
无缝拼接失败的主因常是时间戳错位或mode误用。不要依赖sourceBuffer.mode = 'sequence'自动推算起始时间——它只在严格递增、无gap/overlap的fMP4流中可靠，实际中极易出错。
- 始终显式设置
sourceBuffer.mode = 'segments'，主动控制每段的起始时间 - 每次调用
appendBuffer()前，先用sourceBuffer.timestampOffset = nextStartTime指定该段在总时间轴上的起始位置（单位：秒） - 例如：第一段时长3.2s，第二段就设
timestampOffset = 3.2；第三段为3.2 + 第二段时长，依此类推 - 可通过解析fMP4的
moof获取精确持续时间，或预先在服务端返回各段元信息（推荐）
动态更新MediaSource.duration并避免Infinity
mediaSource.duration默认为Infinity，必须手动赋值才能被播放器识别为“有终点”，否则进度条异常、seek失效、循环逻辑紊乱。
- 所有片段加载完成（或预知总时长）后，立即设置：
mediaSource.duration = totalDuration - 若需边加载边播放，可在每段append后累加更新：
mediaSource.duration = Math.max(mediaSource.duration, nextStartTime + segmentDuration) - 注意：仅当
mediaSource.readyState === 'open'且sourceBuffer.updating === false时才可安全赋值，否则抛错
处理播放末尾与自动续播逻辑
原生ended事件在MSE场景下不可靠（因duration可能未及时更新或缓冲未清空），应监听timeupdate并主动判断：
- 监听
video.ontimeupdate = () => { if (video.currentTime >= mediaSource.duration - 0.05) { loadNextSegment(); } } -
loadNextSegment()中先检查sourceBuffer.updating，再调用appendBuffer()，避免并发写入冲突 - 为防卡顿，可提前预加载下一段到内存（如用
fetch().arrayBuffer()缓存），append时直接传入 - 若需循环，只需在末尾重置
video.currentTime = 0并重新append首段（注意清除旧buffer：sourceBuffer.remove(0, mediaSource.duration)）
不复杂但容易忽略：时间戳对齐、duration手动赋值、mode选segments而非sequence，这三点到位，多段短视频就能像单个文件一样平滑播放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
