Firefox和HTML5音频元素不能很好地结合在一起？

Question

在Firefox上，嵌入的HTML5音频元素的chrome上方会出现一个空白区域。媒体开始播放时会出现此信息。我试图找出它来自哪里，但不能。这是Firefox处理html5音频时固有的东西吗？

例如，我点击了http://www.html5rocks.com/en/tutorials/audio/quick/上的示例（位于帖子底部），它看起来像下面的图像。 （在Firefox上）。

但是，这不会发生在Google Chrome和Safari上。

Answer 1

这似乎是Firefox实现HTML5 audio元素的问题。您可以使用一些额外的标记和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>