Can I Implement Slide Bar Mark

Question

Hi I am fairly new to HTML5 development. I am currently doing a school project using video-js. The project asks for dynamic marks in the video player slide bar to indicate specific position so that video viewer would know where to jump at. I am not sure about the following questions:

1. Is there a way to implement this?
2. Could I achieve that via changing skins simply of the videojs player (video-js.css)?
3. If I must modify source files to have this function, where should I start from?
4. Is it possible of adding additional elements (say buttons, images) on to the videoJS player or to its slide bar?

Thanks for the help.

Answer 1

1. Yes - video js has a great plugin framework that can modify the player's look and functionality.
2. You can't simply change skins to get what you're asking for, since the those marks don't exist without you creating them explicitly.
3. Yes - take a look at the example below (which uses the latest 4.1 videojs api)
4. Definitely! See an example in an answer posted here: VideoJS 4.0 Plugin: How to properly add items to the controlBar?

Example plugin for creating marks in the control bar:

/**
 * 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} ]
    }
  }
});