Video Cloud 動画を使用した AMP

このトピックでは、Accelerated Mobile Pages (AMP) を Brightcove プレーヤーと併用する方法について説明します。

概要

Accelerated Mobile Pages は Google のプロジェクトで、「デバイスや配信プラットフォームを問わず、一貫して高速で、美しく、高パフォーマンスな Web サイトと広告を構築すること」を目的としています。Brightcove プレーヤーは AMP と連携でき、プロジェクトには amp-brightcove コンポーネントが含まれており、AMP HTML ドキュメント内に Brightcove プレーヤーを埋め込むことができます。

サンプル

以下は Brightcove プレーヤーを含んだ AMP HTML ページのサンプルです。プレーヤーは通常どおり動作しますので、HTML 自体がこのサンプルのポイントとなります。HTML コードについては後述します。

See the Pen AMP Example by Brightcove Learning Services (@rcrooks1969) on CodePen.

AMP の仕組み上、使用前にその制限を十分に理解する必要があります。例えば、次のような点です:

AMP では使用できる HTML に厳しい制限があります。詳細は AMP HTML 仕様を参照してください。
Brightcove Analytics では AMP ページの参照元ページが正しく記録されません。referrer_domain は空白になり、source_type は direct として記録されます。
Brightcove プレーヤーの Video タグ実装で使用できる属性の多くは <amp-brightcove ..> では無効です。利用可能な属性については AMP HTML 仕様を確認してください。
AMP はドメイン制限付きプレーヤーでは使用できません。

プレーヤー設定

Brightcove では、AMP と Brightcove プレーヤーの連携を強化するためのプラグインを提供しています。このプラグインは AMP が求める video interface API をサポートし、AMP ドキュメント内でプレーヤーを制御できるようにします。また、次の高度な機能も有効にします:

amp-analytics との連携: AMP ページのドメインに対する視聴データをサードパーティアナリティクスに送信できます。
amp-bind との連携: AMP ページ内の他の要素から再生制御が可能です。

プラグインを追加していないプレーヤーは AMP ドキュメントで期待どおりに動作しない場合があります。

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

Brightcove プレーヤーのプラグインと同様に、プラグインの名前と JavaScript の URL が必要です（このプラグインに CSS ファイルは不要です）。

プラグイン名

  ampSupport

JavaScript URL

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

AMP プラグインを実装するには、プラグイン名と JavaScript の URL をプレーヤーに追加します。

Studio で PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを選択します。
プレーヤーのリンクをクリックしてプロパティを開きます。
左側メニューで プラグイン をクリックします。
続いて、3 つのオプションのうち プラグイン をクリックします。
プラグインの追加 で カスタムプラグイン を選択します。
プラグイン名 に ampSupport を入力します。

JavaScript URL に次を入力します：

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

このプラグインでは CSS や追加オプションを入力する必要はありません。
保存をクリックします。
プレーヤーを公開するには、公開をクリックします。
開いているダイアログを閉じるには、閉じる をクリックします。

AMP の関連リソース

AMP プロジェクトは、Brightcove プレーヤーを表示する特別な amp-brightcove コンポーネントを開発しています。このコンポーネントの詳細は amp-brightcove ドキュメントを参照してください。

AMP では、amp-brightcove の実装例を以下のドキュメントで提供しています:

amp-by-example

コードの確認

上記の CodePen サンプルのコードを以下に示します。コードの詳細な説明は、前述のリンク先にある AMP のドキュメントで提供されています。以下のリストは、知っておくべきコツや注意点です。

20 行目：コードを整形（beautify）しないでください。AMP が提供する boilerplate CSS がそのまま必要です。
35 行目：width と height 属性は、レスポンシブレイアウト内に埋め込まれるプレーヤーのアスペクト比を決定します。

  <!--
    ## 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>
    <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`.
    -->
    <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9">
    </amp-brightcove>

  </body>
  </html>

機能

AMP ドキュメントで説明されていますが、ここでは特に重要な機能をいくつか取り上げます。

カスタムパラメーター

プラグインで利用できるよう、プレーヤーに追加情報を渡したい場合があります。その場合、amp-brightcove 要素に data-param-* という名前の属性を追加します（* は任意のプロパティ名）。

パラメーターはキャメルケースの属性名としてプレーヤー URL に追加されます。キーと値は URL エンコードされます。例：

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

dock（ピクチャー・イン・ピクチャー）

dock 属性を追加すると、スクロールで画面外に出る際にプレーヤーを「ドッキング」できます。プレーヤーは小型化され、ページ右上付近に移動します。HTML 標準ではこの機能は picture-in-picture と呼ばれます。以下はドッキングされたプレーヤーのスクリーンショットです。

この機能を利用するには以下を実施します：

以下のコードスニペット 2 行目のように、dock 機能を含むスクリプトを読み込みます。
13 行目のように <amp-brightcove> タグに dock 属性を追加します。

  ...
      <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
  </head>
  <body>

  ...
      <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9"
      dock>
    </amp-brightcove>
    ...

外部リファラー（referrer）のサポート

Brightcove Player v6.25.0 以降では、iframe に任意の referrer を設定できます。AMP コンポーネントは、referrer="EXTERNAL_REFERRER" 属性を amp-brightcove に追加することで、AMP 側の referrer をプレーヤーへ渡すことができるようになりました。

EXTERNAL_REFERRER は AMP 自身のマクロです。詳細は以下を参照してください： external-referrer の仕様はこちら

AMP Analytics

amp-analytics コンポーネントを使用すると、AMP ドキュメント内で任意のアナリティクスサービスにデータを送信できます。動画イベントも追跡可能です。

AMP Analytics の構文（非常に複雑です）については以下を参照： AMP Analytics ドキュメント動画イベントに特化した説明はこちら：動画アナリティクスのドキュメント

例として、example.com に対してトラッキングするサンプルがあります（ネットワークタブにエラーとしてビーコンが表示されます）： analytics.html サンプル

AMP Bind

AMP Bind はコンポーネント間を連携させるための AMP API です。基本的な使い方として、プレーヤー外部の要素から再生を制御できます。以下は myPlayer を ID に持つ amp-brightcove プレーヤーを再生する例です：

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

AMP は動画イベントを信用しないため、動画終了時の処理など高度な制御は現時点でできません。以下に例があります： bind.html サンプル

プレーヤーのスタイリング

プレーヤーのスタイルを変更するには特別な構文を使用する必要があります。例えば、プレーヤーのサイズを変更するには style ブロックを作成し、プレーヤーを div で囲みます：

  <style amp-custom>
    .player-container {
      width: 640px;
      height: 360px;
    }
  </style></code></pre>

  ...

  <div class="player-container">
    <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9">
    </amp-brightcove>
  </div>

使用できる style タグは 1 つだけで、必ず amp-custom 属性を付与する必要があります。

ボットのためのエラー抑制

AMP をサポートしないボットが AMP 動画プレーヤーを含むページをクロールすると、動画エラーが発生し SEO の評価に影響する可能性があります。Brightcove プレーヤーの JSON 設定に suppressNotSupportedError オプションを追加すると、この問題を回避できます。以下を追加してください：

"suppress_not_supported_error": true

この機能を利用するには、Brightcove プレーヤーバージョン 6.38.4 以降が必要です。

自動再生（Autoplay）

autoplay を使用すると、ブラウザのコンソールに警告が表示される場合があります：

Autoplay オプションは無効です。AMP では autoplay を使用する場合、AMP 埋め込みに autoplay を追加する必要があります。

この警告は Brightcove プレーヤー設定内で autoplay オプションを使用している場合に表示されます。警告を表示させないためには、プレーヤー設定で「autoplay」を false にするか設定から削除してください。

AMP のルールでは、AMP 管理下の autoplay（amp-brightcove 要素に autoplay 属性を付与する）かユーザー操作による再生のみ許可されています。 autoplay を利用する場合、AMP ページ専用のプレーヤーを作成し、プレーヤー設定で autoplay を定義しないことを Brightcove は推奨しています。