はじめに

Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart12です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。

今回はVideo.jsのプラグインという機能について解説します。

前回
Video.js完全マニュアル part11 〜言語設定〜

part1から読む人はこちら

この記事の対象者

Video.jsを利用する人
動画プレイヤーのUI操作をしたい人
動画再生関連のサービスを作りたい人

この記事の解説する章

Plugins

プラグイン

Video.jsの強みは、誰もがPlayerをカスタマイズして共有することが可能なプラグインのエコシステムにあります。
UIの調整から、新しい再生技術まであらゆるものを共有することが出来ます。

基本的なプラグインの書き方

1. 関数を定義する

まずはJavaScriptで関数を定義します。

const examplePlugin = () => {
    console.log('プラグインで登録された関数');
}

ただconsoleを出力するだけの関数を用意しました。

2. `videojs.registerPlugin()`関数でプラグイン登録する

次に、作成した関数をvideojs.registerPlugin()関数でプラグイン登録します。

videojs.registerPlugin('呼出時の関数名', 関数)

videojs.registerPlugin('examplePlugin', examplePlugin);

3. Playerで呼び出す

最後に、Playerから登録した関数名で関数を実行することで登録したプラグインを呼び出すことが出来ます。

const examplePlugin = () => {
    console.log('プラグインで登録された関数');
}
const video1 = videojs('video1', {});
videojs.registerPlugin('examplePlugin', examplePlugin);

// プラグインを呼び出す
video1.examplePlugin();

以上が最もシンプルなプラグインの登録方法です。

高度なプラグインの作成

Video.jsのVer6以降で、Classベースでプラグインを登録できるようになりました。

Classの定義

Video.jsが用意しているベースのプラグインを継承して作成します。

// Video.jsの用意するClassを読み込む
const Plugin = videojs.getPlugin('plugin');

// 継承する形でClassを定義
class ExamplePlugin extends Plugin {

    constructor(player, options) {
        super(player, options);

        if (options.customClass) {
            player.addClass(options.customClass);
        }

        player.on('playing', function () {
            console.log('playback began!');
        });
    }
}
videojs.registerPlugin('examplePlugin', ExamplePlugin);

上記のClassの中身を解説すると、まずsuperでplayerとoptionsを継承しています。
playerは操作するPlayer、optionsはプラグイン呼出時の引数になります。

例えば以下のように呼び出します。

const video1 = videojs('video1');
video1.examplePlugin({'customClass': 'custom-class'});

こうすることで、video1というidのPlayerに対して、ExamplePluginClassを呼び出した際に、{'customClass': 'custom-class'}という引数を渡します。
結果内部の処理でvideo1のPlayerに対してaddClass()関数が実行され、custom-classというclass名が付与されます。

Class内にインスタンスメソッドを定義

また、通常のClassのように内部にインスタンスメソッドを定義して、Pluginsで登録した関数からさらに呼び出すことも可能です。

class ExamplePlugin extends Plugin {

    constructor(player, options) {
        super(player, options);
    }
    doubleNumber(number) {
        return number * 2;
    }
}

const double = video1.examplePlugin().doubleNumber(2);
console.log(double); // 4

変数を管理する

プラグインを登録したら、プラグイン内部で変数を利用して状態を管理することが出来ます。
変数を定義する際には、プラグインに対しdefaultStateを利用します。

video1.examplePlugin().defaultState = {
    custom: '1234'
}

以上のように定義することで、video1.examplePlugin().defaultState.customにアクセスすることで1234という値を取り出すことが出来ます。

変数の変化を検知する

また、変数を変更するにはsetState()メソッドを使用します。そしてsetState()によって変更を検知すると、statechangedイベントが発火するので変更を検知することが出来ます。

video1.examplePlugin().on('statechanged', (e) => {
    if (e.changes && e.changes.custom) {
        console.log('customの変更を検知しました')
    }
})

video1.examplePlugin().setState({custom: 'bbbbbbb'})

Player作成時にプラグインに対し変数設定する

以下のようにすることで、Player作成時にプラグインを使用し、かつ変数登録することが可能です。

videojs('video1', {
    plugins: {
        examplePlugin: {
            custom: 'example-class'
        }
    }
});

プラグインを解除する

登録したプラグインは、dispose()メソッドを使用することで破棄することが出来ます。

video1.examplePlugin().dispose()

Twitterもやってます

Video.js完全マニュアル part12 〜プラグイン〜