Skip to content

Our first plugin

Jump to bottom
Tom Jenkinson edited this page Aug 29, 2016 · 2 revisions

Our first plugin

Let's start coding our first plugin. First, we create a simple html embed with Clappr.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Clappr plugin dev tutorial 1 - Hello World</title>
    <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  </head>
  <body>
    <h1>Clappr plugin dev tutorial 1 - Hello World</h1>
    <div id="player"></div>
    <script>
      var player = new Clappr.Player({
        source: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
        poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/HelloWorld.svg/512px-HelloWorld.svg.png",
        parentId: "#player"
      });
    </script>
  </body>
</html>

The player will be attached to DOM in the parentId and it'll be able to play the given source and it'll show a poster before you click on play. Now let's start coding a simple hello world plugin.

The first thing we need to do is create our plugin and we do that by calling the function extend on a plugin class, in this case a UIContainerPlugin:

var HelloWorld = Clappr.UIContainerPlugin.extend({})

Now what we need to do is to override the functions we need by passing an object. As it was mentioned before, Clappr follows an event driven architecture, therefore the main way to know when things happened or to make things it is by using events.

All clappr's components are events so you can listen and trigger them. The plugin classes have a known function called bindEvents that was created to be a point where we can listen the events on the other's components. It's guaranteed that this method will be called upon the creation of the plugin object.

var HelloWorld = Clappr.ContainerPlugin.extend({
  bindEvents() {
    this.listenTo(this.container, Clappr.Events.CONTAINER_PLAY, this.heyListen)
  },
  heyListen: function() { alert('you clicked on play')}
});

Under the hood we use zepto so we can access a jQuery-like object on this.$el and apply CSS calling css or even other methods.

var HelloWorld = Clappr.UIContainerPlugin.extend({
  name: 'hello_world',
  initialize: function() {
    this.render();
  },
  bindEvents: function() {
    this.listenTo(this.container, Clappr.Events.CONTAINER_PAUSE, this.show);
    this.listenTo(this.container, Clappr.Events.CONTAINER_PLAY, this.hide);
  },
  hide: function() {
    this.$el.hide();
  },
  show: function() {
    this.$el.show();
  },
  render: function() {
    this.$el.html('Hello World!');
    this.$el.css('font-size', '100px');
    this.$el.css('color', 'white');
    this.$el.css('background-color', 'red');
    this.$el.css('position', 'relative');
    this.container.$el.append(this.$el);
    this.hide();
    return this;
  }
});

Here we have the complete example code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Clappr plugin dev tutorial 1 - Hello World</title>
    <script type="text/javascript" src="/latest/player.js"></script>
  </head>
  <body>
    <h1>Clappr plugin dev tutorial 1 - Hello World</h1>
    <div id="player"></div>
    <script>
      var HelloWorld = Clappr.UIContainerPlugin.extend({
        name: 'hello_world',
        initialize: function() {
          this.render();
        },
        bindEvents: function() {
          this.listenTo(this.container, Clappr.Events.CONTAINER_PAUSE, this.show);
          this.listenTo(this.container, Clappr.Events.CONTAINER_PLAY, this.hide);
        },
        hide: function() {
          this.$el.hide();
        },
        show: function() {
          this.$el.show();
        },
        render: function() {
          this.$el.html('Hello World!');
          this.$el.css('font-size', '100px');
          this.$el.css('color', 'white');
          this.$el.css('background-color', 'red');
          this.$el.css('position', 'relative');
          this.container.$el.append(this.$el);
          this.hide();
          return this;
        }
      });
      var player = new Clappr.Player({
        source: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
        poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/HelloWorld.svg/512px-HelloWorld.svg.png",
        parentId: "#player",
        plugins: [HelloWorld]
      });
    </script>
  </body>
</html>

In the next tutorials we'll skip some of the details we showed here.

Clone this wiki locally