使用和 MP4 作为 div 背景并在 window 调整大小时填充 space

Question

我试过使用标签，但是当 window 调整大小时，我需要视频来填充 space，因为 window 调整了大小时。在最大比例下，它会填充 space，随着缩小，它开始在顶部和底部添加大量白色 space。

HTML

<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style="">
    <source src="images/user_item.mp4" type="video/mp4">
</video>

CSS

video { 
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 300px;
    border-radius: 5px 0 0 5px;
}

是否可以在 canvas 中播放视频并调整 canvas 的大小并让它填满提供的整个 space？

Answer 1

无需 canvas，只需使用 CSS。特别是这里你想要 object-fit 属性.

默认情况下，视频设置为 contains，这意味着它会将媒体的大小设置为最小的一侧，并在最大的一侧添加边框，从而保持媒体的纵横比。

从你的描述来看，你是否想要 cover 保持宽高比但切割媒体，

video { 
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    object-fit: cover;
}

<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>

或fill，这只是stretches/shrinkes媒体。

video { 
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    object-fit: fill;
}

<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>

对于未来的读者，请注意这个 CSS 属性也可以设置为

使用和 MP4 作为 div 背景并在 window 调整大小时填充 space

Using and MP4 as a div background and fill the space as the window is resized

html

mp4

canvas