HTML - Multimedia einbinden

HTML5-Audio-Element

Mit dem HTML5-<audio>-Element können Sie Audioinhalte in Ihre Webseiten einbetten. Hier ist die grundlegende Syntax für die Verwendung des <audio>-Elements:

<audio src="pfad/zur/audiodatei.mp3" controls></audio>

Das src-Attribut gibt den Pfad zur einzubettenden Audiodatei an. Das controls-Attribut fügt dem Audio-Player Standard-Audiosteuerelemente wie Abspielen, Pause und Lautstärke hinzu.

Häufig verwendete Attribute für das <audio>-Element sind:

Das <audio>-Element unterstützt verschiedene Audioformate, darunter:

• MP3 (.mp3)
• WAV (.wav)
• OGG (.ogg)

<audio src="musik.mp3" controls autoplay loop>
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

HTML5-Video-Element

Mit dem HTML5-<video>-Element können Sie Videoinhalte in Ihre Webseiten einbetten. Hier ist die grundlegende Syntax für die Verwendung des <video>-Elements:

<video src="pfad/zur/videodatei.mp4" controls></video>

Das src-Attribut gibt den Pfad zur einzubettenden Videodatei an. Das controls-Attribut fügt dem Video-Player Standard-Videosteuerelemente wie Abspielen, Pause und Lautstärke hinzu.

Häufig verwendete Attribute für das <video>-Element sind:

Das <video>-Element unterstützt verschiedene Videoformate, darunter:

• MP4 (.mp4)
• WebM (.webm)
• OGG (.ogg)

<video src="film.mp4" controls width="640" height="360">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Einbetten von YouTube-Videos

Sie können YouTube-Videos mithilfe des <iframe>-Elements in Ihre Webseiten einbetten. So erhalten Sie den Einbettungscode für ein YouTube-Video:

1. Gehen Sie zu dem YouTube-Video, das Sie einbetten möchten.
2. Klicken Sie auf die Schaltfläche "Teilen" unter dem Video.
3. Klicken Sie auf die Option "Einbetten", um den Einbettungscode zu erhalten.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ersetzen Sie VIDEO_ID durch die ID des YouTube-Videos, das Sie einbetten möchten.

Sie können den eingebetteten YouTube-Player anpassen, indem Sie die URL-Parameter im src-Attribut ändern. Einige gängige Parameter sind:

Einbetten von Vimeo-Videos

Das Einbetten von Vimeo-Videos ähnelt dem Einbetten von YouTube-Videos. Sie müssen das <iframe>-Element mit dem Einbettungscode verwenden. So erhalten Sie den Einbettungscode für ein Vimeo-Video:

1. Gehen Sie zu dem Vimeo-Video, das Sie einbetten möchten.
2. Klicken Sie auf die Schaltfläche "Teilen" unter dem Video.
3. Klicken Sie auf den Reiter "Einbetten", um den Einbettungscode zu erhalten.

<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Ersetzen Sie VIDEO_ID durch die ID des Vimeo-Videos, das Sie einbetten möchten.

Sie können den eingebetteten Vimeo-Player anpassen, indem Sie die URL-Parameter im src-Attribut ändern oder die Optionen im Einbettungscode-Generator auf Vimeo verwenden.

Einbetten von Audio von SoundCloud

SoundCloud bietet einen <iframe>-Einbettungscode zum Einbetten von Audiotracks in Ihre Webseiten. So erhalten Sie den Einbettungscode für einen SoundCloud-Track:

1. Gehen Sie zu dem SoundCloud-Track, den Sie einbetten möchten.
2. Klicken Sie auf die Schaltfläche "Teilen" unter der Track-Wellenform.
3. Klicken Sie auf den Reiter "Einbetten", um den Einbettungscode zu erhalten.

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>

Ersetzen Sie TRACK_ID durch die ID des SoundCloud-Tracks, den Sie einbetten möchten.

Sie können den eingebetteten SoundCloud-Player anpassen, indem Sie die URL-Parameter im src-Attribut ändern oder die Optionen im Einbettungscode-Generator auf SoundCloud verwenden.

Bereitstellung alternativer Inhalte für Multimedia

Um Ihre Multimedia-Inhalte für Nutzer zugänglich zu machen, die diese möglicherweise nicht sehen oder hören können, sollten Sie alternative Inhalte anbieten. Dazu können gehören:

Sie können Texttranskripte und Untertitel mithilfe des <track>-Elements innerhalb der <audio>- oder <video>-Elemente bereitstellen.

<video src="video.mp4" controls>
  <track src="captions.vtt" kind="captions" srclang="en" label="English Captions">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Das <track>-Element wird verwendet, um eine Datei (captions.vtt) anzugeben, die die Untertitel für das Video enthält. Das kind-Attribut ist auf "captions" gesetzt, um anzuzeigen, dass es sich bei der Spur um Untertitel handelt, und das srclang-Attribut gibt die Sprache der Untertitel an.

Gewährleistung der Tastaturzugänglichkeit für eingebettete Medien

Beim Einbetten von Medien aus externen Quellen wie YouTube, Vimeo oder SoundCloud sollten Sie sicherstellen, dass der eingebettete Medienplayer tastaturzugänglich ist. Das bedeutet, dass Benutzer den Player mit Tastaturbefehlen steuern können sollten, wie zum Beispiel:

• Leertaste zum Abspielen/Pausieren
• Pfeiltasten zum Vor- oder Zurückspulen
• TAB-Taste zum Wechseln zwischen den Steuerelementen

Die meisten eingebetteten Medienplayer von seriösen Quellen sind mit Blick auf die Tastaturzugänglichkeit konzipiert. Sie sollten jedoch die Tastaturzugänglichkeit Ihrer eingebetteten Medien testen, um sicherzustellen, dass sie wie erwartet funktionieren.

Sie sollten auch klare Anweisungen oder Beschriftungen für alle selbst erstellten Mediensteuerelemente bereitstellen, um sicherzustellen, dass alle Benutzer, einschließlich derer, die Hilfstechnologien verwenden, diese verstehen und nutzen können.