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

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

これは、JavaScript の制限、一般的なコーディング言語の軽量な置き換え、および Google のコンテンツ配信ネットワークでのキャッシュにより、ページの「重み」 (サイズ データ) を下げることによって達成されました。

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

属性

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

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

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

共通属性

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

後退する

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

ハイツ

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

レイアウト

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

メディア

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

無負荷

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

プレースホルダー

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

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

サイズ

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

幅と高さ

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

レイアウト

AMP デベロッパー リソースによると、AMP の <amp-img> 要素と <amp-video> 要素は 6 つのレイアウトのいずれかを持つことができ、それぞれによって要素の動作が異なります。

レスポンシブ

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

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

非表示

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

固有の

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

フレックスアイテム

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

固定高

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

修理済み

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

塗りつぶし

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

容器

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

分析サポート

すべての AMP 動画コンポーネントが、他の動画プレーヤーにある分析機能を備えているわけではありませんが、特定の動画パフォーマンス メトリックを追跡できないわけではありません。 追跡できるものは次のとおりです。

• autoplay:動画が自動再生動画として開始されたかどうかを示します。
• currentTime:トリガー時の現在の再生時間 (秒単位) を指定します。
• 期間:ビデオの合計期間を指定します (秒単位)。
• height:ビデオの高さを指定します (px 単位)。
• id:ビデオ要素の ID を指定します。
• playingTotal:ユーザーがビデオを視聴した合計時間を示します。
• state: 「playing_auto」、「playing_manual」、「paused」のいずれかの状態を示します。
• width:ビデオの幅を指定します (px 単位)。
• playingRangesJson:ユーザーがビデオを視聴した時間のセグメントを表します (JSON 形式)。

一部の AMP 動画コンポーネントでは、これらすべての指標を検出できます。 それ以外の場合は、部分的な分析サポートのみが提供されます。 部分的なサポートとは、 currentTime、aduration、playedRangesJson、およびplayingTotalを除くすべてがサポートされることを意味します。 AMP ビデオ コンポーネント セクションでは、分析サポートのレベルを確認できます。 AMP 動画分析の詳細については、こちらをご覧ください。

AMP 動画コンポーネント

amp ビデオ

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

例

分析サポート:フル

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、nodisplay、responsive

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

amp-3q-プレーヤー

amp-3q-player コンポーネントを使用すると、デベロッパーは 3Q SDN から動画を埋め込むことができます。

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、flex-item、responsive

属性:自動再生 (オプション)、共通属性

amp-ブライトコーブ

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

例

分析サポート:フル

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、nodisplay、responsive

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

amp-dailymotion

amp-dailymotion コンポーネントが Dailymotion プレーヤーの動画を表示するとき。

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: 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 のコメントや投稿も表示できます。

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、nodisplay、responsive

属性: data-href (必須)、data-embed-as、data-align-center、data-locale (オプション)、共通属性

amp-gfycat

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: data-gfyid、幅と高さ、noautoplay、共通属性

amp-hulu

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: data-eid、共通属性

amp-ima-video

amp-ima-video は、インストリーム動画広告用の動画プレーヤーを埋め込みます。 コンポーネントには、data-tag で提供される広告タグが必要です。これは、VAST 準拠の広告応答への URL です (例については、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-イズレセン

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

例

分析サポート: : 部分的

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: data-videoid (必須)、data-param-showrel

amp-kaltura-player

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

例

分析サポート: : 部分的

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、nodisplay、responsive

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

amp-ooyala-player

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、flex-item、responsive

属性: data-embedcode (必須)、data-playerid (必須)、data-pcode (必須)、data-playerversion (オプション)、data-config (オプション)、共通属性

アンプリーチプレーヤー

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

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

アンプスプリングボードプレーヤー

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、flex-item、responsive

属性: date-site-id (必須)、data-mode (必須)、data-content-id (必須)、data-player-id (必須)、data-domain (必須)、data-items (必須)、共通属性

アンプ ビデオ ドッキング

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

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

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

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

• amp-ブライトコーブ
• amp-dailymotion
• アンプ喜びプレーヤー
• amp-ima-video
• amp ビデオ
• 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 を使用する必要があります。

例

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

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、intrinsic、nodisplay、responsive

属性: src (必須)、poster (必須)、autoplay、共通属性、dock、implements-media-session、implements-rotate-to-fullscreen

amp-vimeo

amp-vimeo コンポーネントを使用すると、ユーザーは Vimeo から動画を埋め込むことができます。

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: autoplay、data-videoid (必須)

amp-viqeo-player

amp-viqeo-player は、Viqeo 動画プレーヤーを表示します。

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

属性: autoplay、data-profileid、data-videoid、幅と高さ

amp-wistia-player

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

例

分析のサポート:一部

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

利用可能なレイアウト: fill、fixed、fixed-height、flex-item、responsive

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

amp-youtube

amp-youtube コンポーネントを使用すると、クリエイターは 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、資格情報 (オプション)、共通属性。

結論

AMP Web ページは、メディアの表示に関して制限されなくなりました。 AMP 動画コンポーネントを属性、レイアウト、分析と組み合わせることで、クリエイターは速度を犠牲にすることなく、豊富なビジュアライゼーションを表示できます。 より高速なモバイル ポスト クリック ランディング ページを作成する準備はできていますか?

Instapage AMP を今日から始めましょう (そして完成させましょう)。