HTML5: Audio und Video einbetten

1 | 1 Kommentar | 18266 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "HTML5: Audio und Video einbetten" mit Ihrem Wissen!

Anzeige Hier werben

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Nein4Unterstützt
HTML5: audio und video

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.

VIDEO beispiel  
HTML
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.

 
HTML
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

 
Text
1
Access-Control: allow <example.org>

Attribute

AUDIO Attribute

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
autoplay
autoplay

Ohne Wert. Spielt die Audio-Datei automatisch ab.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
controls
controls

Ohne Wert. Es erscheinen die Standard-Steuerelemente für Audio.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
end
end

Der angegebene Wert (in Sekunden) bestimmt, wann die Wiedergabe abgebrochen werden soll. Standardwert ist infinity (spielt bis zum Ende).

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
loopend
loopend

Der angegebene Wert (in Sekunden) legt den Zeitpunkt fest, von dem wieder zurück (zu loopstart) gesprungen werden soll.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
loopstart
loopstart

Der angegebene Wert (in Sekunden) legt den Zeitpunkt fest, von dem wieder nach einem Zurücksprung (zu loopend) abgespielt werden soll.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
playcount
playcount

Der Wert gibt die Anzahl an, wie oft die Datei abgespielt werden soll.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
src (Attribut!)
src

Enthält die URL der Audio-Datei.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
start
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.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
controls
controls

Ohne Wert. Es erscheinen die Standard-Steuerelemente für Video.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
height
height

Der Wert (in Pixel) legt die Höhe des Videos fest.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
width
width

Der Wert (in Pixel) legt die Breite des Videos fest.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
poster
poster

Enthält die URL für eine Grafik, die vorgeschaltet wird, wenn das Video noch vorlädt. Standardwert ist none.

SOURCE Attribute

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
src
src

Enthält die URL für das alternative Dateiformat.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
type
type

Enthält den MIME-Type der Datei. Nach Möglichkeit mit Angabe des Codecs.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
media
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

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Nein4Unterstützt
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

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Nein4Unterstützt
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

Wikiseite bearbeiten

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.

Mitarbeiter
  • 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 - kinderturnen

Kommentare: HTML5: Audio und Video einbetten

Neuen Kommentar schreiben
Sehr schön....
Beantworten

Ein sehr intressanter und Informativer Beitrag von euch... :)

Markus B. am 07.11.2008 um 17:37