<video controls poster="image.webp">
<source src="video.mp4" type="video/mp4">
</video>
我会使用 WebP 格式的海报,如何为不支持 WebP 的浏览器回退到 JPG?
我发现了一种用 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;
}
}