Azure Media Player の完全セットアップ

  • [アーティクル]

Azure Media Player は簡単に設定できます。 Azure Media Services アカウントからメディア コンテンツの基本的な再生を取得するには、少し時間がかかります。 サンプル は、リリースの samples ディレクトリにも用意されています。

手順 1: ページの先頭に JavaScript ファイルと CSS ファイルを含める

Azure Media Player を使用すると、CDN でホストされているバージョンからスクリプトにアクセスできます。 多くの場合、<head>ではなく、終了本文タグ <body> の前に JavaScript を配置することをお勧めしますが、Azure Media Player には 'HTML5 Shiv' が含まれています。これは、ビデオ タグを有効な要素として尊重するために、古い IE バージョンでは先頭に配置する必要があります。

手記

Modernizr のような HTML5 shiv を既に使用している場合は、任意の場所に Azure Media Player JavaScript を含めることができます。 ただし、Modernizr のバージョンにビデオ用の shiv が含まれていることを確認してください。

CDN バージョン

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

大事な

運用環境では バージョンを使用 しないでください。これはオンデマンドで変更される可能性があります。 latest を Azure Media Player のバージョンに置き換えます。 たとえば、latest を 2.1.1に置き換えます。 Azure Media Player のバージョンは、ここでから照会できます。

手記

1.2.0 リリース以降、フォールバック テクノロジに場所を含める必要はなくなりました (azuremediaplayer.min.js ファイルの相対パスから場所が自動的に取得されます)。 フォールバック テクノロジの場所を変更するには、上記のスクリプトの後の <head> に次のスクリプトを追加します。

手記

Flash プラグインと Silverlight プラグインの性質上、swf ファイルと xap ファイルは機密情報やデータなしでドメインでホストする必要があります。これは、Azure CDN でホストされているバージョンで自動的に処理されます。

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

手順 2: HTML5 ビデオ タグをページに追加する

Azure Media Player では、HTML5 ビデオ タグを使用してビデオを埋め込むことができます。 その後、Azure Media Player はタグを読み取り、HTML5 ビデオをサポートするブラウザーだけでなく、すべてのブラウザーで動作します。 基本的なマークアップ以外にも、Azure Media Player にはいくつかの追加の部分が必要です。

  1. <video> の <data-setup> 属性は、ページの準備ができたらビデオを自動的に設定し、属性から任意の (JSON 形式で) 読み取るように Azure Media Player に指示します。
  2. id 属性: 同じページ上のすべてのビデオに対して使用し、一意である必要があります。
  3. class 属性には、次の 2 つのクラスが含まれています。
    • azuremediaplayer は、Azure Media Player UI 機能に必要なスタイルを適用します
    • amp-default-skin は、HTML5 コントロールに既定のスキンを適用します
  4. <source> には 2 つの必須属性が含まれています
    • src 属性には、Azure Media Services から *.ism/manifest ファイルを含めることができます。Azure Media Player は DASH、SMOOTH、HLS の URL をプレーヤーに自動的に追加します
    • type 属性は、ストリームに必要な MIME の種類です。 ".ism/manifest" に関連付けられている MIME の種類は、"application/vnd.ms-sstr+xml"
  5. <source> の 省略可能な<data-setup> 属性は、暗号化の種類 (AES または PlayReady、Widevine、FairPlay) やトークンなど、Azure Media Services からのストリームに固有の配信ポリシーがあるかどうかを Azure Media Player に通知します。

HTML5 ビデオの場合とまったく同じように、属性、設定、ソース、トラックを含める/除外します。

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

既定では、大きな再生ボタンは左上隅に配置されているため、ポスターの興味深い部分はカバーされません。 大きな再生ボタンを中央に配置する場合は、<video> 要素に amp-big-play-centeredclass を追加できます。

動的に読み込まれた HTML の代替セットアップ

Web ページまたはアプリケーションがビデオ タグ (ajax、appendChild など) を動的に読み込む場合は、ページの読み込み時に存在しない可能性があるため、データセットアップ属性に依存するのではなく、プレーヤーを手動で設定する必要があります。 これを行うには、まず、プレイヤーが初期化されたときに混乱がないように、タグからデータセットアップ属性を削除します。 次に、Azure Media Player JavaScript が読み込まれた後、およびビデオ タグが DOM に読み込まれた後に、次の JavaScript を実行します。

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

amp 関数の最初の引数は、ビデオ タグの ID です。 これを独自の値に置き換えます。

2 番目の引数は options オブジェクトです。 これにより、data-setup 属性と同様に、追加のオプションを設定できます。

3 番目の引数は 'ready' コールバックです。 Azure Media Player が初期化されると、この関数が呼び出されます。 準備完了コールバックでは、"this" オブジェクトはプレイヤー インスタンスを参照します。

要素 ID を使用する代わりに、要素自体への参照を渡すこともできます。


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);