HTML: Multimedia

In HTML-Dokumenten können die verschiedensten Arten von multimedialen Elementen integriert werden. Die Möglichkeiten reichen von Musik/Klängen über Videos sogar bis hin zu 3D-Flügen über Landschaften. Da es nun schon unzählige Arten dieser Dinge gibt, werden wir hier nicht auf jede einzelne eingehen können und werden. Jedoch werden wir versuchen die wichtigsten hier aufzuzeigen und zu erläutern.

Musik

Um Hintergrundmusik zu definieren, verwendet man das embed-Element. Dieses wird im body der Datei notiert. Als Angabe zur Musikdatei wird das src-Attribut verwendet. Damit die Musik sofort beginnt, wenn die Seite aufgerufen wird, verwendet man das autostart-Attribut und die Wiederholung des Musikstücks wird mit dem loop-Attribut definiert. Beispiel:

Die Angabe eines Wertes für das autostart-Attribut kann entweder true oder false sein. True bedeutet, dass die Musikdatei sofort zu spielen beginnt, false hingegen, dass die Musik erst beginnt, sobald der Benutzer auf den Play-Knopf drückt oder eine andere Gegebenheit eintritt.
Ist der Wert true für das loop-Attribut gesetzt, so wiederholt sich das Musikstück unendlich oft (bis die Seite verlassen wird) - wird das Attribut weggelassen oder erhält es den Wert false, so wird die Musik nur einmal abgespielt.

Im Beispiel sind zusätzlich noch die Attribute height, width und hidden definiert worden. Diese beschreiben die Darstellung einer eingebundenen (Musik-)Datei. Mit height wird die Höhe beschrieben, width beschreibt die Breite. Das hidden-Attribut sagt aus, ob das Element versteckt (hidden engl. versteckt) dargestellt werden soll oder nicht. Mit dem Wert true wird es versteckt - mit false ist es sichtbar. Werden diese Angaben wie im Beispiel notiert, so ist die Musik-Anwendung nicht sichtbar und funktioniert somit wie das bgsound-Elemenet.

Hintergrundusik

Für den Microsoft Internet Explorer definiert man Hintergrundmusik mit dem eigens von Microsoft kreierten bgsound-Element. Dieses wird im head notiert und erhält als Attribute einmal das src-Attribut, welches beschreibt welche Musikdatei abgespielt werden soll, und einmal das loop-Attribut, welches die Anzahl der Wiederholungen des Musikstücks beschreibt. Beispiel:

Das src-Attribut kann, ebenso wie beispielsweise Bilder, jede Form von URLs oder anderen Pfadangaben erhalten. Der Wert für die Angabe der Wiederholungen kann entweder eine ganze Zahl oder das Wort infinite sein. Bei der Notierung von infinite wird das Musikstück unendlich oft wiederholt und erst dann gestoppt, wenn die Seite verlassen wird. Die Angabe einer Zahl wiederholt das Musikstück logischerweise so oft wie die Zahl groß ist.

Videos

Als sichere Variante für alle Browser gilt meist die, die auf dem Netscape Browser funktioniert. Dieser bindet Videos ebenso wie Musik mit dem embed-Element ein. Beispiel:

Hierbei wird, ebenso wie bei Musikstücken, im src-Attribut notiert, welche Videodatei geladen werden soll.
Der Microsoft Internet Explorer interpretiert auch Videos die mit dem img-Element eingebunden werden. Hierzu wird das dynsrc-Attribut (dyn. = engl. Dynamisch, src. = engl. Quelle ; Quelle für dynamisches Bild) notiert. Beispiel:

Beachten Sie hierbei bitte, dass zwar der Microsoft Internet Explorer das embed-Element interpretiert, jedoch nicht der Netscape Navigator das dynsrc-Attribut des img-Elements.

Videobildgröße

Die Größe der Videobilder werden bei beiden Elementen gleich bestimmt. Benutzen sie hierzu die Attribute height, für die Höhe, und width, für die Breite. Beispiel:

(Endlos-)Schleifen

Bei der Art eine Schleife zu definieren bzw. die Anzahl der Wiederholungen einzustellen unterscheiden sich die beiden Elemente geringfügig. Jedoch wird bei beiden das loop-Attribut verwendet.

Die Werte des loop-Attributs des img-Elements können entweder eine ganze Zahl oder das Wort infinite sein. Wird eine Zahl notiert, so wird das Viedo so oft wiederholt wie die Zahl groß ist. Notiert man infinite als Wert, so wiederholt sich das Video unendlich oft - eine Viedoschleife. Beispiel:

Zusätzlich kann noch eine Verzögerung in Millisekunden zwischen den erneuten Wiedergaben definiert werden. Diese notiert man mit dem loopdelay-Attribut. Als Werte können sie hier ganze Zahlen Angeben. Beispiel:

Als Wert des loop-Attributs des embed-Elements dürfen keine Zahlen eingesetzt werden. Hier notiert man ob es sich um eine Endlosschleife handeln soll (Als Wert true eingesetzt) oder nicht (Als Wert false eingesetzt). Beispiel:

Start

Bei beiden Elementen lässt sich der Startzeitpunkt definieren. Beim img-Element benutzt man dazu das start-Attribut. Ihm können zwei verschiedene Werte zugeordnet werden.
1. Der Wert fileopen. Er bewirkt, dass das Viedo sofort abgespielt wird, wenn das Dokument geöffnet wird.
2. Der Wert mouseover. Er bewirkt, dass das Video abgespielt wird, sobald der Mauszeiger über das Video fährt. Beide Werte können entweder einzeln oder kombiniert eingesetzt werden. Beispiel:

Zusätzlich kann beim img-Element noch das controls-Attribut notiert werden. Es erhält keinen Wert und bewirkt, dass ein Kontrollfeld zur Steuerung des Videos angezeigt wird.

Beim embed-Element benutzt man dazu das autostart-Attribut. Dieses bewirkt, dass Video sofort bei Aufruf des Dokumentes gestartet wird (Mit dem Wert true) oder nicht (Mit dem Wert false). Beispiel:

Alternativer Inhalt

Falls ein Browser das notierte Element nicht interpretieren sollte, haben Sie die Möglichkeit, etwa für ältere Browser, alternativen Inahlt zu definieren. In beiden Fällen wird dann ein Bild (oder Text) angezeigt.

Um alternativen Inahlt bei Browsern, die das dynsrc-Attribut des img-Elements nicht interpretieren, darstellen zu können, empfiehlt es sich, zusätzlich zu der Angabe der Videodatei das src-Attribut zu verwenden. Geben Sie hier einfach ein Bild ein. Beispiel:

Des Weiteren kann auch ein Alternativtext wie bei Bildern angegeben werden.

Um alternativen Inhalt darstellenzu können bei Browsern, die das embed-Element nicht kennen können Sie das noembed-Element verwenden. Es bewirkt, dass es von Browsern, die das embed-Element interpretieren quasi 'überlesen' wird und gleichzeitig wird es von anderen Browsern 'mitgelesen'. Innerhalb des noembed-Elements können Sie z.B. ein alternatives Bild oder Text definieren. Beispiel:

Andere Multimediadaten

Neben Videos und Musik können natürlich auch viele andere multimediale Dinge integriert werden. So zum Beispiel 3D-Welten (VRML), andere Dokumente (z.B. Excel oder Word Dateien) oder andere. Im allgemeinen befolgen diese Dinge alle ein einheitliches Muster.

Allgemein verwendet man für fast alle multimedialen Objekte das embed-Element, wie Sie es schon für Musik oder Videos kennen gelernt haben. Mit diesem können Sie nicht nur Musikdateien wiedergeben oder Videos abspielen, sondern auch Beispielsweise VRML-Dateien oder Dokumente einbinden. Alles geschieht, wie bekannt, über das src-Attribut, in dem die einzubindende Datei angegeben wird. Auch hier kann nun wieder mit den height- und width-Attributen die Höhe (height) bzw. Breite (width) angegeben werden. Beispiel:

Beachten Sie bitte dabei, dass nicht alle Dateien und Formate integriert werden können.

Je nach installierten Plugins kann die integration auch direkt über einen einfachen Link erfolgen. Wird auf diesen geklick, wird die (Multimedia-)Datei im Browserfenster geöffnet und dargestellt. So können z.B. VRML-Dateien oder auch Excel-Dokumente eingebunden werden. Beispiel:

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project