Question

您好我是HTML5开发的新手。我目前正在使用video-js进行学校项目。该项目要求视频播放器滑动条中的动态标记指示特定位置，以便视频查看器知道在哪里跳转。我不确定以下问题：

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

感谢您的帮助。

Answer 1

是的 - 视频js有一个很棒的插件框架，可以修改播放器的外观和功能。
您不能简单地更改皮肤以获得您所要求的内容，因为如果没有您明确创建它们，这些标记就不存在。
是 - 看看下面的示例（使用最新的4.1 videojs api）
当然！请参阅此处发布的答案中的示例：VideoJS 4.0 Plugin: How to properly add items to the 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} ]
    }
  }
});

我可以实现幻灯片标记

1 个答案: