Video

Khi tối ưu hoá video cho Các chỉ số quan trọng về trang web, hãy nhớ đặt các thuộc tính width và height trên thẻ <video>. Tuỳ thuộc vào tình huống, bạn cũng nên sử dụng thuộc tính poster.

• Thuộc tính width và height: Để ngăn bố cục thay đổi, hãy đặt thuộc tính width và height trên thẻ <video>. Điều này cho phép trình duyệt xác định kích thước của video (và đặt trước đúng lượng dung lượng) mà không phải đợi tải video xuống.

• Thuộc tính poster (không bắt buộc): Thuộc tính poster chỉ định hình ảnh sẽ hiển thị khi video đang tải xuống. Nếu một video là phần tử LCP, thì LCP sẽ được xác định theo thời điểm hiển thị hình ảnh áp phích, chứ không phải thời điểm toàn bộ video tải. Nếu thuộc tính này không được chỉ định, trình duyệt sẽ đợi cho đến khi có khung hình đầu tiên của video rồi sử dụng thuộc tính này làm hình ảnh áp phích; những video không có thuộc tính poster hiện không được xem là Thời gian hiển thị nội dung lớn nhất.

Trong ví dụ này, CSS được dùng để đảm bảo video đổi kích thước cho vừa với vùng chứa của video. Phương pháp này không ảnh hưởng đến Các chỉ số quan trọng về trang web nhưng là một kỹ thuật hữu ích.

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;
}