Image de repli si le navigateur ne peut pas afficher webm avec alpha channle

Question

J'ai un webm avec transparence. Si le navigateur ne peut pas l'afficher, je veux montrer une image à la place.

J'ai essayé la première suivante:

<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>

Cela a posé deux problèmes:

1. Internet Explorer ne montre rien du tout. Firefox affiche le webm avec un fond noir; pas de transparence.

je lui ai donné un peu et pris à Javascript (et Modernizr):

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

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

Ce résolu le problème dans Internet Explorer mais Firefox prétend encore faire WebM, malgré seulement à moitié.

Comment puis-je m'assurer que seuls les navigateurs capables d'afficher des webmes avec transparence le font?

Answer 1

Vous pouvez définir l'image en tant que valeur de poster attribut à <video> élément

affiche

URL indiquant un cadre d'affiche pour montrer que l'utilisateur joue ou cherche. Si cet attribut n'est pas spécifié, rien n'est affiché jusqu'à ce que la première trame soit disponible; alors la première image est représentée par l'image .

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