AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-video

HTML5 video タグの代替機能です。HTML5 動画ファイルを直接埋め込む場合に限り使用できます。

必須のスクリプト <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
AMP By Example:
サポートされるレイアウト fill、fixed、fixed-height、flex-item、nodisplay、responsive

動作

amp-video コンポーネントは、src 属性によって指定された動画リソースを、ランタイムによって定義された時刻に遅延読み込みします。amp-video コンポーネントは、標準の HTML5 <video> タグと同じように制御することができます。

amp-video コンポーネントは、最大で 4 つのタイプの HTML ノードを子として受け取ります。

  • source タグ: HTML <video> タグと同様、子タグとして <source> タグを追加することで、異なるソース メディア ファイルを指定して再生することができます。
  • track タグ: 動画の字幕を有効にします。ドキュメントとは別のオリジンで字幕トラックがホストされている場合は、<amp-video> タグに crossorigin 属性を追加する必要があります。
  • 動画再生開始前のプレースホルダ。
  • ブラウザが HTML5 動画をサポートしていない場合のフォールバック: 必要に応じて、直接の子ノードの 1 つに fallback 属性を設定することができます。ユーザーのブラウザが HTML5 動画をサポートしていなかった場合、この属性を設定されたノードが存在していれば、このノードとその子が表示コンテンツを形成します。

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Open this snippet in playground

分析機能

amp-video は、簡単に使用できる分析機能を備えています。詳細については、動画分析機能をご覧ください。

属性

src 子タグとなる <source> タグが存在しない場合は必須。HTTPS にする必要があります。
poster 動画の再生を開始する前に表示するフレームの画像。デフォルトでは、最初のフレームが表示されます。
Click-to-Play オーバーレイを表示することもできます。詳細については、下記の Click-to-Play オーバーレイをご覧ください。
autoplay この属性が存在し、ブラウザが自動再生をサポートしている場合、動画は表示されるとすぐに自動的に再生されます。自動再生を行うには、いくつかのコンポーネント要件を満たす必要があります。詳細については、AMP 内動画に関する仕様をご覧ください。
controls この属性は、HTML5 videocontrols 属性と似ています。この属性が存在すると、ブラウザに各種コントロールが表示され、ユーザーが動画の再生を制御できるようになります。
controlsList HTML5 video 要素の controlsList 属性と同じです。特定のブラウザでのみサポートされます。詳細については、https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/controlsList をご覧ください。
dock amp-video-docking 拡張機能が必要です。 この属性が存在していて、動画を手動で再生している場合、ユーザーが動画コンポーネントの表示領域からスクロール アウトすると、動画は「最小化」され、角または要素に固定されます。詳細については、ドッキング拡張機能のドキュメントをご覧ください。
loop この属性が存在している場合、動画は最後に到達すると自動的に最初に戻ってもう一度再生を開始します。
crossorigin ドキュメントとは別のオリジンで track リソースがホストされている場合は必須。
disableremoteplayback メディア要素がリモート再生 UI(Chromecast や AirPlay など)を使用することを許可するかどうかを指定します。
muted(サポート終了) muted 属性はサポートが終了しており、今後は影響を持ちません。autoplay 属性は、ミュート動作を自動的に制御します。
noaudio 動画に音声がないことを示すアノテーションを付けます。この属性が存在すると、通常であれば動画の自動再生時に表示されるイコライザー アイコンが非表示になります。
rotate-to-fullscreen 動画が表示されている場合、ユーザーがデバイスを横向きに回転すると、動画が全画面表示されます。詳細については、AMP 内動画に関する仕様をご覧ください。
共通の属性 この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。

Media Session API の属性

amp-video コンポーネントは、Media Session API を実装しています。そのため、デベロッパーは、動画ファイルに関する詳細情報を指定することができます。動画の追加情報は、再生 / 一時停止コントロールと一緒にデバイスの通知センター内に表示されます。

artwork 動画のアートワークとして使用する PNG / JPG / ICO 画像の URL を指定します。artwork が存在しない場合、Media Session API ヘルパーは、schema.org 定義の image フィールドか、og:image、ウェブサイトの favicon のいずれかを使用します。
artist 動画ファイルの作成者を示します。文字列で指定します。
album 動画が属しているアルバム / コレクションを示します。文字列で指定します。
title 動画の名前 / タイトルを示します。文字列で指定します。この属性が存在しない場合、Media Session API ヘルパーは、aria-label 属性を使用するか、代替的にページタイトルを使用します。

例:

以下の例では、poster 属性と artwork 属性の両方が含まれています。poster は、動画再生前のプレースホルダ画像として機能します。他方、artwork は、MediaSession API 経由で通知内に表示される画像です。

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

Click-to-Play オーバーレイ

ウェブ上の動画プレーヤーで広く利用されている UX 機能として、Click-to-Play オーバーレイがあります。たとえば、ユーザーがクリックできるカスタム再生アイコンや、動画のタイトル、サイズの異なるポスター画像などを表示することができます。amp-video コンポーネントは、標準の play AMP アクションをサポートしているため、Click-to-Play を簡単に実装できます。

詳細な例については、AMP By Example の amp-video 用 Click-to-Play オーバーレイをご覧ください。

検証

AMP 検証ツール仕様の amp-video ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub