Multimediale Benutzererfahrung: Einbindung von Video und Audio in HTML

Basics

HTML5 bietet zwei spezielle Tags zur Einbindung von Video- und Audiodateien.

<video>

Das <video> Element ist ein Bestandteil der HTML-Semantik und integriert einen Mediaplayer, der das Abspielen von Videos direkt im Dokument ermöglicht. Obwohl dieses Element auch für Audiodateien genutzt werden kann, führt die Verwendung des speziell dafür vorgesehenen Elements <audio> in vielen Fällen zu einem benutzerfreundlicheren Erlebnis.

<video width="640" height="360" controls>
  <source src="beispielvideo.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Video Funktionen

• controls:

  zeigt die Standard-Bedienelemente

• width & height:

  Größe des Players

• <source>:

  erlaubt das Laden verschiedener Formate für maximale Browserkompatibilität

• Fallback-Text: "Dein Browser unterstützt das Video-Element nicht."

  Wird angezeigt, falls der Browser das <video>-Element oder die angegebenen Audioformate (.mp4, .webm, .ogg etc.) nicht unterstützt.

<video autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

---

---

Responsives Video mithilfe von CSS

Damit die eingebetteten Videos ihr Seitenverhältnis beibehalten und auf verschiedenen Bildschirmgrößen korrekt dargestellt werden, kannst du HTML und CSS gezielt einsetzen.

Um dein Video in CSS responsiv zu gestelten und die Anwendung verschiedener Stile zu ermöglichen, bette es in einen <div>-Container ein:

</body>
<div class="video-container">
<video controls >
  <source src="Imagefilm_Digital_Media_THU_Ulm_2025.mp4" type="video/mp4">
</video>
</div>
</body>

Erstelle eine neue Datei im selben Verzeichnis wie die HTML-Datei und speichere sie als styles.cc und füge nun den folgenden Code in die Datei ein:

Der .video-container – Der äußere Rahmen

.video-container {
    position: relative;
    width: 100%;      
    max-width: 800px; 
    margin: 0 auto;   
    overflow: hidden; 
    padding-top: 56.25%; 
}

• position: relative;Setzt den Container in einen relativen Kontext. Dadurch können die darin enthaltenen Elemente absolut positioniert werden, was für das Video wichtig ist.
• width: 100%;Der Container nimmt die volle Breite seines übergeordneten Elements ein.
• max-width: 800px;Begrenzt die maximale Breite des Containers auf 800 Pixel. Dies verhindert, dass das Video auf sehr großen Bildschirmen zu breit wird.
• margin: 0 auto;Zentriert den Container horizontal innerhalb seines übergeordneten Elements.
• overflow: hidden;Verhindert, dass überstehende Inhalte außerhalb des Containers sichtbar sind.
• padding-top: 56.25%;Erzeugt eine Höhe, die 56.25% der Breite entspricht, was einem 16:9-Seitenverhältnis entspricht. Dies ist ein gängiges Format für Videos.

Das <video>-Element – Das eigentliche Video

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

• position: absolute;Positioniert das Video absolut innerhalb des Containers. Dadurch kann es exakt über dem Container platziert werden.
• top: 0; left: 0;Platziert das Video in der oberen linken Ecke des Containers.
• width: 100%; height: 100%;Das Video füllt den gesamten Container aus, sowohl in der Breite als auch in der Höhe.
• object-fit: cover;Skaliert das Video, sodass es den Container vollständig ausfüllt, ohne das Seitenverhältnis zu verändern. Dabei kann das Video an den Rändern beschnitten werden, um den Container vollständig zu füllen.
• padding-top: 56.25%;Erzeugt eine Höhe, die 56.25% der Breite entspricht, was einem 16:9-Seitenverhältnis entspricht. Dies ist ein gängiges Format für Videos.

Das Endresultat

---

---

Video ohne Player

Um ein Video alleinstehend auf einer Website in HTML einzubinden, also ohne externen Videoplayer, nutzt man am besten das native <video> Element. Damit kann man das Video direkt einbetten und es mit HTML/CSS nach Belieben stylen. In diesem Beispiel nutzen wir das Video von unserem Studiengang als Hintergrund in unserem Hero auf der Website. Hierzu ist diese Art der Einbindung besonders gut geeignet, da sich per CSS auch Text und andere Elemente darüber setzten lassen.

Step 1: Grundstruktur

<!DOCTYPE html>
<html>
  <head> ... </head>
  <body> ... </body>
</html>

• <!DOCTYPE html>: Definiert das Dokument als HTML5.

• <html>: Beginn des HTML-Dokuments.

• <head>: Enthält Metadaten, CSS und den Titel.

• <body>: Enthält die sichtbaren Inhalte der Seite.

Step 2: Head Bereich

<title>Meine Webseite</title>
<meta charset="UTF-8">
<meta name="description" content="Diese Seite zeigt ein Beispiel für HTML">

• <title>: Titel im Browser-Tab.

• <meta charset="UTF-8">: Zeichencodierung für Sonderzeichen.

• <meta name="description"...>: Beschreibung für Suchmaschinen.

Step 3: CSS-Styling im Head

<style>
  video, audio {
    border-radius: 20px;
    box-shadow: 10 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    margin-bottom: 20px;
  }
</style>

• border-radius:Rundet Video-/Audio-Rahmen ab.

• box-shadow:Fügt einen leichten Schatten hinzu.

• max-width: 100%: Medien passen sich der Breite an.

• margin-bottom: Abstand nach unten.

Step 4: Einführungstext

<h1>Willkommen zu unserer Demoseite</h1>
<p>Diese Seite demonstriert die Einbindung von Video- und Audioinhalten ...</p>

• Überschrift und Beschriftungstext.

Step 5: Video mit Overlay (Hintergrund)

<div style="position: relative; width: 100%; height: 500px; overflow: hidden;">
  <video autoplay muted loop playsinline style="width: 100%; height: 100%; object-fit: cover; filter: brightness(60%) blur(4px)">
    <source src="Imagefilm_Digital_Media_THU_Ulm_2025.mp4" type="video/mp4">
  </video>

• position: relative: Container für das Overlay.

• <video>: Startet automatisch, ohne Ton, in Endlosschleife.

• object-fit: cover: Füllt das Video aus.

• filter: brightness + blur: Abdunkeln & Weichzeichnen.

Step 6: Text-Overlay im Video

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; z-index: 1; text-align: center;">
  <h1 style="font-size: 4rem; font-weight: bold; margin: 0;">Willkommen auf unserer Website</h1>
  <p style="font-size: 1.5rem; margin-top: 10px;">Entdecke unsere neuesten Inhalte!</p>
</div>

• Overlay Text über dem Video

Fertiger Code

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Webseite</title>
    <meta charset="UTF-8">
    <meta name="description" content="Diese Seite zeigt ein Beispiel für HTML">
  
    <style>
        video, audio {
          border-radius: 20px;
          box-shadow: 10 4px 12px rgba(0, 0, 0, 0.1);
          max-width: 100%;
          margin-bottom: 20px;
        }
      </style>

</head>
  <body>
    <h1>Willkommen zu unserer Demoseite</h1>
    <p>Diese Seite demonstriert die Einbindung von Video- und Audioinhalten mithilfe von HTML und CSS</p>
    <div style="position: relative; width: 100%; height: 500px; overflow: hidden;">
      <video autoplay muted loop playsinline style="width: 100%; height: 100%; object-fit: cover; object-fit: cover; filter: brightness(60%) blur(4px)">
        <source src="Imagefilm_Digital_Media_THU_Ulm_2025.mp4" type="video/mp4">
      </video>
       
       <div style="position: absolute; top: 50%; left: 50%; 
              transform: translate(-50%, -50%);
              color: white; z-index: 1; text-align: center;">
    
    <h1 style="font-size: 4rem; font-weight: bold; margin: 0;">
      Willkommen auf unserer Website</h1>

    <p style="font-size: 1.5rem; margin-top: 10px;">
      Entdecke unsere neuesten Inhalte!
    </p>
    
  </div>
</video><br>
  </body>
</html>

Das Endresultat

---

---

YouTube-Videos einbetten

Um ein Youtube-Video in deine Website über HTML einzubetten, gehe wie folgt vor:

1. Suche das gewünschte Video auf der Youtube-Plattform
2. Kopiere den Einbettungscode, indem du entweder mit der rechten Maustaste auf das Video klickst und "Einbettungscode kopieren" wählst oder die "Teilen"-Option nutzt und dort unter "Einbetten" den HTML-Code kopierst.-> Über die "Teilen"-Option können noch weitere Einstellungen vorgenommen werden.
3. Füge den kopierten Code in den <body>-Bereich ein

<body>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/pb8q7H2SV0c?si=a5ZiWasbs3uI0zLb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body

---

---

<audio>

Das <audio> Element in HTML dient dem Zweck, Toninhalte in ein Dokument einzubinden. Es besteht die Möglichkeit, eine oder mehrere Audioquellen anzugeben. Dies kann entweder direkt über das <src> Attribut oder mithilfe des <source> Elements erfolgen. In diesem Fall wählt der Browser automatisch die am besten geeignete Quelle aus. Darüber hinaus kann das Element als Ziel für gestreamte Medien über ein "MediaStream" verwendet werden.

<audio controls>
  <source src="beispielaudiotrack.mp3" type="audio/mpeg">
Dein Browser unterstützt das Audio-Element nicht.
</audio>

• controls
  Zeigt die Standard-Bedienelemente des Browsers (Play, Pause, Lautstärke usw.).

• autoplay
  Startet die Wiedergabe automatisch beim Laden der Seite.
  Wichtig: Viele Browser erlauben Autoplay nur, wenn muted gesetzt ist (was beim Audio meist nicht sinnvoll ist).

• loop
  Spielt die Audiodatei in einer Endlosschleife.

• muted
  Startet das Audio stummgeschaltet (seltener bei Audio sinnvoll, aber möglich).

• preload
  Gibt an, wie viel vom Audio vorgeladen werden soll.

• Fallback-Text: "Dein Browser unterstützt das Audio-Element nicht."

  Wird angezeigt, falls der Browser das <audio>-Element oder die angegebenen Audioformate (.mp3, .ogg etc.) nicht unterstützt.

---

---

Spotify-Song einbetten

1. Song auf Spotify öffnen

2. Auf die drei Punkte klicken -> Teilen -> "Einbetten"

3. Den Code kopieren (iframe)

4. In HTML-Code einfügen

5. Gewünschte Attribute anpassen

</body>
<iframe style="border-radius:12px" 
    src="https://open.spotify.com/embed/track/4bDIAWaOBGAAk95nyXI6zJ?utm_source=generator" 
    width="60%" 
    height="152" 
    frameBorder="0" 
    allowfullscreen="" 
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
    loading="lazy">
  </iframe>
</body>

---

---

Barrierefreiheit

Nicht jeder Browser oder jedes Gerät kann alle Medienformate problemlos abspielen. Damit unsere Inhalte trotzdem für alle zugänglich bleiben, setzten wir auf einfache, aber wirkungsvolle sogenannte Fallback-Lösungen. So stellen wir sicher, dass niemand ausgeschlossen wird, ganz im Sinn einer barrierefreien Webgestaltung. Das ist unser Ziel, was können wir dafür tun?

Audio

Falls eine Audiodatei nicht abgespielt werden kann, können wir automatisch einen Link zum Transkript anbieten. Dies ist vorallem bei Podcasts und Nachrichten sinnvoll.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <a href="audio-transkript.txt">Hier gibt's das Transkript als Text</a>.
</audio>

Video

Ähnliches Vorgehen: Auch bei einem Video kann man als Fallback die Textzusammenfassung anbieten. In sonderfällen kann man auch Untertitel einsetzten oder das Video als direkten Download anbieten, wenn das gewünscht ist.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Ihr Browser kann dieses Video nicht anzeigen. 
  <a href="video-zusammenfassung.txt">Zur Video-Zusammenfassung</a>.
</video>

Download

Tutorial-Dateien herunterladen

Quellen

https://developer.mozilla.org/de/

https://imagekit.io/blog/responsive-html5-video/

https://www.heise.de/tipps-tricks/Video-in-HTML-einbinden-so-geht-s-4909633.html

https://support.spotify.com/de/artists/article/embedded-players/

Chat GPT (Codeüberprüfung und Hilfe)

Codepen

https://codepen.io/hilsto/pen/jEEQpyK