AMP外部ビデオを使用する
概要
アクセラレートモバイルページは、デバイスや配信プラットフォームにわたって一貫して高速で美しく、高いパフォーマンスを発揮するウェブサイトや広告の作成を可能にすることを目的としたGoogleプロジェクトです。「AMP で Brightcove Player を使用できます。プロジェクトには、パブリッシャーが AMP HTML ドキュメント内に Brightcove Player amp-brightcoveを埋め込むことができるコンポーネントが含まれているためです。この例では、amp-brightcoveコンポーネント経由で渡された外部（非ビデオクラウド）ビデオへの URL を受け入れるカスタムプラグインを使用して、カスタムdata-param-video-url属性です。
サンプル
以下は、Brightcove Playerを含む AMP HTML ページのサンプルです。プレーヤーは正常に機能するため、HTML はこのサンプルの興味深い部分です。HTML コードについては、このドキュメントの後半で調べます。
ペンを見るAMP-Brightcoveプレーヤー-外部ビデオ Brightcove Learning Services（ @ rcrooks1969） オンCodePen。
AMPからのリソース
AMP プロジェクトは、amp-brightcoveBrightcove Playerを表示する特別なコンポーネントを開発しました。コンポーネントの詳細については、 amp-brightcove のドキュメントを参照してください。
AMP は、amp-brightcove次のドキュメントの詳細を含む実装例を提供します。
プレーヤーの設定
ブライトコーブは、Brightcove Playerで AMP の使用を強化するためのプラグインを提供しています。このプラグインは、いくつかの高度な機能を有効にする AMP のビデオインターフェイス API のサポートを追加します。
- amp-Analytics との統合 :AMPページドメインに対する第三者分析へのビューの追跡を可能にします。
- アンプバインドとの統合：再生は、AMP ページの他の要素によって制御できます。
プラグインのないプレイヤーは 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行目:1
styleつのタグを追加できますが、amp-custom属性を含める必要があります。 - 26行目線:コードを美化しないでください。定型文CSSは、AMPによって提供されるように必要です。
- 42行目:外部ビデオの URL がここに渡されます。名前は iframe の
srcURL から取得されるため、名前はになりますvideoUrl。 - 43行目線:
data-video-idが存在する必要がありますが、外部ビデオを使用する場合は値は割り当てられません。 - 44行目線:
widthheightおよび属性は、レスポンシブレイアウトに埋め込まれたプレーヤーのアスペクト比を決定します。
<!--
## 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 Player の 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行目:ビデオの有効な URL を取得するには、JavaScript
decodeURIComponent()のメソッドを使用します。 - 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 またはプレーヤー管理 API を使用して、このプラグインをプレーヤーに割り当てます。
特徴
AMP のドキュメントで説明されていますが、ここでは特に重要な機能をいくつか紹介します。
カスタムパラメータ
プラグインにアクセスするために、プレーヤーに追加情報を渡すことができます。これを行うには、に属性を追加します。amp-brightcove名前を付ける必要がある要素data-param-*、 どこ*あなたの財産の名前です。
パラメーターは、キャメル大文字小文字の属性名としてプレーヤーの URL に付加されて渡されます。キーと値は URL エンコードされます。例:
data-param-language="de"becomes&language=dedata-param-ad-vars="key:val;key2:val2"becomes&adVars=key%3Aval%3Bkey2%3Aval2
外部リファラーのサポート
Brightcove Player v6.25.0+ では、iframe での任意のリファラーの設定がサポートされています。AMP コンポーネントは、amp-brightcove referrer="EXTERNAL_REFERRER"埋め込み属性を追加することで、独自のリファラーをプレイヤーに渡すようになりました。
EXTERNAL_REFERRERはAMP独自のマクロです-を参照してくださいhttps://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer詳細については。
AMPアナリティクス
AMP ドキュメントで amp-analyticsコンポーネントを使用して、任意の分析にデータを追跡できます。パブリッシャーがビデオイベントを含める場合は、今すぐ追加できます。
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 です。基本的なレベルでは、それはあなたが再生を制御するプレーヤーの外に何かを持つことができます。たとえば、次のコードはビデオを再生します。Amp-brightcove myPlayeridプレーヤーのはどこにあります。
<button on="tap:myPlayer.play">Play</button>
AMP はビデオイベントを信頼していないため、現在、ビデオエンドでの動作など、より便利な操作を行うことはできません。この例はここにあります： http://solutions.brightcove.com/bclifford/ampexamples/bind.html。