CSS Attribut 'height' für HTML5 Tag <audio>

sailor56

Das CSS 'height' Attribut für den HTML5 Tag <audio> funktioniert nicht!
Der Player wird immer mit der Standardhöhe (40px) angezeigt solange der 'height' Wert >= 40px angegeben wird.
Mit der FF Version 53.0(32Bit) wird er Player unsichtbar wenn der 'height' Wert < 40px gesetzt wird.

<!DOCTYPE html>
<html>
<head>
<title>Test HTML5 Audio Tag</title>
</head>
<body>

<audio autoplay="autoplay" controls="controls" src="pfad/titel1.mp3" type="audio/mp3">
</audio>

<audio style="height: 39px;" controls="controls" src="pfad/titel2.mp3" type="audio/mp3">
</audio>

<audio style="height: 50px;" controls="controls" src="pfad/titel3.mp3" type="audio/mp3">
</audio>

</body>
</html>

Gibt es ein Workaround, um die Anzeigehöhe des Players anzupassen?

Sören Hentzschel

Hallo,

ich weiß nicht, was genau du dir vorstellst. Ich meine, was soll in der zusätzlichen Höhe denn angezeigt werden? Die Steuerelemente sind nun einmal nur so groß, wie sie groß sind. Es gibt nichts, womit der zusätzliche Platz ausgefüllt werden könnte, außer leerer Fläche.

Dementsprechend ist es nicht möglich, ein <audio>-Element per CSS zu gestalten. Du wirst dein eigenes Player-Interface implementieren müssen, wenn du Einfluss auf die Gestaltung nehmen möchtest.

sailor56

Es geht hierbei um die (einheitliche) Darstellung des Players mit unterschiedlichen Browsern. Der Player steht ja in der Regel nicht alleine für sich, sondern ist in eine Webseite und deren Design eingebunden. Auch ist der verfügbare Platz, gerade bei Mobilen Geräten, mitunter ein Faktor, der eine Größenanpassung wünschenswert macht.
Selbst IE unterstützt das 'heigt' Attribut - hier ist die Standardhöhe allerdings sowas um die 80px. Um eine Webseite also in unterschiedlichen Browsern laufen zu lassen muss man die Höhe vorgeben!
Wenn FF nur 40px unterstützt (was Chrome im Übrigen auch macht, nur der schaltet den Player nicht unsichtbar, wenn man kleiner als 40px definiert), dann muss man als Webdesigner sich daran orientieren - oder nach Workarounds suchen, wenn es sie denn gibt.

HT-Frogger

Wenn ich das bei mir auf dem lokalen Testserver (Apache unter Linux) und dem 53.0er Ff (Linux 64 bit) probiere, dann bewirkt style="height: 80px;" oberhalb einen 40 px Abstand, bei style="min-height: 80px;" ist unterhalb ein 40 px Abstand. In beiden Fällen stimmt die Gesamthöhe mit 80 px. Das ist dann halt Leerraum.

Gruß Harry

sailor56

Danke für diesen Hinweis. Habe ich so noch nicht getestet. Müsste dann auch noch testen, wie sich die anderen Browser mit dieser Angabe verhalten.