Wikieintrag bearbeiten: Video und Audio mit HTML 5 | Wir machen Kinderseiten

Warnung

Die Linküberprüfung von http://www.xmedia-recode.de/ ist 712-mal fehlgeschlagen (Status-Code: -1).
Die Linküberprüfung von http://webkrauts.de/artikel/2009/sehen-und-hoeren ist 28-mal fehlgeschlagen (Status-Code: 301).

Haupt-Reiter

Thema *

Override book title

Titel übersteuern

Text

Über die &lt;audio&gt; und &lt;video&gt; tags in HTML5 lassen sich Multimediainhalte mit relativ wenig Aufwand und ohne die Verwendung von Flash in die eigenen Internetseiten integrieren. Aktuelle Browser, die HTML5 unterstützen, stellen die Mediendateien dann mit Hilfe eines eigenen Players dar:

So kann man die Audio-Datei &bdquo;name.mp3&ldquo;, die sich im entsprechenden Verzeichnis auf dem Server befindet, im Browser wiedergeben. Da die mp3-Kodierung zumindest teilweise durch Patente geschützt ist, unterstützen jedoch nicht alle Browser die Wiedergabe dieses Formats. Daher sollte man die Audio-Datei neben dem &bdquo;mp3&ldquo; Format zusätzlich auch im &bdquo;Ogg&ldquo;-Format anbieten. Es empfiehlt sich darüber hinaus, den sogenannten Internet-Medien-Typ (&bdquo;MIME-Type&ldquo;) mit anzugeben:

<blockquote>
	&lt;audio src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3</a>&ldquo; type=&quot;audio/mp3&quot; src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.</a><a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">ogg</a>&ldquo; type=&quot;audio/ogg&quot;&gt; 
		&lt;/audio&gt;
</blockquote>

Dieses Beispiel sollte in allen aktuellen Browsern und auch auf Smartphones und Tablets funktionieren. Darüber hinaus lassen sich für den Player verschiedene Attribute vergeben:

<table cellpadding="2" cellspacing="0" style="height:540px; width:700px">
	<tbody>
		<tr>
			<td>
				controls
			</td>
			<td>
				Bestimmt, dass grundlegende Bedienelemente wie beispielsweise Play/Pause oder die Lautstärke angezeigt werden.
			</td>
		</tr>
		<tr>
			<td>
				autoplay
			</td>
			<td>
				Lässt die Audiodatei automatisch beim Seitenaufruf abspielen.
			</td>
		</tr>
		<tr>
			<td>
				Loop
			</td>
			<td>
				Lässt die Wiedergabe automatisch wiederholt in einer Schleife abspielen.
			</td>
		</tr>
		<tr>
			<td colspan="2">
				Zusätzlich für die Video-Wiedergabe:
			</td>
		</tr>
		<tr>
			<td>
				height
			</td>
			<td>
				Höhe des Players in Pixeln.
			</td>
		</tr>
		<tr>
			<td>
				width
			</td>
			<td>
				Weite des Players in Pixeln.
			</td>
		</tr>
		<tr>
			<td>
				poster
			</td>
			<td>
				Verweis auf ein Bild, das bis zum Start der Wiedergabe angezeigt wird. 
					Wert: src=&ldquo;pfad/zum/bild.jpg&ldquo;
			</td>
		</tr>
		<tr>
			<td>
				preload
			</td>
			<td>
				Soll das Video vorab bei Seitenaufruf geladen werden? Wert &bdquo;auto&ldquo; angeben, um das Video gleich zu laden, Wert &bdquo;metadata&ldquo;, um nur die Metadateien (Größe, Länge etc.) zu laden, Wert &bdquo;none&ldquo; um das Video nicht vorab zu laden.
			</td>
		</tr>
	</tbody>
</table>

<blockquote>
	&lt;audio src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3</a>&ldquo; type=&quot;audio/mp3&quot; 
		src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.</a><a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">ogg</a>&ldquo; type=&quot;audio/ogg&quot; 
		controls autoplay loop&gt; 
		&lt;/audio&gt;
</blockquote>

Stockt die Wiedergabe zum Beispiel bei großen Dateien, kann man mit dem Attribut &bdquo;preload&ldquo; und dem Wert &bdquo;auto&ldquo; angeben, dass das Video gleich bei Seitenaufruf geladen werden soll. Bis zum Klick auf den Wiedergabe-Button ist ein Großteil der Datei dann bereits geladen (&bdquo;gebuffert&ldquo;).

<blockquote>
	&lt;audio src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3</a>&ldquo; type=&quot;audio/mp3&quot; 
		src=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.</a><a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">ogg</a>&ldquo; type=&quot;audio/ogg&quot; 
		preload=&ldquo;auto&ldquo; controls &gt;

Dein Browser kann die Datei leider nicht abspielen. Du kannst sie Dir aber &lt;a href=&ldquo;<a class="western" href="http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3">http://www.beispielseite.de/pfad/zu/der/audiodatei/name.mp3</a>&ldquo; als=&ldquo;Datei zum Download&ldquo; target=&ldquo;_blank&ldquo;&gt;hier&lt;/a&gt; herunterladen.

&lt;/audio&gt;
</blockquote>

Der Text innerhalb des &lt;audio&gt; tags wird nur angezeigt, falls der Browser das HTML5 Element &lt;audio&gt; nicht unterstützt, was beispielsweise bei veralteten Browserversionen der Fall sein kann.

Mit etwas Aufwand und Hilfe von Javascript sowie CSS kann man zudem das Aussehen des Players, das ansonsten in jedem Browser unterschiedlich dargestellt wird, ändern und vereinheitlichen.

<h3>Video</h3>

Ganz ähnlich wie mit dem &lt;audio&gt; tag verhält es sich bei der Wiedergabe von Videos mit Hilfe des HTML5 &lt;video&gt; tags:

<blockquote>
	&lt;video width=&quot;640&quot; height=&quot;360&quot; controls poster=&quot;<a class="western" href="http://beispielseite.de/pfad/bild.jpg">http://beispielseite.de/pfad/bild.jpg</a>&quot;&gt; 
		&lt;source src=&quot;<a class="western" href="http://www.beispielseite.de/pfad/video.mp4">http://www.beispielseite.de/pfad/video.mp4</a>&quot; type=&quot;video/mp4&quot;&gt; 
		&lt;source src=&quot;<a class="western" href="http://www.beispielseite.de/pfad/video.mp4">http://www.beispielseite.de/pfad/video.ogv</a>&quot; type=&quot;video/ogg&quot;&gt; 
		&lt;source src=&quot;<a class="western" href="http://www.beispielseite.de/pfad/video.mp4">http://www.beispielseite.de/pfad/video.webm</a>&quot; type=&quot;video/webm&quot;&gt;

Leider funktioniert das Video mit Deinem Browser nicht. Du kannst es Dir aber dafür &lt;a href=&quot;http://www.beispielseite.de/pfad/video.mp4&quot;&gt;hier&lt;/a&gt; herunterladen!

&lt;/video&gt;
</blockquote>

Ebenso wie beim &lt;audio&gt; tag sollten auch die Video Daten in unterschiedlichen Formaten vorliegen, um eine möglichst weite Nutzbarkeit über die verschiedenen Browser zu gewährleisten. Von besonderer Bedeutung sind vor allem die Videoformate &bdquo;Ogg&ldquo; bzw. &bdquo;ogv&ldquo;, &bdquo;mp4&ldquo; und &bdquo;webm&ldquo;.

<h3>Konvertieren von Audio- und Video-Dateien</h3>

Das Umkonvertieren von vorhandenem Audio- und Videomaterial kann mit Hilfe verschiedener Programme vorgenommen werden. Ein Beispiel dafür ist das kostenfrei erhältliche <a href="http://www.xmedia-recode.de/" target="_blank">Xmedia Recode</a>, das gängige Dateiformate in die genannten Vorgaben umwandeln kann.

Links		Reihenfolge
	Titel * URL Links	Reihenfolge für zeile 1
	Titel * URL Links (value 2)	Reihenfolge für zeile 2
	Titel URL Links (value 3)	Reihenfolge für zeile 3

Obige Zeichenfolge eingeben *

Vertikale Reiter

Versionsinformation

Protokollnachricht der Version