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 に組み込まれています。 これらのプラグインは、最初はプレーヤー用のモジュール式のプラグインとして開発されましたが、現在はプレーヤーのソース コードに含まれています。