Question

我有一个透明的网站。如果浏览器无法显示，我想改为显示图像。

我首先尝试了以下内容：

<video autoplay loop muted>
  <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
  <img src="http://placehold.it/350x150" />
</video>

这提出了两个问题：

Internet Explorer根本没有显示任何内容。
Firefox显示黑色背景的webm;没有透明度。

我放弃了一点并接受了Javascript（和Modernizr）：

<img ... class="shittybrowser" />
<video ... class="gloriousbrowser" style="display:none;" />

if(Modernizr.video.webm){
  $(".shittybrowser").hide();
  $(".gloriousbrowser").show();
}

这解决了Internet Explorer中的问题，但Firefox仍声称要做webm，尽管只有一半的帮助。

如何确保只能显示具有透明度的网页的浏览器会这样做？

Answer 1

您可以将图片设置为<video>元素

的poster属性的值

<强>海报

指示在用户播放或搜索之前显示的海报框架的URL。   如果未指定此属性，则直到显示任何内容   第一帧可用;然后第一帧显示为海报   帧。

<video autoplay loop muted poster="http://placehold.it/350x150">
  <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" 
          type="video/webm" />
</video>

如果浏览器无法显示带有alpha通道的webm，则回退图像

1 个答案: