Звуковой элемент Firefox и HTML5 плохо сочетается?

В Firefox над хромом встроенного аудиоэлемента HTML5 появляется пустое пространство. Это появляется всякий раз, когда начинается воспроизведение мультимедиа. Я пытался понять, откуда это, но не смог. Это то, что присуще Firefox, обрабатывающему аудио html5?

Например, я нажал на пример (внизу поста) на http://www.html5rocks.com/en/tutorials/audio/quick/ и выглядит так, как показано на рисунке ниже. (в файрфоксе).

Однако этого не происходит в Google Chrome и Safari.

HTML5 Аудиоэлемент с пустой областью над элементом управления


firefox html5-audio
person Vlad    schedule 02.03.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, это проблема с реализацией 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>
person Brian Hadaway    schedule 03.03.2012
comment
Спасибо, вроде помогает, но кардинально проблему не решает. Анимация загрузки по-прежнему появляется, пока загружается звук (вы знаете этот анимированный gif). Кроме того, поскольку эта область анимации загрузки отображается с черным цветом фона, мне пришлось добавить overflow:hidden, чтобы сделать такую ​​​​работу, но опять же, это выглядит как хак, потому что указатель прогресса (пузырь, который указывает текущие минуты: секунды ) обрывается. Во всяком случае, я думаю, что нет никакого способа обойти это. Эта ошибка где-нибудь задокументирована? - person Vlad; 04.03.2012
comment
Кажется, есть несколько ошибок, связанных с этой проблемой - здесь и здесь - person Brian Hadaway; 04.03.2012