デジタル広告主がAMPビデオと属性について知っておくべきことすべて

公開: 2019-05-28

クイックリンク
  1. 属性
  2. 共通の属性
  3. レイアウト
  4. 分析サポート
  5. AMPビデオコンポーネント
  6. 結論

今日、数百万のドメインがAccelerated MobilePagesフレームワークを使用して数十億のインスタント読み込みページを公開しています。 数年前に開始されたこのプロジェクトは、Webページの読み込み時間だけでなく、ユーザーエクスペリエンスを向上させ、その結果、ビジネスのROIを向上させることに成功しました。

これは、JavaScriptの制限、一般的なコーディング言語の軽量な置き換え、Googleのコンテンツ配信ネットワークでのキャッシュを使用して、ページの「重み」（サイズデータ）を下げることで実現されています。

しかし、プロジェクトの最大の批判は、エンゲージメントとスピードを交換したことでした。 それはかつては真実でしたが— AMPは主に静的コンテンツのニュースサイトで使用されていました—現在はそうではありません。 これで、AMPを使用して、ビデオなどの重いページ要素の高速バージョンを備えたWebサイト全体を構築できます。 今日は、特定のコーディング用語の定義、分析機能、レイアウトなどに至るまで、これらのAMPビデオコンポーネントがどのように機能するかを正確に概説します。

属性

各AMPビデオコンポーネントには、一連の属性が付属しています。 オーバーラップするものもあれば、コンポーネントに固有のものもあり、それぞれがビデオの動作や表示方法の側面を制御します。

以下は、コンポーネントの中にある属性とその意味のリストです。 このリストは包括的ではありません。 コンポーネントをページに追加する前に、コンポーネントの専用AMP開発者ページを再確認することをお勧めします。

  • src： <source>が指定されていない場合、この要素は必須です。 HTTPSで指定する必要があります。
  • ポスター：これは、視聴者が「再生」をクリックする前に表示される画像のサムネイルを指定します。 デフォルトでは、最初のフレームが表示されます。 クリックして再生するオーバーレイを表示することもできます。
  • 自動再生：ブラウザが自動再生をサポートしている場合、この属性を使用して、訪問者の視界に入るとすぐにビデオを自動再生できます。
  • コントロール：この属性を使用すると、ブラウザーは、ユーザーがビデオプレーヤーを制御できるコントロールを提供します。
  • ControlsList：一部のブラウザーでのみサポートされているcontrolsListを使用すると、ユーザーは再生の調整に使用できるコントロールを表示できます。
  • dock： amp-video-docking拡張機能と組み合わせると、この属性は、ユーザーがその領域からスクロールしたときに、ビデオプレーヤーを最小化してコーナーに固定します。
  • ループ：実装されている場合、ビデオは最後に達すると自動的に最初にループバックします。
  • crossorigin：この要素は、ビデオがオリジンドキュメント以外の場所でホストされている場合に必要です。
  • disableremoteplayback：この要素を使用して、ChromecastやAirPlayなどのシステムを介したリモート再生を無効にします。
  • noaudio：この属性は、ビデオのオーディオを無効にします。
  • 全画面表示に回転：この属性が有効になっている場合、ユーザーがデバイスを回転させると、ビデオは全画面表示に調整されます。

共通の属性

一般的な属性は、多くのAMPコンポーネントに適用される属性です。 AMPビデオコンポーネントのリストで、「共通の属性」への参照が表示されている場合、それは以下をそれらと一緒に使用できることを意味します。

後退する

フォールバックを使用すると、ブラウザは要素をサポートしていない場合、または読み込みに失敗した場合にビューアと通信します。 以下の例では、エラーメッセージは「このデバイスではアニメーション画像を再生できません」と表示されます。 フォールバックは、フォールバックをサポートするすべてのAMP要素で使用でき、サポートされていない要素の代わりに表示されます。

AMPビデオフォールバック属性

ハイツ

要素がレスポンシブレイアウトをサポートしている場合、高さ属性もサポートします。 高さ属性はメディア式に基づいて指定され、高さにのみ適用されます。 パーセント値が許可されます。 以下の例のように、高さが80％の場合、要素の高さは幅の80％になります。

AMPビデオの高さ属性

レイアウト

layout属性は、要素の動作を指定します。 要素でサポートされているレイアウト値の1つを使用してlayout属性を追加することにより、コンポーネントのレイアウトを指定できます（これらについては後で詳しく説明します）。

AMPビデオレイアウト属性

メディア

ほとんどのAMP要素はメディア属性をサポートしています。 メディアの価値はメディアクエリです。 クエリが一致しない場合、要素はレンダリングされず、そのリソースと、場合によってはその子リソースはフェッチされません。 ブラウザウィンドウのサイズまたは方向が変更されると、メディアクエリが再評価され、新しい結果に基づいて要素が非表示および表示されます。

AMPビデオメディア属性

ノーロード

それらがロードされると、多くのAMP要素は基本的なロードアニメーションを表示します。これは、要素が表示のために処理されていることを示します。 noloading属性は、そのアニメーションを表示するかどうかを制御します。

AMPビデオの読み込み属性

プレースホルダー

placeholder属性でマークされた要素は、その親要素のプレースホルダーを表示します。 以下の例では、プレビュー画像がアニメーションGIFのプレースホルダーとして表示されています。 この属性は、プレースホルダーをサポートするAMP要素の子である任意のHTML要素で使用できます。

デフォルトでは、プレースホルダーは親の場所にすぐに表示されます。 リソースが提供されると、プレースホルダーは非表示になり、その場所にリソースが表示されます。

AMPビデオプレースホルダー属性

サイズ

AMP要素がレスポンシブレイアウトをサポートしている場合は、sizes属性もサポートしています。 この属性は、現在のユーザーのウィンドウサイズに基づいてメディアクエリによって定義されます。

AMPビデオサイズ属性

幅と高さ

特定のレイアウトでは、一部のAMPコンポーネントに対して、ピクセル値を含む幅と高さの属性を指定する必要があります。

AMPビデオ幅高さ属性

レイアウト

AMP開発者のリソースによると、AMPの<amp-img>要素と<amp-video>要素は6つのレイアウトのいずれかを持つことができ、それぞれが要素の動作を変えます。

レスポンシブ

要素がレスポンシブになると、指定された領域のスペースに合わせて自動的にサイズが変更されます。 使用可能なスペースは、親要素によって異なります。

ただし、要素を単にレスポンシブとして指定することはできません。 確実に表示するには、含む要素の幅と高さを指定する必要があります。

表示なし

このレイアウトでは、要素は表示されません。 画面上のスペースをまったく占有しません。 これは任意のAMP要素に適用でき、ポップアップを有効にするためにホバーするなど、ユーザーアクションで要素を表示できることを前提としています。

本質的

このレイアウトでは、要素は使用可能なスペースを消費し、幅と高さの属性に基づいて、自然なサイズまたはmax-widthなどのCSS制約に達するまで高さのサイズを変更します。
その使用可能なスペースは、親要素によって異なります。

フレックスアイテム

このレイアウトでは、親の要素は、「display：flex」のように柔軟なコンテナである場合、その親の残りのスペースを消費します。

固定高さ

固定高さとして指定された要素は、使用可能なスペースに合わせて調整されますが、高さは一定のままです。 この場合、height属性が存在する必要があり、width属性が存在してはなりません（存在する場合はゼロに等しくなります）。

修理済み

固定要素の高さと幅は固定されており、応答性はサポートされていません。 このレイアウトを有効にするには、幅と高さの両方を指定する必要があります。

塗りつぶし

このレイアウトでは、要素は使用可能なすべての高さと幅を埋めます。 親コンテナが「position：relative」または「position：absolute」を指定している限り、親要素の高さと幅に一致します。

容器

HTML divと同様に、このレイアウトでは要素の子でサイズを定義できます。 コンテナの場合、コンポーネントはコンテナとしてのみ機能し、特定のレイアウト自体はありません。 その子は即座にレンダリングされます。

分析サポート

すべてのAMPビデオコンポーネントが他のビデオプレーヤーが持っている分析機能を持っているとは限りませんが、それはあなたが非常に特定のビデオパフォーマンスメトリクスを追跡できないという意味ではありません。 追跡できるものは次のとおりです。

  • 自動再生：ビデオが自動再生ビデオとして開始されたかどうかを示します。
  • currentTime：トリガー時の現在の再生時間（秒単位）を指定します。
  • 継続時間：ビデオの合計継続時間を指定します（秒単位）。
  • height：ビデオの高さをピクセル単位で指定します。
  • id：ビデオ要素のIDを指定します。
  • playingTotal：ユーザーがビデオを視聴した合計時間を指定します。
  • state：状態を示します。状態は、「playing_auto」、「playing_manual」、または「paused」のいずれかになります。
  • width：ビデオの幅をピクセル単位で指定します。
  • PlayedRangesJson：ユーザーがビデオを視聴した時間のセグメントを表します（JSON形式）。

一部のAMPビデオコンポーネントでは、これらすべてのメトリックを検出できます。 他の人にとっては、部分的な分析サポートしかありません。 すべてCURRENTTIMEを除き、adurationは、playedRangesJson、およびplayedTotalがサポートされている部分的な支持手段。 AMPビデオコンポーネントセクションには、分析サポートのレベルがあります。 AMPビデオ分析の詳細については、こちらをご覧ください。

AMPビデオコンポーネント

アンプビデオ

amp-videoコンポーネントは、HTML5ビデオタグの代わりになります。 HTML5ビデオファイルの直接埋め込みにのみ使用されます。 amp-videoコンポーネントは、ランタイムによって決定された時間に、src属性で指定されたビデオリソースを遅延ロードします。 amp-videoコンポーネントは、標準のHTML5 <video>タグとほぼ同じ方法で制御できます。

例

AMPビデオコンポーネント

分析サポート：完全

必要なスクリプト： <script async custom-element =” amp-video” src =” https://cdn.ampproject.org/v0/amp-video-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、表示なし、レスポンシブ

属性： src、poster、autoplay、controls、controlsList、dock、loop、crossorigin、disableremoteplayback、noaudio、rotate-to-fullscreen、共通属性

amp-3q-player

amp-3q-playerコンポーネントを使用すると、開発者は3QSDNからビデオを埋め込むことができます。

例

AMPメディア3qプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-3q-player” src =” https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、フレックスアイテム、レスポンシブ

属性：自動再生（オプション）、共通属性

アンプ-ブライトコーブ

amp-brightcoveコンポーネントは、BrightcoveのVideoCloudまたはBrightcovePlayerに見られるようにビデオプレーヤーを埋め込みます。

例

AMPメディアBrightcove

分析サポート：完全

必要なスクリプト： <script async custom-element =” amp-brightcove” src =” https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、表示なし、レスポンシブ

属性： data-account、data-playerまたはdata-player-id、data-embed、data-video-id、data-playlist-id、data-referrer、data-param-

amp-dailymotion

amp-dailymotionコンポーネントがDailymotionプレーヤーからのビデオを表示するとき。

例

AMPメディアDailymotion

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-dailymotion” src =” https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： autoplay、data-videoid（必須）、data-mute（オプション）、data-endscreen-enable（オプション）、data-sharing-enable（オプション）、data-start（オプション）、data-ui-highlight（オプション） ）、data-ui-logo（オプション）、data-info（オプション）、data-param- *（オプション）、dock、共通属性

amp-facebook

amp-facebookコンポーネントは、このリストにある多くのタグよりも少し汎用性があります。 ビデオに加えて、amp-facebookタグはFacebookのコメントや投稿も表示できます。

例

AMPメディアFacebook

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-facebook” src =” https://cdn.ampproject.org/v0/amp-facebook-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、表示なし、レスポンシブ

属性： data-href（必須）、data-embed-as、data-align-center、data-locale（オプション）、共通属性

amp-gfycat

amp-gfycatコンポーネントは、gfycat.comからのGIFを表示します。

例

AMPメディアGfycat

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-gfycat” src =” https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： data-gfyid、幅と高さ、自動再生なし、共通属性

amp-hulu

amp-huluコンポーネントは、Huluからのビデオを埋め込みます。

例

AMPメディアHulu

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-hulu” src =” https://cdn.ampproject.org/v0/amp-hulu-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： data-eid、共通属性

amp-ima-video

amp-ima-videoには、インストリーム動画広告用の動画プレーヤーが組み込まれています。 コンポーネントには、VAST準拠の広告応答へのURLであるdata-tagで提供される広告タグが必要です（たとえば、IMAサンプルタグを参照してください）。

例

AMPメディアimaビデオ

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-ima-video” src =” https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”> </ script>

利用可能なレイアウト：固定、レスポンシブ

属性： data-tag（必須）、data-src、data-crossorigin、data-poster（オプション）、data-delay-ad-request（オプション）、data-ad-label（オプション）、dock、共通属性

amp-izlesene

amp-izleseneコンポーネントを使用すると、ユーザーはIzleseneビデオを埋め込むことができます。

例

AMPメディアIzlesene

分析サポート::部分的

必要なスクリプト： <script async custom-element =” amp-izlesene” src =” https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： data-videoid（必須）、data-param-showrel

amp-kaltura-player

amp-kaltura-playerコンポーネントを使用すると、ユーザーはKaltura VideoPlatformプレーヤーを使用してビデオを埋め込むことができます。

例

AMPメディアKalturaプレーヤー

分析サポート::部分的

必要なスクリプト： <script async custom-element =” amp-kaltura-player” src =” https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、表示なし、レスポンシブ

属性： data-partner、data-uiconf、data-entryid、data-param- *、共通属性。

amp-ooyala-player

amp-ooyala-playerを使用すると、ユーザーはOoyalaビデオを埋め込むことができます。

例

AMPメディアOoyalaプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-ooyala-player” src =” https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、フレックスアイテム、レスポンシブ

属性： data-embedcode（必須）、data-playerid（必須）、data-pcode（必須）、data-playerversion（オプション）、data-config（オプション）、共通属性

amp-reach-player

amp-reach-playerコンポーネントを使用すると、ユーザーはBeachfrontReachプラットフォームにあるReachPlayerを埋め込むことができます。

例

AMPメディアリーチプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-reach-player” src =” https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： data-embed-id、共通属性

amp-springboard-player

amp-springboard-playerは、Springboardで使用されているプレーヤーを表示します。

例

AMPメディアSpringboardプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-springboard-player” src =” https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、フレックスアイテム、レスポンシブ

属性： date-site-id（必須）、data-mode（必須）、data-content-id（必須）、data-player-id（必須）、data-domain（必須）、data-items（必須）、共通の属性

amp-video-docking

amp-video-docking拡張機能を使用すると、ビデオをページの隅またはカスタム配置された要素に最小化できますが、ビデオが手動で再生されている場合に限ります。 ユーザーがビデオコンポーネントの領域からスクロールアウトすると、ビデオは最小化され、指定された場所に移動します。 ユーザーが後ろにスクロールすると、元の位置に戻ります。 さらに…

  • ビデオは、デフォルトのコーナーまたはカスタムの固定位置にドッキングできます。
  • ビデオは、ユーザーが別のコーナーにドラッグして再配置できます。
  • ビデオをフリックして、ドッキング位置から閉じることができます。
  • 同じページ上の複数のビデオをドッキングできますが、ドッキングして修正できるのは一度に1つだけです。

デフォルトでは、ビデオは右上隅に最小化されます。 ビューポートの幅の30％で、幅は180ピクセル以上です。 ドキュメントがRTLの場合、ビデオは左上隅にドッキングします。 このモードでは、ユーザーはドッキングされたビデオをドラッグしていずれかのコーナーにスナップできます。

この拡張機能は、サポートされているビデオプレーヤーでのみ使用できます。 現在、サポートされているプレーヤーは次のとおりです。

  • アンプ-ブライトコーブ
  • amp-dailymotion
  • amp-delight-player
  • amp-ima-video
  • アンプビデオ
  • amp-video-iframe
  • amp-youtube

繰り返しますが、ビデオは手動で再生している場合にのみドッキングされます。 これの意味は：

  • ビデオに自動再生がある場合、ユーザーが最初にビデオをクリックしない限り、この機能はトリガーされません。
  • ビデオに自動再生がない場合、ユーザーがビデオを再生しない限り、この機能はトリガーされません。
  • スクロール中にビデオが一時停止すると、ドッキングされません。

必要なスクリプト： <script async custom-element =” amp-video-docking” src =” https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”> </ script>

amp-video-iframe

amp-video-iframeは、ビデオプレーヤーを含むiframeを表示します。 このコンポーネントは、広告を表示することを主な目的として使用してはなりません。 動画の一部が宣伝されている動画を表示する目的でamp-video-iframeを使用しても問題ありません。 ただし、広告のユースケースでは、代わりにamp-adを使用する必要があります。

例

ビデオ統合が機能するには、フレーム内にあるドキュメントに小さなライブラリが含まれている必要があります。

AMPビデオiframe

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-vimeo” src =” https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、組み込み、表示なし、レスポンシブ

属性： src（必須）、poster（必須）、自動再生、共通属性、ドック、implements-media-session、implements-rotate-to-fullscreen

amp-vimeo

amp-vimeoコンポーネントを使用すると、ユーザーはVimeoのビデオを埋め込むことができます。

例

AMPメディアVimeoプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-vimeo” src =” https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性：自動再生、データ-ビデオID（必須）

amp-viqeo-player

amp-viqeo-playerは、Viqeoビデオプレーヤーを表示します。

例

AMPメディアViqeoプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-viqeo-player” src =” https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性：自動再生、データプロファイルID、データビデオID、幅と高さ

amp-wistia-player

amp-wistia-playerコンポーネントを使用すると、ユーザーは埋め込むことができます。

例

AMPメディアWistiaプレーヤー

分析サポート：部分的

必要なスクリプト： <script async custom-element =” amp-wistia-player” src =” https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”> </ script>

利用可能なレイアウト：塗りつぶし、固定、固定高さ、フレックスアイテム、レスポンシブ

属性： data-media-hashed-id、共通属性

amp-youtube

amp-youtubeコンポーネントを使用すると、クリエイターはYouTube動画を埋め込むことができます。

例

AMP YouTube

必要なスクリプト： <script async custom-element =” amp-youtube” src =” https://cdn.ampproject.org/v0/amp-youtube-0.1.js”> </ script>

属性： autoplay、data-videoid、data-live-channelid、data-param- *、dock、credentials（オプション）、共通属性。

結論

メディアの表示に関しては、AMPWebページが制限されなくなりました。 属性、レイアウト、分析と組み合わせることで、AMPビデオコンポーネントは、作成者が速度を犠牲にすることなく豊富な視覚化を表示することを可能にします。 より高速なモバイルポストクリックランディングページを作成する準備はできていますか？

Instapage AMPを今すぐ始めましょう（そして終了します）。