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

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%);
}

Answer 2

object-fit已在 Edge 16 中发布，但我认为这似乎是边缘错误。

尝试这个：

.bg-video video {
position: absolute;
top: 0;
left: 0;
width: auto; // changed from 100%
height: 100%;
-o-object-fit: cover;
object-fit: cover;
box-sizing: border-box;
}

Answer 3

您可以在您的网站上使用fitvids.js 。它是一个可能的 jQuery 解决方案。

<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>