嘿，这个问题提得很到位！完全不需要重新做一整套自定义控制栏就能实现你的需求，我来一步步拆解具体做法：

一、添加双时间标记（实际当前时间+目标展示时间） #

核心思路是在原生视频容器上叠加两个自定义标记元素，不用改动原生控制栏的结构：

1. 先搭好基础HTML结构
   给视频套一个相对定位的容器，方便后续标记元素定位：

<div class="video-wrapper" style="position: relative; max-width: 100%;">
  <video id="segmentedVideo" controls>
    <!-- 你的分段视频源，可根据需要动态切换或添加多个source -->
    <source src="video-segment-1.mp4" type="video/mp4">
    <source src="video-segment-2.mp4" type="video/mp4">
  </video>
  <!-- 实际当前时间标记（白点） -->
  <div id="realTimeDot" class="time-dot real"></div>
  <!-- 目标展示时间标记（红点） -->
  <div id="targetTimeDot" class="time-dot target"></div>
</div>

2. 用CSS给标记做样式
   让标记悬浮在进度条上方，调整位置对准进度条：

.video-wrapper {
  position: relative;
}

.time-dot {
  position: absolute;
  bottom: 38px; /* 不同浏览器控制栏高度有差异，微调这个值对准进度条 */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(-50%); /* 让圆点中心精准对准时间点 */
  z-index: 10; /* 确保标记在控制栏上方 */
  display: none; /* 初始隐藏，视频加载后再显示 */
}

.time-dot.real {
  background: #fff;
  border: 2px solid #222;
}

.time-dot.target {
  background: #ff3333;
}

3. 用JS控制标记位置
   实时更新白点位置，手动设置红点位置：

const video = document.getElementById('segmentedVideo');
const realDot = document.getElementById('realTimeDot');
const targetDot = document.getElementById('targetTimeDot');
const wrapper = document.querySelector('.video-wrapper');

// 更新实际时间标记的函数
function updateRealTimeMarker() {
  if (!video.duration) return; // 视频未加载完成时跳过
  const wrapperWidth = wrapper.offsetWidth;
  const positionRatio = video.currentTime / video.duration;
  realDot.style.left = `${positionRatio * 100}%`;
  realDot.style.display = 'block';
}

// 设置目标时间标记的函数（手动调用这个方法传入目标时间即可）
function setTargetTimeMarker(targetSeconds) {
  if (!video.duration) return;
  const wrapperWidth = wrapper.offsetWidth;
  const positionRatio = targetSeconds / video.duration;
  targetDot.style.left = `${positionRatio * 100}%`;
  targetDot.style.display = 'block';
}

// 监听视频播放时间变化，实时更新白点
video.addEventListener('timeupdate', updateRealTimeMarker);

// 示例：设置目标展示时间为15秒
setTargetTimeMarker(15);

二、更改进度控件的当前时间 #

分两种场景处理：

场景1：直接跳转到目标播放时间 #

如果是要让视频实际播放位置跳转到某个时间点，直接修改video.currentTime即可，原生进度条会自动同步更新：

// 跳转到25秒的位置
video.currentTime = 25;

场景2：视觉上修改进度条滑块位置（和实际播放时间分离） #

如果想让进度条的滑块显示在目标时间，但视频继续按实际时间播放，就需要隐藏原生滑块，叠加自定义滑块：

• 先隐藏原生滑块（不同浏览器需要不同的前缀选择器）：

/* Chrome/Safari */
video::-webkit-slider-thumb {
  opacity: 0;
}

/* Firefox */
video::-moz-range-thumb {
  opacity: 0;
}

• 然后在HTML里添加自定义滑块元素，用类似标记的逻辑控制它的位置，还可以监听拖动事件来更新目标时间，逻辑和上面的标记元素基本一致。

⚠️ 小提示：不同浏览器的原生控制栏DOM结构和样式有差异，可能需要针对Chrome、Firefox、Safari微调样式（比如标记的bottom值），但核心思路都是通过叠加元素实现，完全不用重写整个控制栏。

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