对象适配不影响 Edge 浏览器中的视频

Question

我正在使用object-fit:cover在我的网站上播放背景视频（向下滚动）。Firefox 和 Chrome 正确显示它，但 Edge 没有 - 尽管它支持该object-fit属性。

.sec-content > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.bg-video {
    position: absolute;
    z-index:4; 
    left: 0;
    top: 0;
    width: calc(50% + 400px);
    height: 100%;
}
.bg-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    box-sizing: border-box;
}

<div class="bgg-2 bg-video">
    <video autoplay="autoplay" muted="muted" playsinline="" loop="loop" poster="/images/2.jpg" class="scroll-video">
        <source src="/files/video-test.mp4" type="video/mp4">
    </video>
</div>

为什么 Edge 没有像应该的那样显示它？

Answer 1

是的，我以前遇到过这个问题。Microsoft Edge 无法object-fit: cover识别 HTML5 视频标签。

好消息：新的基于 Chromium 的 Edge 版本（仍处于测试阶段）修复了这个错误。同时，如果你需要支持这个浏览器，你可以使用这个老式的 CSS hack。

.bg-video > video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}