AMP ビデオクラウドビデオを使用する
概要
アクセラレートモバイルページは、デバイスや配信プラットフォームにわたって一貫して高速で美しく、高いパフォーマンスを発揮するウェブサイトや広告の作成を可能にすることを目的としたGoogleプロジェクトです。「プロジェクトには、パブリッシャーが AMP HTML amp-brightcove
ドキュメント内にBrightcove Playerを埋め込むことができるコンポーネントが含まれているため、AMP で Brightcove Player を使用できます。
サンプル
以下は、Brightcove Playerを含む AMP HTML ページのサンプルです。プレーヤーは正常に機能するため、HTML はこのサンプルの興味深い部分です。HTML コードについては、このドキュメントの後半で調べます。
ペンを見るAMPの例 Brightcove Learning Services( @ rcrooks1969) オンCodePen。
プレーヤーの設定
ブライトコーブは、Brightcove Playerで AMP の使用を強化するためにロードするプラグインを提供しています。このプラグインは、AMP ドキュメント内でプレーヤーを制御するために AMP に必要な AMP のビデオインターフェイス API のサポートを追加します。また、 いくつかの高度な機能も有効になります。
- AMP分析との統合:AMPページドメインに対する第三者分析へのビューの追跡を可能にします。
- アンプバインドとの統合:再生は、AMP ページの他の要素によって制御できます。
プラグインのないプレイヤーは、AMP ドキュメントで期待どおりに動作しない可能性があります。
プラグインのインストール
すべての Brightcove Player プラグインと同様に、プラグインの名前とプラグインの JavaScript への URL が必要です (このプラグインを使用するために CSS ファイルは必要ありません)。
プラグイン名
ampSupport
JavaScriptのURL
//players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js
AMP プラグインを実装するには、プラグインの関数名と URL をプラグインの JavaScript に追加します。
- スタジオで、プレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- 次に、3 つのオプションから [ プラグイン ] をクリックします。
- [ プラグインの追加 ] から [ カスタムプラグイン ] を選択します。
- [ プラグイン名 ] に、と入力します
ampSupport
。 - JavaScriptの URL には、次のように入力します。
//players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js
- このプラグインの CSS またはオプションを入力する必要はありません。
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
AMPからのリソース
AMP プロジェクトは、amp-brightcove
Brightcove Playerを表示する特別なコンポーネントを開発しました。コンポーネントの詳細については、 amp-brightcove のドキュメントを参照してください。
AMPでは、amp-brightcove
以下のドキュメントに詳細が記載された実装例を提供しています。
コード審査
上記のCodePenサンプルのコードを以下に示します。コードの完全な説明は、上記にリンクされている文書で、AMPによって提供されています。次のリストには、注意すべきいくつかのトリック/トラップを示します。
- 20行目です:コードを美化しないでください。定型文CSSは、AMPによって提供されるように必要です。
- 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"
becomes&language=de
data-param-ad-vars="key:val;key2:val2"
becomes&adVars=key%3Aval%3Bkey2%3Aval2
ドック (ピクチャーインピクチャ)
dock
属性はプレイヤーがビューの外にスクロールされたときにプレイヤーを「ドッキング」します。プレーヤーは小さくなり、ウェブページの右上付近に移動します。HTML 標準では、この機能を Picture-in-picture と呼んでいます。ドッキングしたプレイヤーのスクリーンショットは次のとおりです。
この機能を実装するには、次の操作を行う必要があります。
- 次のコードスニペットの 2 行目に示すように、ドック機能のコードを含むスクリプトを含めます。
- 13 行目に示すように、
dock
<amp-brightcove>
タグに属性を追加します。
...
<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>
...
外部リファラーのサポート
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 myPlayer
id
プレーヤーのはどこにあります。
<button on="tap:myPlayer.play">Play</button>
AMP はビデオイベントを信頼していないため、現在、ビデオエンドでの動作など、より便利な操作を行うことはできません。その例はこちらにあります: http://solutions.brightcove.com/bclifford/ampexamples/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>
1 style
つのタグを追加できますが、amp-custom
属性を含める必要があります。
ボットのエラー抑制
AMP をサポートしていないボットが AMP ビデオプレーヤーを含むページを閲覧すると、エラービデオエラーが生成されます。これはSEOランキングを傷つける可能性があります。Brightcove Player の JSON 設定で、suppressNotSupportedError
このオプションを使用すると、この発生を停止できます。これらの偽エラーを抑制するには、以下を追加します。
"suppress_not_supported_error": true