Einbetten von Audio und Video

Audio-Einbettung

Sie können das <audio>-Element verwenden, um Audiodateien auf einer Webseite einzubinden. Betrachten wir ein Beispiel:

In diesem Beispiel:

• Das <audio>-Element enthält ein <source>-Element, das die URL und den Dateityp der Audiodatei angibt. Häufig unterstützte Formate sind MP3 und OGG;
• Das controls-Attribut zeigt Standard-Wiedergabesteuerungen wie Abspielen, Pause und Lautstärke an;
• Wenn der Browser des Benutzers das Audio-Element nicht unterstützt, wird eine Fallback-Nachricht angezeigt.

Zusätzliche Attribute, die häufig mit dem HTML-Audio-Element verwendet werden, sind:

• autoplay: startet die Wiedergabe der Audiodatei, sobald die Seite geladen wird;
• loop: lässt die Audiodatei kontinuierlich wiederholen;
• muted: schaltet den Ton standardmäßig stumm;
• volume: gibt die Standardlautstärke für die Audiodatei an, im Bereich von 0.0 (stumm) bis 1.0 (volle Lautstärke).

Hier ist ein Beispiel, das die Verwendung all dieser Attribute demonstriert:

Videoeinbettung

Sie können Videodateien auf einer Webseite mit dem <video>-Element einbetten. Betrachten Sie das folgende Beispiel:

In diesem Beispiel:

• Das <video>-Element enthält ein <source>-Element, das die URL und den Dateityp der Videodatei angibt. Häufig unterstützte Formate sind WebM, MP4 und OGG;
• Das controls-Attribut zeigt standardmäßige Wiedergabesteuerungen an;
• Wenn der Browser des Benutzers das Videoelement nicht unterstützt, wird eine Ersatznachricht angezeigt.

Häufig verwendete Attribute für das HTML-Videoelement sind:

• autoplay: startet die Wiedergabe der Videodatei, sobald die Seite geladen wird;
• loop: bewirkt, dass die Videodatei kontinuierlich wiederholt wird;
• muted: schaltet den Ton standardmäßig stumm;
• volume: gibt die Standardlautstärke für die Audiodatei an, von 0.0 (stumm) bis 1.0 (volle Lautstärke);
• poster: gibt die URL eines Bildes an, das als Videominiaturansicht angezeigt wird, bevor das Video abgespielt wird;
• width und height: gibt die Breite und Höhe des Videoplayers in Pixeln an.

Hier ist ein Beispiel, das die Verwendung all dieser Attribute demonstriert:

Hinweis

Zusätzlich gibt es viele JavaScript-Bibliotheken und APIs, die zusätzliche Funktionen zum Abspielen und Manipulieren von Videoinhalten im Web bieten.