1. このページの目的
Web Vitals patterns の Video を試す。
2. デモ
引用元：Video
3. ソースコード
HTML
<video controls width="960" height="540" poster="flower-960-poster.png">
<source src="flower-960.mp4" type="video/mp4">
</video>
- videoタグの width, height 属性で大きさを指定することが重要である。今回の CSSの記述はオプション。
poster属性を使って、動画ダウンロード中に表示する画像を指定する(ポスター画像)。こちらの指定もオプション。
CSS
video {
max-width: 100%;
height: auto;
}
- この記述は必須ではない。
4. メモ
- video要素の動画自体はLCPの対象にはならないが、poster属性に指定した画像はLCPの対象になりえる。（参考：Largest Contentful Paint (LCP)）
- そのため、ページの構成にもよるが、ポスター画像をなくせば LCPの評価は高くなる。但し、見た目はよくない。サイズの大きな動画ファイルの場合に、ポスター画像がより効果を発揮するのだと思う。今回の例の動画サイズは小さいので、ポスター画像を指定する意味はあまりないだろう。