วิดีโอ

เมื่อเพิ่มประสิทธิภาพวิดีโอสำหรับ Core Web Vitals อย่าลืมตั้งค่าแอตทริบิวต์ width และ height ในแท็ก <video> คุณอาจต้องการใช้แอตทริบิวต์ poster ด้วย ทั้งนี้ขึ้นอยู่กับสถานการณ์

• แอตทริบิวต์ width และ height: เพื่อป้องกันไม่ให้เลย์เอาต์เปลี่ยนแปลง ให้ตั้งค่าแอตทริบิวต์ width และ height ในแท็ก <video> ซึ่งจะช่วยให้เบราว์เซอร์กำหนดขนาดของวิดีโอ (และสงวนพื้นที่ในปริมาณที่ถูกต้อง) โดยไม่ต้องรอให้วิดีโอดาวน์โหลด

• แอตทริบิวต์ poster (ไม่บังคับ): แอตทริบิวต์ poster จะระบุรูปภาพที่ควรจะแสดงขณะดาวน์โหลดวิดีโอ หากวิดีโอเป็นองค์ประกอบ LCP ระบบของ LCP จะกำหนดจากเวลาที่ใช้ในการแสดงภาพโปสเตอร์แทนเมื่อโหลดวิดีโอโดยรวม หากไม่ได้ระบุแอตทริบิวต์นี้ เบราว์เซอร์จะรอจนกว่าเฟรมแรกของวิดีโอจะพร้อมใช้งาน แล้วใช้ภาพนี้เป็นภาพโปสเตอร์ ขณะนี้วิดีโอที่ไม่มีแอตทริบิวต์ poster จะไม่ได้รับการพิจารณาสำหรับ Largest Contentful Paint

ในตัวอย่างนี้จะใช้ CSS เพื่อตรวจสอบว่าวิดีโอปรับขนาดให้พอดีกับคอนเทนเนอร์ วิธีนี้ไม่มีผลต่อ Web Vitals แต่เป็นเทคนิคที่มีประโยชน์

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