media.js

# Toolbar

Media.js ships with a toolbar you may customize.

# Available Controls

Media.js ships with a set of common controls you may pick some and add them to your toolbar.

{
  controls: [
      new PlayButton(),
      new MuteButton(),
      new VolumeSlider(),
      new TimeDisplay(),
      new TimeSlider(),
      new FullscreenButton(),
  ],
}
1
2
3
4
5
6
7
8
9
10

# Add Your Own Controls

In some cases you'll extend the toolbar and add your own controls. A control extends the base Control class and have to provide a boot() and a makeElement() method.

export default class MyControlItem extends Control {
    boot() {
        // Here you may register your event listeners
        this.listen("click", event => {
            // Do something
        });
    }

    makeElement() {
        // Create the HTML Element that will be added to the toolbar.
        return Element.create("button", {
            class: "my-control-item",
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Then simply add you controls to your configuration object.

Media.watch(".my-video", {
    controls: [new PlayButton(), new MyControlItem(), new TimeSlider()],
});
1
2
3

← Events →