html中video标签的poster属性如何铺满video标签？

王铁柱666

于 2025-01-15 08:14:12 发布

阅读量761

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_87873725/article/details/145151984

版权

在HTML中，<video> 标签的 poster 属性用于指定视频加载时显示的封面图片。默认情况下，封面图片会按照其原始比例显示在 <video> 标签中，可能不会完全铺满整个 <video> 区域。

要使 poster 图片完全铺满 <video> 标签，你可以使用CSS样式来实现。以下是一种常见的方法：

设置 <video> 标签的宽度和高度：首先，确保你已经为 <video> 标签设置了明确的宽度和高度。这可以通过在HTML中直接设置 width 和 height 属性，或者使用CSS来实现。
使用CSS的 object-fit 属性：object-fit 属性定义了替换元素的内容应该如何适应到其使用的高度和宽度确定的框中。你可以将 object-fit 设置为 cover，这将使封面图片完全覆盖 <video> 标签的区域，同时保持其宽高比。如果图片比 <video> 区域大，它将被裁剪以适应该区域。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Poster Example</title>
    <style>
        video {
            width: 100%; /* 设置视频宽度为100%，可以根据需要调整 */
            height: auto; /* 高度自动，以保持宽高比 */
            /* 或者你可以设置具体的宽度和高度，例如： */
            /* width: 640px; */
            /* height: 360px; */
            object-fit: cover; /* 使封面图片完全覆盖视频区域 */
        }
    </style>
</head>
<body>
    <video controls poster="path/to/your/poster.jpg">
        <source src="path/to/your/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>