外部動画を使用した AMP
概要
Accelerated Mobile Pages は Google のプロジェクトで、「デバイスや配信プラットフォームを問わず、一貫して高速で美しく高パフォーマンスな Web サイトと広告を作成できるようにする」ことを目的としています。Brightcove プレーヤーは AMP で利用可能であり、AMP には amp-brightcove コンポーネントが含まれており、AMP HTML ドキュメント内に Brightcove プレーヤーを埋め込むことができます。
この例では、外部（非 Video Cloud）動画の URL を data-param-video-url というカスタム属性を介して amp-brightcove コンポーネントへ渡し、それを受け取るカスタム プラグインを使用しています。
サンプル
以下は Brightcove プレーヤーを含む AMP HTML ページのサンプルです。プレーヤーは通常どおり動作しますので、このサンプルで特に注目すべき点は HTML です。HTML コードは後ほど説明します。
Brightcove Learning Services による AMP-Brightcove Player-External Video のデモを見る (@rcrooks1969) on CodePen.
AMP の関連資料
AMP プロジェクトは Brightcove プレーヤーを表示する特別な amp-brightcove コンポーネントを開発しました。このコンポーネントについては、amp-brightcove ドキュメント に詳細が記載されています。
AMP は amp-brightcove の実装例も提供しており、以下のドキュメントで確認できます:
プレーヤー設定
Brightcove は、AMP と Brightcove プレーヤーの連携を強化するためのプラグインを提供しています。このプラグインは AMP の video interface API をサポートし、以下のような高度な機能を利用できます。
- 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
HTML ページコードの確認
上記 CodePen サンプルの HTML ページコードを以下に示します（プラグイン コードは次のセクションで説明します）。コードの詳細な説明は、前述の AMP ドキュメントで提供されています。以下は注意すべきポイントです:
- 14 行目：
styleタグは 1 つだけ追加できますが、必ずamp-custom属性を含める必要があります。 - 26 行目：コードを「整形（beautify）」しないでください。AMP が提供する boilerplate CSS がそのまま必要です。
- 42 行目：外部動画の URL はここで渡されます。iframe の
srcURL から取得されるため、名前はvideoUrlになります。 - 43 行目：
data-video-idは必須ですが、外部動画を使用する場合は値を設定しません。 - 44 行目：
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>
<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 コンポーネントが Brightcove プレーヤーを iframe として生成します。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 行目：クエリ文字列から値を取得するヘルパー関数。
- 7 行目：ヘルパー関数を使用して
videoUrlの値を取得します。 - 8 行目：JavaScript の
decodeURIComponent()を使用して有効な URL に変換します。 - 11〜14 行目：デコードした URL を使用してプレーヤーに動画を読み込みます。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];
}
}
});
このプラグインは、Studio または Player Management API を使用してプレーヤーに設定できます。
機能
AMP のドキュメントでも説明されていますが、ここでは特に重要ないくつかの機能を強調して紹介します。
カスタム パラメーター
プレーヤーに追加情報を渡してプラグインで利用したい場合があります。その場合、amp-brightcove 要素に追加属性を指定できます。これらの属性名は data-param-* の形式で、* にはプロパティ名を指定します。
パラメーターはキャメルケースの属性名としてプレーヤー URL に付加され、キーと値は URL エンコードされます。例:
data-param-language="de"→&language=dedata-param-ad-vars="key:val;key2:val2"→&adVars=key%3Aval%3Bkey2%3Aval2
外部リファラーのサポート
Brightcove Player v6.25.0 以降では、iframe に任意のリファラーを設定できます。AMP コンポーネントでも referrer="EXTERNAL_REFERRER" 属性を amp-brightcove 埋め込みに追加することで、AMP 側のリファラーをプレーヤーに渡せます。
EXTERNAL_REFERRER は AMP 独自のマクロです。詳細は以下を参照してください：https://github.com/ampproject/amphtml/.../external-referrer
AMP アナリティクス
amp-analytics コンポーネントを使用すると、任意のアナリティクス サービスへデータを送信できます。動画イベントも追跡可能です。
AMP アナリティクスの構文（煩雑です）については以下を参照してください：https://www.ampproject.org/docs/reference/components/amp-analytics。動画アナリティクスについてはこちら：https://github.com/ampproject/.../amp-video-analytics.md
example.com への追跡を行うサンプルもあります（ネットワーク タブにエラーとして表示されます）：http://solutions.brightcove.com/bclifford/ampexamples/analytics.html
AMP Bind
AMP Bind は、AMP コンポーネント同士の連携を行うための API です。基本的には、プレーヤー外部の要素から再生操作を行うことができます。例えば、次のコードは動画を再生します。ここで myPlayer は amp-brightcove プレーヤーの id です。
<button on="tap:myPlayer.play">Play</button>
AMP は動画イベントを信用しないため、動画終了時に処理を行うなどの高度な操作は現時点ではできません。例はこちらで確認できます：http://solutions.brightcove.com/bclifford/ampexamples/bind.html
自動再生（Autoplay）
自動再生を使用する場合、ブラウザ コンソールに警告が表示されることがあります：
この警告は、Brightcove プレーヤー設定内で autoplay オプションを使用している場合に発生します。警告を回避するには、プレーヤー設定内で autoplay を false にするか、設定自体を削除する必要があります。
AMP のルールでは、AMP ページ内のプレーヤーはユーザー操作、または AMP 側で管理される自動再生（amp-brightcove 要素に autoplay を追加して設定）によってのみ再生が開始されるべきとされています。
Brightcove では、自動再生が必要な場合、AMP ページ専用に autoplay 設定を持たないプレーヤーを利用することを推奨しています。