3

こんにちは、私は HTML5 開発にかなり慣れていません。現在、video-js を使用して学校のプロジェクトを行っています。このプロジェクトでは、ビデオ プレーヤーのスライド バーに特定の位置を示すダイナミック マークを要求し、ビデオの視聴者がジャンプする場所を認識できるようにします。次の質問についてよくわかりません。

  1. これを実装する方法はありますか？
  2. videojsプレーヤー（video-js.css）のスキンを変更するだけでそれを達成できますか？
  3. この機能を使用するためにソース ファイルを変更する必要がある場合、どこから始めればよいですか?
  4. videoJS プレーヤーまたはそのスライド バーに追加の要素 (ボタン、画像など) を追加することは可能ですか?

助けてくれてありがとう。

4

1 に答える 1

0
  1. はい - ビデオ js には、プレーヤーの外観と機能を変更できる優れたプラグイン フレームワークがあります。
  2. これらのマークは明示的に作成しないと存在しないため、求めているものを取得するためにスキンを単純に変更することはできません。
  3. はい - 以下の例をご覧ください (最新の 4.1 videojs API を使用)
  4. 絶対！ここに投稿された回答の例を参照してください: VideoJS 4.0 プラグイン: コントロールバーにアイテムを適切に追加する方法?

コントロールバーにマークを作成するためのプラグインの例:

/**
 * 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} ]
    }
  }
});
于 2013-07-03T02:42:15.620 に答える