12

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

是否有适当的方法将项目添加到控制栏？我正在寻找添加“tweet”、“like”和其他各种按钮。

到目前为止，我一直试图做到这一点无济于事。

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

谢谢！

4

5 回答 5

17

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

我要做的就是向 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>

您显然可以使用您添加的组件类型、样式和功能，但这至少应该向您展示如何开始。

于 2013-06-26T09:32:26.057 回答
4

我只是想为这个问题添加一些更新。您现在可以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>
于 2014-07-03T16:01:08.333 回答
1

现在看来，VideoJS 社区缺少适用于最近 4.0 版本的插件——因为我需要一个按钮来在不同的视频质量之间进行切换，我很快就会深入研究。

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

由于我需要一些研究来找到那个 wiki 页面，所以我想我应该分享它。

于 2013-06-11T14:51:14.280 回答
0

我也在寻找这个并找到了这个：https ://github.com/jDavidnet/video-js-plugins 我无法让它工作，但如果可以的话，我想你已经得到了你需要的东西。当你这样做时，请与我分享？

于 2013-05-17T17:37:19.837 回答
0

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

 var vid = videojs("example_video_1", {
    plugins : { tweet : {} },
    children: {
        controlBar: {
            children: {
                volumeControl: false,
                muteToggle: false,
                playToggle: false,
            }
        }
    }
});
于 2016-10-11T14:28:56.723 回答