如何实现类似YouTube的、不覆盖章节间隙的进度条与缓冲指示器？

问题场景 #

我正在开发一款自定义视频播放器，视频支持章节功能。遍历所有章节后为每个章节生成独立div，并在章节之间保留间隙，实现和YouTube一致的效果。但目前进度指示器和缓冲指示器会与章节重叠，甚至覆盖章节间的间隙。

• 当前效果：标记处应为章节间隙，但已被进度指示器覆盖
• 期望效果：进度指示器未覆盖章节间隙

核心解决思路 #

要避免进度/缓冲指示器覆盖章节间隙，核心是让进度仅在单个章节的可视范围内显示，而非贯穿整个进度条区域。以下是几种可落地的实现方案：

方案1：为每个章节单独绘制进度（推荐） #

放弃全局进度条，改为给每个章节div内部单独设置进度和缓冲条。这样进度只会在当前章节范围内展示，自然不会触碰间隙。

示例React代码：

{chapters.map((chapter, index) => {
  const progressPercent = calculateChapterProgress(chapter); // 根据章节时间范围计算当前进度占比
  const bufferPercent = calculateChapterBuffer(chapter); // 计算当前章节的缓冲占比
  return (
    <div 
      key={index} 
      className="chapter-item" 
      style={{ 
        width: `${chapter.widthPercent}%`, 
        marginRight: index < chapters.length -1 ? `${gapPercent}%` : 0 // 最后一个章节不加右边距
      }}
    >
      <div className="chapter-bg" /> {/* 章节背景 */}
      <div 
        className="chapter-buffer" 
        style={{ width: `${bufferPercent}%` }}
      />
      <div 
        className="chapter-progress" 
        style={{ width: `${progressPercent}%` }}
      />
      <div className="chapter-label">{chapter.title}</div> {/* 章节标题 */}
    </div>
  )
})}

配套CSS：

.chapter-item {
  position: relative;
  height: 6px;
  float: left;
  border-radius: 3px;
  overflow: hidden;
}

.chapter-bg {
  width: 100%;
  height: 100%;
  background-color: #444;
}

.chapter-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #777;
}

.chapter-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ff0000;
}

.chapter-label {
  position: absolute;
  bottom: 20px;
  left: 0;
  display: none;
  padding: 4px 8px;
  background-color: rgba(0,0,0,0.8);
  color: white;
  font-size: 12px;
  border-radius: 4px;
}

.chapter-item:hover .chapter-label {
  display: block;
}

方案2：使用CSS裁剪（clip-path） #

给进度条添加clip-path属性，让进度仅在章节的实体区域显示，自动避开间隙。需要根据章节数量、宽度比例、间隙大小动态生成裁剪路径。

示例CSS：

.progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ff0000;
  /* 示例：4个章节，每个占25%宽度，间隙占1% */
  clip-path: polygon(
    0 0, 25% 0, 25% 100%, 0 100%,
    26% 0, 50% 0, 50% 100%, 26% 100%,
    51% 0, 75% 0, 75% 100%, 51% 100%,
    76% 0, 100% 0, 100% 100%, 76% 100%
  );
}

注意：clip-path的坐标需要根据实际章节布局动态计算，适合章节结构固定的场景。

方案3：添加间隙遮罩层 #

在进度条上方叠加一个遮罩层，遮罩层的间隙区域设为透明，实体章节区域设为不透明，以此挡住间隙处的进度。

示例CSS：

.progress-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 示例：4个章节，间隙占1% */
  background: linear-gradient(
    to right,
    #111 25%, transparent 25%, transparent 26%,
    #111 26%, #111 50%, transparent 50%, transparent 51%,
    #111 51%, #111 75%, transparent 75%, transparent 76%,
    #111 76%, #111 100%
  );
  z-index: 2; /* 层级高于进度条 */
}

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