amp-video

HTML5 videoタグの代わり。直接HTML5ビデオファイルの埋め込みにのみ使用することができます。

プラグインの読み込み

amp-videoを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを簡単に。

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

各種プロパティについて

src	動画パスを指定します。 sourceタグで複数指定しない場合は必須です。
poster	動画再生前のサムネイル画像を指定します。
autoplay	そのままautoplayの設定(ただしブラウザがサポートしている場合のみ) 自動再生が開始される前に動画が自動的にミュートされますビデオが表示外にスクロールされると、ビデオは一時停止されますビデオがビューにスクロールされると、ビデオは再生を再開するユーザがビデオをタップすると、ビデオはミュートされないユーザがビデオとやりとりした場合（例えば、ミュート/ミュート解除、一時停止/再開など）、ビデオがスクロールまたはスクロールされた場合、ビデオの状態は、ユーザが放置したままである。たとえば、ユーザーがビデオを一時停止してからビデオをスクロールしてビデオに戻すと、ビデオは一時停止します。
controls	動画コントローラーの表示を行います。
loop	ループ再生をONにします。
crossorigin	trackリソースがドキュメントと異なる原点でホストされている場合は必須です。

メディアセッションAPI属性

artwork	ビデオのアートワークとして使用されるPNG / JPG / ICOイメージへのURLを指定します。
artist	ビデオファイルの作成者を指定します。
album	ビデオが撮影されたアルバム/コレクションを指定します。
title	動画タイトルを指定します。