如何检查视频是否支持对象拟合答案

【问题标题】：How do I check if object fit is supported for video如何检查视频是否支持对象拟合
【发布时间】：2018-10-05 05:19:09
【问题描述】：

我使用视频作为背景并使用object-fit 属性设置其样式：

@supports(object-fit: cover) {
    .video {
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

适用于所有支持和不支持 object-fit 封面的浏览器，除了 Edge 支持 object-fit: cover; 但不支持视频。如何检查它是否支持 object-fit 专门用于视频？

【问题讨论】：

您找到解决方案了吗？这真的很痛苦——我认为 polyfill 可能是你最好的选择。在相关说明中，您可以在此处投票支持将此属性包含在 Microsoft Edge 的视频元素中：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…
@TheChewy，我刚刚向@supports 条件添加了另一个MS Edge 不支持的属性（例如text-rendering: optimizeLegibility）。这是一个非常糟糕的解决方案，可能有一天会导致问题，但希望 Edge 届时能够实现视频支持。
@sdvnksv 和其他人：非常聪明的想法，截至今天，Edge 18 支持 optimizeLegibility 参见 caniuse.com：caniuse.com/#search=optimizeLegibility

标签： html css

【解决方案1】：

使用渐进增强，浏览器先选择再覆盖可以使用的浏览器？

video {
 // css for browsers which are not supporting object-fit: cover for video tag ....
}
@supports (object-fit: cover) {
    video {
        object-fit: cover;
    }
}

还是modernizr？

【讨论】：

Edge 确实支持object-fit: cover;，因此@supports 语句将在这种情况下起作用。但实际上，它不支持视频文件。
我了解，在 Edge 情况下，第一个规则将应用于视频标签，第二个规则即使应用也将不起作用。