使用MediaSource API实现视频流时Firefox出现无限加载问题求助

核心问题分析 #

Firefox对MediaSource API的兼容性要求更严格，你的代码出现无限加载通常是以下几个原因导致：视频片段格式不兼容、Codec参数不匹配、片段加载逻辑未处理异步缓冲冲突。

一、将视频片段转为碎片化MP4（fMP4） #

普通MP4无法直接被MediaSource识别，必须转成碎片化MP4格式。使用FFmpeg执行以下命令重新生成片段：

# 分割原视频为6秒的碎片化MP4片段
ffmpeg -i earth.mp4 -c:v libx264 -c:a aac -f segment -segment_time 6 -segment_format mp4 -movflags frag_keyframe+empty_moov+default_base_moof vids/earth/segments/segment-%03d.mp4

该命令会生成带正确moov原子的片段，完全符合MediaSource的格式要求。

二、修正SourceBuffer的Codec参数 #

原代码中的avc1.42E01E可能与视频实际编码不匹配，先通过FFprobe获取准确的Codec信息：

ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,profile,level -of json earth.mp4

将得到的Codec标识替换到代码中，同时需包含音频Codec（如果视频带音频）：

sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4D401E,mp4a.40.2"');

示例中avc1.4D401E是H.264的一种编码标识，mp4a.40.2是标准AAC音频标识，需根据你的视频实际信息修改。

三、修复片段加载的异步逻辑 #

原代码未等待前一个片段缓冲完成就加载下一个，Firefox中会导致缓冲冲突。修改加载逻辑，通过updateend事件控制顺序：

// 加载下一个视频片段
function loadNextVideoSegment() {
    if (currentSegmentIndex < playlist.segments.length && !sourceBuffer.updating) {
        const segmentUrl = playlist.segments[currentSegmentIndex].url;
        fetch(segmentUrl)
            .then(response => response.arrayBuffer())
            .then(data => {
                sourceBuffer.appendBuffer(data);
            })
            .catch(error => console.error('Error loading video segment:', error));
    } else if (currentSegmentIndex >= playlist.segments.length) {
        mediaSource.endOfStream();
    }
}

// 监听缓冲完成事件，自动加载下一个片段
sourceBuffer.addEventListener('updateend', () => {
    currentSegmentIndex++;
    loadNextVideoSegment();
});

// 移除原有的ended事件监听（现在通过updateend自动续播）

四、优化服务器静态文件响应 #

确保Express服务器支持字节范围请求，在静态服务中添加响应头：

app.use('/vids', express.static(path.join(__dirname, 'vids'), {
    setHeaders: (res, path) => {
        if (path.endsWith('.mp4')) {
            res.setHeader('Accept-Ranges', 'bytes');
        }
    }
}));

验证步骤 #

1. 用FFmpeg重新生成所有视频片段
2. 更新index.html中的Codec参数
3. 替换加载逻辑代码并重启服务器
4. 在Firefox中重新测试播放

内容的提问来源于stack exchange，提问作者vanguy