Brightcove NGP(新プレイヤー)のプラグイン作成方法

プラグインとは

NGPではプラグインを開発することによってプレイヤーの機能を拡張することができる。
プラグインとしてプレイヤーに読み込ませられるファイルはJavaScript/CSSの2種類。

プラグインを使えば下記のようなことを実現できる。

• 最初の10秒間、プレイヤー上にオーバーレイで特定のテキストを表示させる。
• 再生ボタンが押されるたびに何かする。

ちなみに動画広告も専用の広告配信プラグインを使用して配信したりする。

プラグイン例

ソースの一例。

myPlugin.js（JavaScriptプラグイン）

// プラグイン名を適当に付ける。パラメータを配列形式で受け取る（パラメータは無しでもOK）。
videojs.plugin('myPlugin', function(param) {
    console.log(param);
    var player = this;

    // プレイヤーの再生ボタンが押されたとき
    player.on("play", function(){
        console.log("再生ボタンが押されました。");
    });

    // 動画が最後まで再生されたとき
    player.on("ended", function(){
        console.log("動画の再生が完了しました。");
    });
});

取得できるプレイヤーイベント等は公式ドキュメントを参照。
Brightcove Player API

プレイヤー側にプラグイン読み込み・パラメータ設定

通常の場合

プレイヤー管理画面のプラグイン設定欄にプラグインファイルのURLとプラグイン名を入力。
プラグインに渡すパラメータが、そのプレイヤーを使用して配信している動画全てで同じでよければここの設定欄に入力できる。

ページ毎に異なるプラグインを読み込ませたり、別々のパラメータをプラグインに渡したい場合

※インページ方式で埋め込んでいる場合のみ可能

動画埋め込み先ページに下記のようにプラグイン読み込み・パラメータ指定スクリプトを記述する。

<script src="myPlugin.jsのURL"></script>
<script type="text/javascript">
    videojs('インページvideoタグのID').myPlugin({
        "url"  : location.href
    });
</script>

参考

プラグイン開発の公式ドキュメント
・http://docs.brightcove.com/en/video-cloud/player-management/guides/plugin-dev-quick-start.html
・http://docs.brightcove.com/en/video-cloud/player-management/getting-started/player-mgmt-quick-start.html#customizePlayer