Обратный образ, если браузер не может отображать веб-страницы с альфа-каналом

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>

Это создает две проблемы:

1. Интернет исследователь ничего не показывают вообще.
2. Firefox показывает веб-сайт с черным фоном; нет прозрачности.

Я дал немного и взял на 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

Вы можете установить изображение в качестве значения атрибута poster в <video> элемента

плакат

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>