如何在progress标签上定位对应视频时间点的div标记

核心逻辑 #

通过时间占比转换为宽度百分比的方式定位标记：标记的水平位置 = (目标时间 / 总时长) × 100%，结合相对+绝对定位将标记精准放在进度条对应位置。

完整代码实现 #

HTML结构 #

把progress标签包裹在容器中，方便标记定位，同时支持添加多个标记：

<div class="progress-wrapper">
  <progress value="80" max="100"></progress>
  <!-- 50秒位置的标记 -->
  <div class="time-marker" style="left: 50%"></div>
  <!-- 可添加更多标记，比如30秒、70秒 -->
  <div class="time-marker" style="left: 30%"></div>
  <div class="time-marker" style="left: 70%"></div>
</div>

CSS样式 #

设置容器相对定位，标记绝对定位，确保标记居中对准时间点：

.progress-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px; /* 可根据布局需求调整 */
}

progress {
  width: 100%;
  height: 20px;
}

.time-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background-color: #ff4444;
  transform: translateX(-50%); /* 让标记中心精准对齐时间点 */
}

动态添加标记（可选） #

如果需要通过JS批量生成标记，可使用以下代码：

const wrapper = document.querySelector('.progress-wrapper');
const totalTime = 100; // 视频总时长
const markTimes = [15, 40, 65, 90]; // 需要标记的时间点数组

markTimes.forEach(time => {
  const marker = document.createElement('div');
  marker.classList.add('time-marker');
  // 计算位置百分比
  const posPercent = (time / totalTime) * 100;
  marker.style.left = `${posPercent}%`;
  wrapper.appendChild(marker);
});

关键说明 #

• 容器必须设置position: relative，否则标记的绝对定位会相对于整个页面偏移
• transform: translateX(-50%)是核心，确保方形标记的中心正好落在对应时间点的垂直线上
• 新增标记只需重复创建time-marker元素，按公式计算left的百分比即可

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