视频标签中 WebP 海报的后备，如何？

Posted 2023-02-19

【中文标题】视频标签中 WebP 海报的后备，如何？

【英文标题】：Fallback for WebP poster in video tag, how?

【发布时间】：2020-04-07 04:04:46

【问题描述】：

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

我会使用 WebP 格式的海报，如何为不支持 WebP 的浏览器回退到 JPG？

【问题讨论】：

你想使用这样的东西 - ***.com/a/27232658/1569675- 并根据响应选择 WebP 或 JPG 海报

嘿，除了@Offbeatmammal 之外，您找到其他解决方案了吗？

【参考方案1】：

我发现了一种用 JS 做这件事的 hacky 方法，可能会节省一些时间：

将此处的小脚本放入您的 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;