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 | 動画タイトルを指定します。 |