1. このページの目的
Web Vitals patterns の GIF-style video を試す。
2. デモ
3. ソースコード
HTML
<video autoplay loop muted playsinline width="320" height="240">
<source src="dog.mp4" type="video/mp4">
</video>
- アニメーションGIFは MP4 に変換して <video> タグで表示すれば、LCP の対象にならないで済む（但しファイルサイズは大きくなる）。
- <video> タグに autoplay loop muted playsinline 属性を指定すれば、アニメーションGIFのような表示にすることができる（下表を参照）。
- width と height 属性を指定して CLS を防ぐことも重要。
| 属性 | 説明 |
|---|---|
| autoplay | 論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。 |
| loop | 論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります。 |
| muted | 論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。 |
| playsinline | 論理属性で、映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、映像を常に全画面で再生するという意味ではないことに注意してください。 |
(引用元：<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN)
4. メモ
- videoタグの動画は LCP の対象にならないので、LCP に対する悪影響は全くない。
- videoタグの width, height 属性を指定しているので、CLS に対する悪影響もない。
- ファーストビュー上にアニメーションGIFがあるなら、MP4に変換した方がよさそう。