如何实现带时长区间的video-js进度条标记？

你遇到的问题核心是：默认情况下插件仅渲染单个点标记，即使设置了end字段，也不会自动生成区间样式。需要通过配置插件参数和自定义CSS来实现区间显示，具体步骤如下：

1. 调整插件配置，启用区间支持 #

在player.markers()的配置中添加markerStyle，让标记元素具备区间渲染的基础样式：

var player = videojs('example_video_1');

player.markers({
  markers: [
    {
      time: 10,
      end: 20, // 定义区间结束时间
      text: 'Marker 1',
      overlayText: '10s - 20s',
      class: 'marker1'
    },
    {
      time: 30,
      end: 40,
      text: 'Marker 2',
      overlayText: '30s - 40s',
      class: 'marker2'
    }
  ],
  // 配置标记元素为可扩展的块级样式
  markerStyle: {
    position: 'absolute',
    bottom: '0',
    height: '100%',
    top: '0',
    transform: 'none' // 取消默认的居中偏移
  }
});

2. 自定义CSS渲染区间外观 #

默认的.vjs-marker是固定宽度的点，需要修改CSS让它根据时间区间动态显示为条块：

/* 重置默认标记样式，允许横向扩展 */
.video-js .vjs-marker {
  width: auto !important;
  border-radius: 2px;
  opacity: 0.7;
}

/* 为不同标记设置背景色 */
.marker1 {
  background-color: #ffeb3b;
}

.marker2 {
  background-color: #ffeb3b;
}

/* 保持tooltip样式不变 */
.video-js .vjs-marker .vjs-marker-text {
  background-color: yellow;
  padding: 2px 4px;
  border-radius: 80px;
  top: -25px;
}

3. 动态计算区间宽度与位置（可选） #

如果视频总时长不固定，需要在视频加载完成后，通过JS自动计算每个区间的占比：

// 监听视频元数据加载完成事件
player.on('loadedmetadata', function() {
  const totalDuration = player.duration();
  const markers = player.markers.getMarkers();
  
  markers.forEach(marker => {
    const markerElement = document.querySelector(`.vjs-marker[data-marker-index="${marker.index}"]`);
    if (markerElement && marker.end) {
      // 计算起始位置百分比
      const startPercent = (marker.time / totalDuration) * 100;
      // 计算区间宽度百分比
      const widthPercent = ((marker.end - marker.time) / totalDuration) * 100;
      
      markerElement.style.left = `${startPercent}%`;
      markerElement.style.width = `${widthPercent}%`;
    }
  });
});

关键说明 #

• 插件本身不会自动解析end字段生成区间，必须通过样式调整让标记元素从“点”变成“条”
• 动态计算步骤是为了适配不同时长的视频，避免硬编码百分比
• 确保使用的videojs-markers版本支持end字段（建议使用v1.0.0及以上版本）

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