Javascript ist Toll!

18. Dezember 2011 - 13:48

Firefox 8 und das Audio Tag

Mittlerweile wird HTML5 immer häufiger eingesetzt. Vor allem die Multimedia Tags <audio> und <video> sind verlockend, da sie vom Flashbalast befreien und eine leichte Integration von Musik und Videos in eine Internetseite versprechen. Neben den Problemen bei der Unterstützung der unterschiedlichen Formate, gibt es aber noch hin und wieder Darstellungsprobleme.

Kürzlich tauchte in einem Forum, bei einer Frage, eine Merkwürdigkeit im Firefox auf, wenn ein Audio Tag mit controls eingebunden wird. Sobald der Browser beginnt die Inhalte zu laden, wird dieses Icon, zum symbolisieren des Vorladens, angezeigt. Ist das Vorladen beendet, wird es wieder ausgeblendet. Das hat zur Folge, dass die Bedienelemente anfangen zu springen und dadurch zum Teil der Eindruck erweckt wird, diese können nicht mehr benutzt werden. Alle anderen Browser, die das Audio Tag darstellen können, haben dieses Problem nicht.

Audio Tag ohne Maßangaben

Der Audioplayer ohne Angaben. Die Bedienelemente sind alle erreichbar, aber sobald Play gedrückt wird, macht er Platz für ein Icon und vergrößert sich nach oben.

Audio Tag 100 Pixel breit

Ist die Breite zu klein wird es kniffelig. Wie am roten Rahmen erkennbar ist, sind die Bedienelemente nicht mehr dort, wo sie angezeigt werden und sobald Play gedrück wird springt das angezeigte Element komplett aus dem Bereich. Damit der Audioplayer bedienbar bleibt muss eine Breite von mindestens 300px angegeben werden.

style="width:100px"

Screenshots

Um das zu verdeutlichen zwei Screenshots, die das Problem zeigen:
Audio Tag vor preload Das Audio Tag vor dem Laden
Aund danach

Audio Tag mit Breite und Höhenangabe

Um das springen zu vermeiden muss eine Höhe von mindestens 64px angegeben werden. Das hat aber zur Folge, dass in den anderen Browsern z.T. dieser Bereich mit einem weissen Rahmen versehen wird, der sich auch nicht über das CSS entfernen läßt.

style="width:200px;height:64px"

Ähnliche Artikel

  • 30. Oktober 2012 -- Firefox Screenshots (0)

    Update 19.8.2013: Die Syntax dieses Features hat sich mittlerweile geändert, leider wird dies im Hilfetext in der aktuellen Version (22.0) nicht erwähnt. Um den hier beschriebenen Screenshot zu machen,...

  • 6. November 2010 -- Mach deine Fehlerkonsole sauber! (8)

    Alle, die sich mit Javascript beschäftigten, kennen wohl die Fehlerkonsole (z.b. im Firefox zu finden im Menü Extras). Mit ihr lassen sich leicht Fehler in Skripte finden und ist daher bei mir meistens...

  • 28. Januar 2010 -- Neues Tabverhalten im Firefox 3.6 (1)

    Der Mensch ist ein Gewohnheitstier und mich nehme ich davon nicht aus. Schlimm wird es, wenn Dinge, an die ich mich gewöhnt habe, sich ohne mein Wissen ändern. Automatische Updates, so nützlich sie...

Comments (2)
2214 mal gelesen.
flattr

2 Kommentare

Hinterlasse einen Kommentar »

Seiten:

1. Kommentar von: Jasper
9. Januar 2012: 16:17

Der like Button wuerde sich gut auf der Seite machen, oder finde ich ihn nur nicht?

2. Kommentar von: Struppi
18. Januar 2012: 23:33

Danke.

Aber ich bin kein Facebookmitglied.

Hinterlasse einen Kommentar

Name (erforderlich)
Mail (wird nicht angezeigt) (erforderlich)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful