视频
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在针对核心网页指标优化视频时,请务必在 <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;
}
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-03-13。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]