Nginx部署下音视频播放异常问题求助

已知问题 #

• 加载音视频或拖动进度条时，必须切换到其他页面加载/恢复播放（同页或跨页）音视频后才能正常启动
• 仅Firefox浏览器中，将音频从约1:50拖动到约0:22时，播放中断，偶发浏览器卡顿
• 音视频通过<audio src="...">/<video src="...">标签加载
• 环境：Fedora Linux 36、SELinux已禁用、Nginx 1.22.0，error.log无内容

排查与修复方案 #

1. 补全Nginx流媒体核心配置 #

音视频拖动（seek）依赖HTTP范围请求（Range Request），Nginx默认未启用媒体伪流处理模块，会导致浏览器无法分段请求数据。

关键检查点

• 执行nginx -V查看编译参数，确认包含--with-http_mp4_module（处理MP4/M4V等格式）和--with-http_flv_module（处理FLV格式），如果没有则需重新编译Nginx添加这些模块
• 在媒体文件所在的location块添加以下配置（替换你的现有配置）：

location ~* \.(mp4|m4v|mov|avi|mp3|flac|ogg|wav)$ {
    root /your/media/file/path; # 替换为你的媒体文件根目录
    mp4; # 启用MP4伪流处理，支持Range请求
    flv; # 启用FLV伪流处理（如果有FLV文件）
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
    add_header Accept-Ranges bytes; # 明确告知浏览器支持范围请求
}

配置完成后执行nginx -s reload生效

2. 解决Firefox专属兼容性问题 #

Firefox对媒体请求的处理逻辑更严格，需做以下检查：

• 验证媒体文件编码：MP4需使用H.264视频+AAC音频编码，音频文件优先使用MP3（CBR编码）、OGG格式，避免使用Firefox兼容性差的编码（如某些VBR参数异常的MP3）
• 查看access.log：拖动到0:22时，检查Firefox发起的Range: bytes=xxx-xxx请求的响应状态码，若为4xx/5xx，说明Nginx未正确处理范围请求；若为206 Partial Content，则进一步检查响应头是否包含Content-Range字段
• 临时禁用Firefox硬件加速：在about:config中设置media.hardware-video-decoding.enabled为false，排查是否是硬件解码冲突导致卡顿

3. 修复请求阻塞/缓存异常问题 #

第一个问题大概率是浏览器无法发起有效分段请求导致，需：

• 检查access.log中首次加载音视频的请求，确认响应头包含Accept-Ranges: bytes，若无则是Nginx配置缺失
• 避免设置错误的Cache-Control头，比如no-cache会导致浏览器反复请求完整文件，引发阻塞

验证步骤 #

1. 重启Nginx后，在Firefox中打开开发者工具（F12）→ 网络面板，过滤媒体类型请求
2. 拖动音视频进度条，观察是否有Range请求发送，响应状态码是否为206
3. 测试不同编码的媒体文件，排除文件本身的问题

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