Clappr播放nginx-rtmp转码HLS流时旧.ts片段404问题修复

首次使用nginx-rtmp将RTMP流转为HLS流，通过Clappr在网页播放时，发现Clappr会请求服务器已经删除的旧.ts片段，从而触发404错误。

nginx-rtmp配置 #

rtmp {
        server {
                listen 1935; # 监听标准RTMP端口
                chunk_size 4000;
                buflen 1s;
                application show {
                        live on;
                        record off;
                        # 开启HLS
                        hls on;
                        hls_path /nginx/hls/;
                        hls_fragment 600ms;
                        hls_playlist_length 5s;
                        # 禁止通过RTMP从nginx拉流
                        deny play all;
                }
        }
}

网页播放代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>videojs-contrib-hls embed</title>

  <link href="video-js.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js">
  </script>
</head>

<body>

  <div id="player"></div>

  <script>
    var player = new Clappr.Player({ 
    source: "<my url>", 
    parentId: "#player",
    });
  </script>

</body>

</html>

相关截图说明 #

• 截图1：Clappr请求记录显示正在尝试加载服务器已删除的.ts片段
• 截图2：服务器返回404状态，提示该片段文件不存在

解决办法 #

1. 调整nginx-rtmp的HLS核心配置 #

• 显式开启片段清理（默认已开启，明确配置避免异常）：

  hls_cleanup on;
  

• 改用序列编号命名片段，避免缓存混淆：

  hls_segment_naming "segment_%08d.ts";
  

• 优化片段时长与播放列表长度的比例：当前600ms片段+5s列表会包含约8个片段，可适当调大片段时长减少列表内片段数量，降低旧片段被请求的概率：

  hls_fragment 2s;
  hls_playlist_length 6s;
  

2. 配置Clappr的HLS请求策略 #

初始化Clappr时添加hlsjsConfig，优化缓存与重试逻辑：

var player = new Clappr.Player({ 
  source: "<my url>", 
  parentId: "#player",
  hlsjsConfig: {
    maxBufferLength: 30, // 缩短缓冲区保留时长
    lowLatencyMode: true, // 适配直播低延迟场景
    retryParameters: {
      maxRetryCount: 1, // 减少对不存在片段的重试次数
      retryDelay: 100
    }
  }
});

3. 配置nginx静态资源缓存头 #

针对HLS文件设置无缓存策略，避免浏览器缓存过期的播放列表：

location /hls {
  types {
    application/vnd.apple.mpegurl m3u8;
    video/mp2t ts;
  }
  root /nginx;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  add_header Pragma "no-cache";
  add_header Expires 0;
}

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