為影片體驗核心指標最佳化影片時,請務必在 <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;
}