読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-video | AMPでページに動画を埋め込む

f:id:mochizuki_p:20170107174707p:plain

AMPでは直接videoタグを使用することはできません。

代わりにamp-videoタグを利用します。

注意すべき点は1つ

  • amp-videoでは必ず画像の幅と高さを指定する必要がある。

HTMLでのvideoタグは以下のように動画のURLを指定するだけでOKでしたよね。

<video src="https://hoge.com/sample.mp4"></video>

amp-videoは非同期で動画ファイルを取得する。

HTML版のvideoとほぼ同じだが、事前に表示サイズを指定しておく必要がある。

<amp-video  src="https://hoge.com/sample.mp4" width="320" height="320"></amp-video>

注意すべき点は、

幅と高さの単位はピクセル(px) 幅・高さの両方を指定する必要があるという点です。

これは、動画のロードと表示にともなうレイアウトの変更によるレンダリング時間の削減を目指したものです。

通常のHTMLファイルをサーバーから取得した時点では動画のサイズはわかりませんので、一回HTMLファイルをパースしてそこから動画ファイルを別にロードします。そして動画ファイルを読み込んだ時点で初めて動画のサイズは判明するわけですが、その時点ではほかの文章などの配置は完了していて、その中から再びページのレイアウトを計算する必要があるわけです。

この追加の計算コストを削減するのがamp-videoの目的なんですね。

各要素の説明

要素名 説明
width 動画の埋め込み枠の幅 486
height 動画の埋め込み枠の高さ 657
poster 動画のサムネイルを設定 https://hoge.com/image.png
controls この要素があると再生用のコントローラーを表示
autoplay この要素があるとロード完了時に自動再生
loop この要素があると自動ループ