时间戳

首页 > 解决方案 > 对象适合不影响边缘浏览器中的视频

html - 对象适合不影响边缘浏览器中的视频

问题描述

我用来在我的网站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 没有像应有的那样显示它？

标签： htmlcssmicrosoft-edgeobject-fit

解决方案

是的，我以前遇到过这个问题。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%);
}

推荐阅读