视频

在针对核心网页指标优化视频时，请务必在 <video> 标记上设置 width 和 height 属性。您可能还需要使用 poster 属性，具体取决于具体情况。

• width 和 height 属性：为防止布局偏移，请在 <video> 标记上设置 width 和 height 属性。这样，浏览器就可以确定视频的尺寸（并预留适当的空间大小），而无需等待视频下载。

• poster 属性（可选）：poster 属性用于指定在视频下载过程中应显示的图片。如果视频是 LCP 元素，则 LCP 取决于海报图片的呈现时间，而不是整个视频的加载时间。如果未指定此属性，浏览器会等到视频的第一帧可用时再将其用作海报图片；没有 poster 属性的视频目前不会考虑使用 Largest Contentful Paint。

在此示例中，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;
}