Firefox et élément audio HTML5 ne jouent pas bien ensemble?

Question

Sur Firefox, un espace vide apparaît au-dessus du chrome de l'élément audio HTML5 intégré. Cela apparaît chaque fois que le média commence à jouer. J'ai essayé de comprendre d'où cela vient mais je ne pouvais pas. Est-ce quelque chose qui est inhérent à Firefox qui gère l'audio html5?

Par exemple, j'ai cliqué sur l'exemple (en bas de la publication) sur http://www.html5rocks.com/en/tutorials/audio/quick/, et il ressemble à l'image ci-dessous. (Sur Firefox).

Cependant, cela ne se produit pas sur Google Chrome et Safari.

Answer 1

Cela semble être un problème avec la mise en œuvre de Firefox de l'élément HTML5 audio. Vous pouvez contourner cela avec un peu plus de balisage et CSS.

CSS:

<style> 
    .wrapper { 
     height: 30px; 
     position: relative; 
    } 

    audio { 
     bottom: 0; 
     position: absolute; 
    } 
</style> 

HTML:

<div class="wrapper"> 
    <audio src="your/path/file.mp3" controls></audio> 
</div>