视频标签中WebP海报的后备广告，该如何处理？

Question

<video controls poster="image.webp">
   <source src="video.mp4" type="video/mp4">
</video>

我将使用WebP格式的海报，对于不支持WebP的浏览器，我该如何回退到JPG？

Answer 1

我发现了一种用 JS 做这件事的黑客方法，它可能会节省一些人的时间，所以：

将这里的小脚本放入您的 HTML 中： https://modernizr.com/download?webp-setclasses

这将根据支持将 webp 或 no-webp 类添加到顶部 html div 中。

使用 webp 海报后备（除了以前的 safari 之外，这些天通常提供良好的支持）

然后将此代码作为桌面回退的示例放在您的视频元素上：

@media screen and (min-width: 768px) {
    .no-webp .video-element-class{
      background-image: url("fallback-image.jpg");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 0 0;
      background-size: cover;
    }
}