外部ビデオを使用するAMP

概要

Accelerated Mobile Pagesは、「デバイスと配信プラットフォーム全体で、一貫して高速で美しく高性能なウェブサイトや広告の作成」を可能にすることを目的としたGoogleのプロジェクトです。あなたは使うことができます Brightcove Player プロジェクトにはAMPが含まれているため amp-brightcove サイト運営者が埋め込むことができるコンポーネント Brightcove PlayerAMP HTMLドキュメント内のs。この例では、カスタムプラグインを使用して、外部（非ビデオクラウド）ビデオへのURLを受け取ります。 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。コンポーネントは amp-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" 彼らのamp-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 amp-brightcoveの player.

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

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

Advertising

プレロールを含む広告は players AMPで使用されます。

広告プラグインとその設定は、 playerの設定。広告サーバーの呼び出しに記事固有の値を含める必要がある場合は、カスタムデータを player 下記のプラグイン。

前述のように、AMPは有効なAMPページに追加できるものは非常に厳密です。たとえば、 id amp-brightcove タグを使用して script たとえば、IMA3プラグインを構成するためのブロック。前の段落で述べたことを繰り返すために、広告は playerの設定。 Studio または Player Management API.