Audio-Einbettung

Das <audio>-Element ermöglicht das Einbinden von Audiodateien auf einer Webseite. Hier 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 Attribut controls zeigt Standard-Steuerelemente wie Wiedergabe, Pause und Lautstärke an;
• Falls der Browser des Nutzers das Audio-Element nicht unterstützt, wird eine Ersatzmeldung 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 in einer Schleife abspielen;
• muted: schaltet den Ton der Audiodatei standardmäßig stumm;
• volume: legt die Standardlautstärke der Audiodatei fest, 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 Attribut controls zeigt die Standard-Wiedergabesteuerung an;
• Wenn der Browser des Benutzers das Videoelement nicht unterstützt, wird eine Ersatzmeldung angezeigt.

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

• autoplay: startet die Videodatei automatisch, sobald die Seite geladen wird;
• loop: lässt die Videodatei kontinuierlich wiederholen;
• 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 Videovorschaubild 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 erweiterte Funktionen für das Abspielen und Bearbeiten von Videoinhalten im Web bereitstellen.