FirefoxとHTML5のオーディオ要素が一緒に再生されませんか？

Question

Firefoxでは、埋め込まれたHTML5オーディオ要素のクロムの上に空白が表示されます。メディアが再生を開始するたびに表示されます。私はこれがどこから来ているのか理解できなかった。これはFirefoxがhtml5のオーディオを処理することに固有のものですか？

たとえば、http://www.html5rocks.com/en/tutorials/audio/quick/の例（投稿の一番下にある例）をクリックすると、下の画像のようになります。 （Firefoxの場合）。

しかし、これはGoogle ChromeとSafariでは発生しません。

Answer 1

これはHTML5 audio要素のFirefoxの実装に問題があるようです。あなたは少し余分なマークアップと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>