Плагин VideoJS 4.0: как правильно добавить элементы в панель управления?

Я смотрю новый API для плагинов videojs: https://github.com/videojs/video.js/blob/master/docs/plugins.md

Есть ли способ добавить элементы в панель управления? Я хочу добавить "твит", "как" и другие различные кнопки.

Я взломал попытку сделать это до конца.

Я просмотрел новые образцы плагина. Ни один из них не изменяет панель управления.

Спасибо!

Ответы

Ответ 1

Мне кажется, что кодовая база в настоящий момент немного потрясла, и, возможно, в ближайшее время появится более последовательный шаблон плагина, но в то же время - если вы не обнаружили, как добавлять элементы в панель управления, я приведу тривиальный пример.

Все, что я собираюсь сделать, это добавить компонент к основному объекту videojs и указать панели управления включить этот компонент в качестве одного из его дочерних элементов.

Одним из моих любимых аспектов видео js является библиотека значков, заимствованная из FontAwesome. Этот пример будет использовать значок-твиттер, но не стесняйтесь использовать пользовательский css/html в соответствии с вашими потребностями.

<!doctype html>
<html>
  <head>
    <link href="http://vjs.zencdn.net/4.1.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.1.0/video.js"></script>
    <!-- For the twitter icon. -->
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">  

    <style>
      .vjs-control.vjs-tweet-button:before {
        font-family: FontAwesome;
        content: "\f081";
      }
      </style>
  </head>  
  <body>
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
      <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
      <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
    </video>
    <script>
      videojs.Tweet = videojs.Button.extend({
      /** @constructor */
        init: function(player, options){
          videojs.Button.call(this, player, options);
          this.on('click', this.onClick);
        }
      });

      videojs.Tweet.prototype.onClick = function() {
        alert("TWEET!");
      };

      // Note that we're not doing this in prototype.createEl() because
      // it won't be called by Component.init (due to name obfuscation).
      var createTweetButton = function() {
        var props = {
            className: 'vjs-tweet-button vjs-control',
            innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
            role: 'button',
            'aria-live': 'polite', // let the screen reader user know that the text of the button may change
            tabIndex: 0
          };
        return videojs.Component.prototype.createEl(null, props);
      };

      var tweet;
      videojs.plugin('tweet', function() {
        var options = { 'el' : createTweetButton() };
        tweet = new videojs.Tweet(this, options);
        this.controlBar.el().appendChild(tweet.el());
      });

      var vid = videojs("example_video_1", {
        plugins : { tweet : {} }
      });
    </script>
  </body>
</html>

Очевидно, вы можете играть с типом добавляемого компонента, стилем и функциональностью, но это должно по крайней мере показать вам, как начать.

Ответ 2

Я просто хотел добавить немного обновления к этому вопросу. Теперь вы можете использовать addChild для большинства компонентов в Video.js. Я обновил код ctangney ниже.

<script>
  /** Tweet Button **/
  videojs.Tweet = videojs.Button.extend({
  /** @constructor */
    init: function(player, options){
      videojs.Button.call(this, player, options);
      this.on('click', this.onClick);
    }
  });

  videojs.Tweet.prototype.createEl = function() {
    var props = {
      className: 'vjs-tweet-button vjs-control',
      innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
      role: 'button',
      'aria-live': 'polite', // let the screen reader user know that the text of the button may change
      tabIndex: 0
    };

    return videojs.Button.prototype.createEl(null, props);
  };

  videojs.Tweet.prototype.onClick = function() {
    alert("TWEET!");
  };

  /** Video.js Plugin Code **/
  videojs.plugin('tweet', function( options ) {
    options = options || {};
    this.controlBar.addChild('tweet', options );
  });

  /** Set Up Video.js Player **/
  var vid = videojs("example_video_1", {
    plugins : { tweet : {} }
  });
</script>

Ответ 3

Кажется, что в настоящее время у сообщества VideoJS нет плагинов, применимых к последней версии 4.0 - так как мне нужна кнопка для изменения между различными качествами видео, я скоро буду погружаться в это.

Для быстрого ввода: вы можете подключиться к подключаемым модулям VideoJS 4.0 с помощью этой документации: https://github.com/videojs/video.js/blob/master/docs/plugins.md

Поскольку мне нужно было какое-то исследование, чтобы найти эту страницу wiki, я подумал, что должен поделиться ею.

Ответ 4

Я тоже искал это и нашел это: https://github.com/jDavidnet/video-js-plugins Я не могу заставить его работать, но если вы можете понять, что вы получили то, что вам нужно. Когда вы это сделаете, пожалуйста, поделитесь со мной?

Ответ 5

Основываясь на коде b.kelly, вы также можете расширить функциональность, удалив ненужные кнопки, например, код ниже удалит некоторые из наиболее распространенных кнопок

 var vid = videojs("example_video_1", {
    plugins : { tweet : {} },
    children: {
        controlBar: {
            children: {
                volumeControl: false,
                muteToggle: false,
                playToggle: false,
            }
        }
    }
});