如何让VideoJS保留Kinesis ON_DEMAND流时间线中的间隙？

1. 强制保留完整请求时间范围 #

Kinesis的ON_DEMAND流默认仅返回有媒体数据的片段，VideoJS会自动裁剪时间线匹配实际片段区间。要保留你请求的13:00-14:00完整时间线，需修改HLS插件配置，禁用时间线自动修正：

const player = videojs('my-player', {
  html5: {
    hls: {
      enableTimeRangeCorrection: false, // 关闭时间范围自动修正
      skipSegments: false, // 不跳过空白片段
      allowMissingSegments: true // 允许播放到无数据区域
    }
  }
});

同时要确认调用Kinesis生成流URL时，已正确指定StartTimestamp和EndTimestamp为目标时间范围，确保Kinesis返回的HLS清单包含完整时间元数据。

2. 无内容区域提示实现 #

当播放到空白片段时，VideoJS会进入缓冲或暂停状态，可通过监听播放器事件检测并显示提示：

// 创建提示元素
const noContentTip = document.createElement('div');
noContentTip.className = 'vjs-custom-tip';
noContentTip.textContent = '当前无视频可播放';
noContentTip.style.cssText = `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  display: none;
  z-index: 1000;
`;
player.el().appendChild(noContentTip);

// 检测无内容状态
function checkNoContent() {
  const currentTime = player.currentTime();
  const buffered = player.buffered();
  let hasValidSegment = false;

  for (let i = 0; i < buffered.length; i++) {
    if (currentTime >= buffered.start(i) && currentTime <= buffered.end(i)) {
      hasValidSegment = true;
      break;
    }
  }

  if (!hasValidSegment) {
    noContentTip.style.display = 'block';
    player.pause();
  } else {
    noContentTip.style.display = 'none';
  }
}

// 绑定事件监听
player.on(['waiting', 'stalled', 'timeupdate'], checkNoContent);
player.on('playing', () => noContentTip.style.display = 'none');

3. 验证与调试 #

• 调用player.duration()，确认返回值为3600秒（1小时），说明时间线已正确保留。
• 若时间线仍不完整，检查Kinesis返回的HLS清单，确认其包含完整的时间范围元数据。

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