外部ビデオを使用する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 参照。