外部ビデオを使用するAMP

概要

Accelerated Mobile Pagesは、「デバイスと配信プラットフォーム全体で、一貫して高速で美しく高性能なウェブサイトや広告の作成」を可能にすることを目的としたGoogleのプロジェクトです。あなたは使うことができます Brightcove Player プロジェクトにはAMPが含まれているため amp-brightcove サイト運営者が埋め込むことができるコンポーネント Brightcove Player■AMPHTMLドキュメント内。この例では、外部へのURLを受け入れるカスタムプラグインを使用しています（video cloud）を介して渡されたビデオ amp-brightcove カスタムを使用するコンポーネント data-param-video-url 属性。

サンプル

次のサンプルAMP HTMLページには、 Brightcove Playerとして指定することができます。 player は正常に機能するため、このサンプルの興味深い部分はHTMLです。 HTMLコードについては、このドキュメントの後半で説明します。

ペンを見る AMP-Brightcove Player- 外部ビデオ by Brightcove ラーニングサービス（@rcrooks1969）上コードペン.

AMPのリソース

AMPプロジェクトは、 amp-brightcove コンポーネントを表示するコンポーネント Brightcove Player。コンポーネントはアンプ-brightcove の資料をご参照ください。

AMPは例を提供する amp-brightcove 次の文書に詳細が記載されています。

Player の監視

Brightcove AMPの使用を強化するためのプラグインを提供しています Brightcove Player。このプラグインは、AMPのビデオインターフェースAPIのサポートを追加して、いくつかの高度な機能を有効にします。

amp-analyticsとの統合：AMPページドメインに対する第三者の分析へのビューのトラッキングを可能にします。
アンプバインドとの統合：AMPページの他の要素で再生をコントロールすることができます。

Player■プラグインがなくてもAMPで機能しますが、その機能はありません。

プラグインのインストール

すべての場合と同様 Brightcove Player プラグインのJavaScriptには、プラグインの名前とURLが必要です（このプラグインの使用にはCSSファイルは必要ありません）：

プラグイン名

  ampSupport

JavaScriptのURL

  //players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js

HTMLページコード検査

上記のCodePenサンプルのHTMLページコードを以下に示します（プラグインコードの詳細は次のセクションで説明します）。コードの完全な説明は、上記のリンク先のドキュメントでAMPによって提供されています。次のリストには、注意すべきいくつかのトリック/トラップがあります。

ライン14： style タグを含む必要がありますが、 amp-custom 属性。
Line 26：コードを美しくしないでください。ボイラープレートCSSは、AMPが提供する必要があります。
Line 42：外部ビデオへのURLがここに渡されます。名前はiframeから取得されるため、 src URL、名前は videoUrl.
ライン43： data-video-id 存在する必要がありますが、外部ビデオを使用する場合は値が割り当てられません。
ライン44： width 更に height 属性は、 player レスポンシブレイアウトに埋め込まれています。

  <!--
    ## Introduction
  
    The `amp-brightcove` component allows embedding a Brightcove
    [Video Cloud](https://www.brightcove.com/en/online-video-platform) or
    [Perform](https://www.brightcove.com/en/perform) player.
  -->
  <!-- -->
  <!doctype html>
  <html ⚡>
  <head>
    <meta charset="utf-8">
    <title>amp-brightcove</title>
    <style amp-custom>
      .player-container {
        width: 640px;
        height: 360px;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- ## Setup -->
    <!-- Import the Brightcove component in the header. -->
    <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="https://ampbyexample.com/components/amp-brightcove/">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  
  
  </head>
  <body>
  
    <!-- ## Basic Usage -->
    <!--
      A responsive brightcove video. The required data is `data-account` and `data-video-id`. Other
      supported parameters are `data-player-id`, `data-embed` and `data-playlist-id`.
    -->
    <div class="player-container">
      <amp-brightcove
        data-account="3676484087001"
        data-player-id="ByrhJWAPf"
        layout="responsive"
        data-param-video-url="//solutions.brightcove.com/bcls/videos/calm-day-oregon-coast.mp4"
        data-video-id
        width="16" height="9">
      </amp-brightcove>
    </div>
  
  
  </body>
  </html>

プラグインコード検査

AMPの機能は、 amp-brightcove コンポーネントはiframe実装を作成します Brightcove Player。 iframeのURLには、次のようにカスタム属性があります。

  <iframe frameborder="0" allowfullscreen="true" src="https://players.brightcove.net/3676484087001/ByrhJWAPf_default/index.html?videoUrl=%2F%2Fsolutions.brightcove.com%2Fbcls%2Fvideos%2Fcalm-day-oregon-coast.mp4"; class="i-amphtml-fill-content" kwframeid="1"></iframe>

iframeコードをスクロールすると、次のようなクエリ文字列が表示されます。

クエリ文字列名は次のとおりです。 videoUrl。 URLはURLエンコードされていることにも注意してください。これらの両方の問題は、次のようにプラグインコードに反映されます。

21-38：関数にパラメータとして渡されたクエリ文字列に関連付けられた値を検出するヘルパ関数。
Line 7：XNUMXの値を取得します。 videoUrl ヘルパー関数を使用してクエリ文字列を返します。
行8：JavaScriptを使用する decodeURIComponent() メソッドを使用して、動画の有効なURLを取得します。
11〜14行目：デコードされたURLを使用して、ビデオを player。 MP4以外のビデオ形式を使用する場合は、正しいパスを渡す必要があります。 type ビデオの内線番号を読み取り、正しい値を割り当てるロジックを作成します。
17-19：もちろん必須ではありませんが、起動時にビデオを再生したい場合は、このコードを使用することができます。

  videojs.registerPlugin('ampPassVideo', function() {
    var myPlayer = this,
      encodedVideoQueryParam,
      decodedVideoQueryParam;
  
    // Get the query string and un-URL encode it
    encodedVideoQueryParam = getQuerystring('videoUrl');
    decodedVideoQueryParam = decodeURIComponent(encodedVideoQueryParam);
  
    // Load the video into the player
    myPlayer.src({
      'type': 'video/mp4',
      'src': decodedVideoQueryParam
    });
  
    // On loadedmetadata event, play the video
    myPlayer.on('loadedmetadata', function(){
      myPlayer.play();
    });
  
    /*
     * usage: foo = getQuerystring("bctid", null);
     * foo will be equal to value of query param bctid
     * note that the default_ parameter is what you will get back
     * if the key isn’t found
     */
    function getQuerystring(key, default_) {
      var regex, qs;
      if (default_ == null) default_ = "";
      key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
      qs = regex.exec(window.location.href);
      if (qs === null) {
        return default_;
      } else {
        return qs[1];
      }
    }
  });

このプラグインを player どちらかを使用して Studio または Player Management API.

特徴

AMPのドキュメントで説明されていますが、ここでは特に重要な機能がいくつか強調表示されています。

カスタムパラメータ

あなたはあなたに追加情報を渡したいと思うかもしれません player プラグインがアクセスできるようにします。これを行うには、 amp-brightcove 名前を付ける必要がある要素 data-param-*ここで、 * あなたの財産の名前です。

パラメータは、キャメルケースの属性名が player URL。キーと値はURLエンコードされています。例えば：

data-param-language="de" になる &language=de
data-param-ad-vars="key:val;key2:val2" になる &adVars=key%3Aval%3Bkey2%3Aval2

外部参照元のサポート

Brightcove Player v6.25.0以降では、iframeでの任意のリファラーの設定がサポートされています。 AMPコンポーネントは、独自のリファラーを介して player、 referrer="EXTERNAL_REFERRER" 彼らのアンプの属性-brightcove 埋め込み。

EXTERNAL_REFERRERはAMP独自のマクロです。 https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer 詳細については。

AMP分析

An アンプアナライザ コンポーネントをAMPドキュメントで使用して、任意のアナリティクスのデータを追跡できます。サイト運営者様がビデオイベントをご希望の場合は、これを行うことができます。

AMP Analytics構文のAMPのドキュメント（厄介な）は次のとおりです： https://www.ampproject.org/docs/reference/components/amp-analytics。具体的には、ビデオ分析： https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

トラッキングする例があります example.com ビーコンはネットワークタブでエラーとして表示されます： http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

AMPバインド

AMPバインドは、コンポーネント間でやり取りするためのAMPのAPIです。基本的なレベルで、それはあなたが何かの外部に何かを持つことができます player 再生を制御します。たとえば、次のコードはビデオを再生します。 myPlayer は id アンプの-brightcove player.

    <button on="tap:myPlayer.play">Play</button>

AMPはビデオイベントを信用していないので、ビデオの終了時に演奏するなど、現在はもっと便利なことはできません。これの例はここにあります： http://solutions.brightcove.com/bclifford/ampexamples/bind.html.

Advertising

プレロールを含む広告は、 playerAMPで使用されます。広告プラグインとその構成は、に含める必要があります playerの設定。広告サーバーの呼び出しに記事固有の値を含める必要がある場合は、カスタムデータを player このドキュメントの後半で説明するプラグイン。

AMPは、有効なAMPページに追加できる内容が非常に厳密です。 AMPを使用して Video Cloud 動画資料。たとえば、を追加する標準的な方法を使用することはできません id amp-brightcove タグを使用して script たとえば、IMA3プラグインを構成するためのブロック。繰り返しになりますが、広告は playerの設定。 Studio または Player Management API.

広告マクロを利用する広告設定URLを使用する場合は、 {pageVariable.adId}、変更する必要があります playerの構成。次のようなカスタムパラメータを使用できます。

  data-param-ad-id="preonlybumper"

これにより、広告マクロで値を自動的に使用できるようにはなりません {pageVariable.adId}。それを作るには ad-id/adId プロパティを広告URLに使用できる場合は、 Brightcove Player's query_string_to_window 構成オプション。このオプションは、クエリ文字列パラメーターからグローバル名前空間（ウィンドウ）変数の設定を制御します。すべてのクエリパラメータをグローバル名前空間に追加するには、以下を player 構成：

"query_string_to_window": {
  "target": "queryStringParams"
}

注意してください queryStringsParams nameは、パラメータが格納される「変数」であり、選択に応じて名前を変更できます。

何らかの理由で、限られたパラメーターのみをグローバル名前空間に割り当てる場合は、そうすることができます。たとえば、 data-param-ad-id="..." プラグインで利用できる場合は、以下をに追加します player 構成：

"query_string_to_window": {
  "globals": [
    "adId"
  ]
}

更新の具体的な手順については、 player 構成を参照してください Player 構成-更新 Player 構成から Player Management API 参照。