css - 我可以实现滑动条标记吗

Question

嗨，我对 HTML5 开发相当陌生。我目前正在使用 video-js 做一个学校项目。该项目要求视频播放器滑动条中的动态标记指示特定位置，以便视频查看者知道在哪里跳转。我不确定以下问题：

1. 有没有办法实现这个？
2. 我可以通过简单地改变videojs播放器（video-js.css）的皮肤来实现吗？
3. 如果我必须修改源文件才能具有此功能，我应该从哪里开始？
4. 是否可以在 videoJS 播放器或其滑动条上添加其他元素（例如按钮、图像）？

谢谢您的帮助。

Answer 1

1. 是的 - video js 有一个很棒的插件框架，可以修改播放器的外观和功能。
2. 你不能简单地改变皮肤来获得你想要的东西，因为如果没有你明确地创建它们，这些标记就不存在。
3. 是的 - 看看下面的例子（它使用最新的 4.1 videojs api）
4. 确实！请参阅此处发布的答案中的示例：VideoJS 4.0 插件：如何正确地将项目添加到 controlBar？

在控制栏中创建标记的示例插件：

/**
 * Utility function to find the percent a given time represents in 
 * the overall duration.
 */
var getPercent = function(value, total) {
  var raw = value * 1.0 / total;
  var bounded = Math.min(1, Math.max(0, raw));
  return Math.round(bounded * 100, 2);
};

/** 
 * Draws a single highlighted section on the control bar. Assumes all
 * sections require a start value, but not an end value (defaults to a 
 * 1 second duration).
 */
var drawSection = function(player, section, duration) {
  if (!section.start) return;
  if (!section.end) section.end = section.start + 1;

  var seekBar = vid.controlBar.progressControl.seekBar;
  var sectionDiv = seekBar.createEl('div');
  // You'd probably want to have a css class for these styles.
  sectionDiv.style.backgroundColor = 'yellow';
  sectionDiv.style.position = 'absolute';
  sectionDiv.style.height = '100%';

  var startPercent = getPercent(section.start, duration);
  var endPercent = getPercent(section.end, duration);
  sectionDiv.style.left = startPercent + '%';
  sectionDiv.style.width = (endPercent - startPercent) + '%';

  var seekHandle = seekBar.seekHandle;
  seekBar.el().insertBefore(sectionDiv, seekHandle.el());
};

var drawSections = function(player, sections) {
  var duration = player.duration();
  if (duration === undefined || isNaN(duration)) return;
  for (var i = 0, l = sections.length; i < l; i++) {
    drawSection(player, sections[i], duration);
  }
};

var highlightedSectionsPlugin = function(options) {
  var player = this;
  player.on('durationchange', 
            function() { drawSections(player, options.sections); });  
};

videojs.plugin('highlightedSectionsPlugin', highlightedSectionsPlugin);

var vid = videojs("video", {
  plugins : {
    highlightedSectionsPlugin : {
      sections : [ {start:10, end:20}, {start:25, end:30}, {start: 40} ]
    }
  }
});