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

Question

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

Bro*_*nix 12 video.js

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

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

到目前为止,我已经试图完成这项任务无济于事.

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

谢谢!

Answer 1

Cam*_*ney 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>

Run Code Online (Sandbox Code Playgroud)

显然,您可以使用添加的组件类型,样式和功能,但这至少应该告诉您如何开始使用.

归档时间：	12 年，6 月前
查看次数：	11407 次
最近记录：	9 年，1 月前