影片

為影片體驗核心指標最佳化影片時，請務必在 <video> 標記上設定 width 和 height 屬性。視情況而定，您可能也需要使用 poster 屬性。

  • width 和 height 屬性：如要避免版面配置位移，請在 <video> 標記上設定 width 和 height 屬性。如此一來，瀏覽器就能判斷影片的尺寸 (並保留正確的空間大小)，不必等待影片下載。

  • poster 屬性 (選用)：poster 屬性會指定影片下載時應顯示的圖片。如果影片是 LCP 元素，LCP 取決於海報圖片轉譯時間，而非整體影片載入的時間。如未指定這項屬性，瀏覽器會等到影片的第一個影格可供使用，再用它做為海報圖片；沒有 poster 屬性的影片目前不會考慮大型內容繪製。

在此範例中，CSS 會使用 CSS 確保影片依照容器調整大小。這不會影響網站體驗指標，但具有實用技巧。

HTML

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

CSS


        video {
    max-width: 100%;
    height: auto;
}