Azure Media Player のプラグインの作成

  • [アーティクル]

プラグインは、プレーヤーの機能を拡張または強化するために作成される JavaScript です。 Azure Media Player の外観や機能を変更するプラグインや、他のサービスとのインターフェイスを持つプラグインを作成できます。 これは 2 つの簡単な手順で行うことができます。

手順 1

次のような関数で JavaScript を作成します。


    (function () {
        amp.plugin('yourPluginName', function (options) {
        var myPlayer = this;
           myPlayer.addEventListener(amp.eventName.ready, function () {
        console.log("player is ready!");
            });
        });
    }).call(this);

コードは、HTML ページ内に <script> タグで囲んで直接作成したり、外部の JavaScript ファイル内に作成したりすることができます。 後者を実行する場合は、AMP スクリプトの "後" に HTML ページの <head> に JavaScript ファイルを必ず含めるようにしてください。

例:

    <!--*****START OF Azure Media Player Scripts*****-->
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <!--*****END OF Azure Media Player Scripts*****-->
    <!--Add Plugins-->
    <script src="yourPluginName.js"></script>

手順 2.

次の 2 つの方法のいずれかで、JavaScript を使用してプラグインを初期化します。

方法 1:

    var myOptions = {
        autoplay: true,
        controls: true,
        width: "640",
        height: "400",
        poster: "",
        plugins: {
            yourPluginName: {
                [your plugin options]: [example options]
           }
        }
    };
    var myPlayer = amp([videotag id], myOptions);

方法 2:

    var video = amp([videotag id]);
    video.yourPluginName({[your plugins option]: [example option]});

プラグイン オプションは必須ではありません。これらを含めると、プラグインを使用する開発者は、ソース コードを変更しなくても動作を構成できます。

プラグインの作成に関するヒントやその他の例については、ギャラリーをご覧ください。

注意

プラグイン コードは、視聴者のプレーヤー エクスペリエンスの有効期間中に DOM 内の項目を動的に変更します。プレーヤーのソース コードに永続的な変更を加えることはありません。 ここでは、ブラウザーの開発者ツールについて理解しておくと便利です。 たとえば、プレーヤーの要素の外観を変更する場合は、その HTML 要素をそのクラス名で検索し、そこから属性を追加または変更することができます。 HTML 属性の変更に関する優れたリソースを示します。

統合プラグイン

現在、 time-tip と hotkeys の 2 つのプラグインが AMP に組み込まれています。 これらのプラグインは、最初はプレーヤー用のモジュール式のプラグインとして開発されましたが、現在はプレーヤーのソース コードに含まれています。