HTML5: Audio und Video einbetten
Anzeige Hier werben
Die HTML-Tags AUDIO und VIDEO sind Teil der Spezifikation für den noch nicht veröffentlichten Webstandards HTML5.
Mit diesen Tags lassen sich auf einfachem und sauberen Weg Audio- und Video-Dateien in Websites einbetten.
Syntax
<audio> und <video> besitzen einen konventionellen Aufbau, mit der Möglichkeit innerhalb des Tags eine Meldung einzubauen für Browser, die keine HTML5-Tags unterstützen.
1 2 3 | <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg">
Ihr Browser unterstützt diese Funktion nicht.
</video>
|
Unterstützen manche Browser einige Formate nicht, können auch mehrere Formate mit SOURCE angegeben werden. Das zuerst benutzbare wird dann genommen.
1
2
3
4
5 | <video>
<source src="foo.ogg" type="video/ogg"></source>
<source src="foo.mov"></source>
Ihr Browser unterstützt diese Funktion nicht.
</video>
|
Ebenso verhält es sich mit AUDIO.
Einbinden von Videos von anderen Domains
Videos können nur von anderen Domains eingebunden werden, wenn der Server dort einen speziellen Header sendet, der das einbinden erlaubt: Video, Audio and Cross Domain Usage
1 | Access-Control: allow <example.org>
|
Attribute
AUDIO Attribute
autoplay
Ohne Wert. Spielt die Audio-Datei automatisch ab.
controls
Ohne Wert. Es erscheinen die Standard-Steuerelemente für Audio.
end
Der angegebene Wert (in Sekunden) bestimmt, wann die Wiedergabe abgebrochen werden soll. Standardwert ist infinity (spielt bis zum Ende).
loopend
Der angegebene Wert (in Sekunden) legt den Zeitpunkt fest, von dem wieder zurück (zu loopstart) gesprungen werden soll.
loopstart
Der angegebene Wert (in Sekunden) legt den Zeitpunkt fest, von dem wieder nach einem Zurücksprung (zu loopend) abgespielt werden soll.
playcount
Der Wert gibt die Anzahl an, wie oft die Datei abgespielt werden soll.
src
Enthält die URL der Audio-Datei.
start
Der Wert (in Sekunden) legt den Zeitpunkt fest, von dem die Audio-Datei abgespielt werden soll. Standardwert ist 0.
VIDEO Attribute
Die selben Attribute gelten ebenfalls für VIDEO, auch mit den selben Kompatibilitäten. Lediglich controls wird hier im Firefox 3.1 tadellos unterstützt. Es kommen aber noch einige Attribute hinzu.
controls
Ohne Wert. Es erscheinen die Standard-Steuerelemente für Video.
height
Der Wert (in Pixel) legt die Höhe des Videos fest.
width
Der Wert (in Pixel) legt die Breite des Videos fest.
poster
Enthält die URL für eine Grafik, die vorgeschaltet wird, wenn das Video noch vorlädt. Standardwert ist none.
SOURCE Attribute
src
Enthält die URL für das alternative Dateiformat.
type
Enthält den MIME-Type der Datei. Nach Möglichkeit mit Angabe des Codecs.
media
Enthält den Media-Query der Datei.
Formate
Um die Formate die im Video Element unterstützt werden sollen gab es viel Diskussionen und ein endgültiger Konsens wurde hier noch nicht gefunden. Verschiedene Codecs bieten unterschiedlich gute Kompression, Hardwarebeschleunigung, Kontainer und vor allem lizenzrechtliche Schwierigkeiten und Patentprobleme.
Ogg Theora
Bisher wird nur der lizenzfreie Open-Source Ogg Theora-Codec unterstützt. Die Kompression ist etwas schlechter als h264 (in letzter Zeit gab es bei den Encodern hier erhebliche Verbesserungen).
Ogg Vorbis
Ogg Vorbis ist ein lizenzfreier Audio-Codec, der bessere Kompression als MP3 bietet. Es gibt sogar einige MP3-Player, die diesen Codec unterstützten.
Noch zu machen
- Kompatibilität der Attribute
- Links zu Programmen mit denen Ogg Theora und Ogg Vorbis Videos erstellt werden können
- Mehr Beispiele
Weiterführende Links zu HTML5 Video
- HTML5 Überblick auf Webmasterpro
- Mozilla Developer Center: Using video and audio in Firefox
- Mozilla Developer Center: Video Element
- Eine HTML5 Video Testseite: Auch mit Beispielen von HTML5 Videos in SVG
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "HTML5: Audio und Video einbetten" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "HTML5: Audio und Video einbetten" hier bearbeiten.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
arbeitet seit mehreren Jahren als Designer und Softwareentwickler. Nach seiner Ausbildung zum Werbekaufmann studierte er Digitale Medien an der Dualen Hochschule Baden-Württemberg Mannheim und erhielt 2009 den Bachelor of Arts. Seitdem arbeitet er als Senior-Developer in Darmstadt.
-
graphic, motion & web design - kernreaktor - staportal - mukitu
Sehr schön....
Ein sehr intressanter und Informativer Beitrag von euch... :)