amp-video

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

HTML5 video タグの代替機能です。

Required Scripts

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

実例

amp-app-banner amp-video Advanced Video Docking Click-to-play overlay for amp-video Integrating Videos in AMP an Overview Rich Media Notifications Video Carousels with amp-carousel Video rotate to fullscreen with hint

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

必須のスクリプト	`<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>`
例	AMP By Example: amp-video サンプル amp-video の Click-to-Play オーバーレイ
サポートされるレイアウト	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>

このスニペットを Playground で開く

分析機能

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

属性

src	子タグとなる `<source>` タグが存在しない場合は必須。HTTPS にする必要があります。
poster	動画の再生を開始する前に表示するフレームの画像。デフォルトでは、最初のフレームが表示されます。 Click-to-Play オーバーレイを表示することもできます。詳細については、下記の Click-to-Play オーバーレイをご覧ください。
autoplay	この属性が存在し、ブラウザが自動再生をサポートしている場合、動画は表示されるとすぐに自動的に再生されます。自動再生を行うには、いくつかのコンポーネント要件を満たす必要があります。詳細については、AMP 内動画に関する仕様をご覧ください。
controls	この属性は、HTML5 `video` の `controls` 属性と似ています。この属性が存在すると、ブラウザに各種コントロールが表示され、ユーザーが動画の再生を制御できるようになります。
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 ルールをご覧ください。

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする

バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする

amp-video 1.0 0.1