HLS.js开发：带/不带DVR的直播流进度条实现疑问

1. 判断直播流是否支持DVR #

HLS.js没有直接判断DVR支持的API，但可通过解析manifest分片信息计算可回看窗口长度实现：

• 监听Hls.Events.MANIFEST_PARSED事件，在回调中获取当前level的分片配置
• 计算可回看时间窗口：用直播同步位置（hls.liveSyncPosition）减去最早可播放分片的起始时间（hls.levels[hls.currentLevel].details.startSN * hls.levels[hls.currentLevel].details.targetDuration）
• 若窗口长度大于设定阈值（如10秒），则判定为支持DVR，条件渲染进度条

代码示例：

hls.on(Hls.Events.MANIFEST_PARSED, () => {
  if (!hls.isLive) return;
  
  const currentLevel = hls.levels[hls.currentLevel].details;
  const earliestPlayableTime = currentLevel.startSN * currentLevel.targetDuration;
  const dvrWindowLength = hls.liveSyncPosition - earliestPlayableTime;
  
  // 阈值可根据需求调整
  const supportsDVR = dvrWindowLength > 10;
  document.getElementById('seek-bar').style.display = supportsDVR ? 'block' : 'none';
});

2. LIVE按钮的实现逻辑 #

触发逻辑 #

根据当前播放位置与直播同步点的差值切换颜色：

• 差值小于设定阈值时，按钮显示蓝色（处于直播状态）
• 差值大于阈值时，显示灰色（处于回看状态）

时长阈值 #

通常设置为3-10秒，推荐5秒，平衡实时性与用户体验。

点击功能 #

点击后立即跳转到直播同步点，恢复实时播放。

JS实现 #

const liveBtn = document.getElementById('live-btn');
const LIVE_THRESHOLD = 5; // 5秒阈值

// 更新按钮状态
function updateLiveBtn() {
  if (!hls.isLive) {
    liveBtn.style.display = 'none';
    return;
  }
  
  const timeDiff = hls.liveSyncPosition - video.currentTime;
  if (timeDiff <= LIVE_THRESHOLD) {
    liveBtn.classList.add('active'); // 蓝色样式类
    liveBtn.disabled = true;
  } else {
    liveBtn.classList.remove('active'); // 灰色样式类
    liveBtn.disabled = false;
  }
}

// 绑定事件监听
video.addEventListener('timeupdate', updateLiveBtn);
hls.on(Hls.Events.MANIFEST_PARSED, updateLiveBtn);

// 点击跳转直播
liveBtn.addEventListener('click', () => {
  if (hls.isLive) {
    video.currentTime = hls.liveSyncPosition;
  }
});

3. DVR进度条的悬停与点击逻辑 #

• 悬停时间含义：显示进度位置对应的播放时间，常见两种形式：
  • 相对时间：距离当前直播的时长差（如“5分钟前”）
  • 绝对时间：具体时间戳（如“2024-05-20 14:35:00”）
    本质是将进度条位置对应的video.currentTime转换为用户易读格式。
• 点击作用：触发播放器跳转到该时间点播放，需确保点击时间在DVR可回看窗口范围内（不早于最早可播放时间，不晚于直播同步点）。

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