Question

我正在查看videojs插件的新API：https://github.com/videojs/video.js/blob/master/docs/plugins.md

是否有正确的方法将项目添加到控制栏？我想添加'推文'，'喜欢'和其他各种各样的按钮。

到目前为止，我已经愚蠢地试图完成这项任务无济于事。

我确实查看了新的插件示例。这些都不会修改控制栏。

谢谢！

Answer 1

在我看来，目前代码库有点动荡，也许很快就会出现一个更连贯的插件模式 - 但与此同时 - 如果你还没有发现如何添加元素在控制栏中，我将提供一个简单的例子。

我要做的就是在videojs核心对象中添加一个组件，并告诉控制栏将该组件包含为其子组件之一。

我最喜欢的视频js之一是从FontAwesome借来的图标库。这个例子将使用那里的icon-twitter字形，但可以随意使用自定义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>

你可以使用你添加的组件类型，风格和功能，但这至少应该告诉你如何开始。

Answer 2

我只是想为这个问题添加一些更新。您现在可以在Video.js中的大多数组件上使用addChild。我已经更新了下面的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>

Answer 3

现在看来VideoJS社区缺乏适用于最近4.0版本的插件 - 因为我需要一个按钮来改变不同的视频质量，我很快就会深入研究。

快速介绍：您可以使用以下文档将插件连接到VideoJS 4.0：https://github.com/videojs/video.js/blob/master/docs/plugins.md

由于我需要一些研究来查找维基页面，我认为我应该分享它。

Answer 4

我也在寻找这个，并发现了这个：https://github.com/jDavidnet/video-js-plugins 我不能让它工作，但如果你能，我认为你得到了你需要的东西。当你这样做时，请与我分享？

Answer 5

在b.kelly代码的基础上，您还可以通过删除不需要的按钮来扩展功能，例如下面的代码将删除一些更常见的按钮

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

VideoJS 4.0插件：如何正确添加项目到controlBar？

5 个答案: