Videos in HTML einbetten und anpassen

Einführung

In diesem Lab lernen Sie, wie Sie Videoelemente mit dem leistungsfähigen Tag <video> in HTML einbetten und anpassen. Das Lab behandelt wichtige Techniken zum Erstellen interaktiver Videoplayer. Dazu gehören das Hinzufügen von Steuerelementen, das Konfigurieren von Videoquellen, das Einbinden eigener Vorschaubilder und das Erkunden verschiedener Attribute des Video-Tags, mit denen sich die Wiedergabe verbessern lässt.

In den einzelnen Schritten erwerben Sie praktische Kenntnisse zum Einbetten von HTML5-Videos – von der Erstellung eines einfachen Videoelements bis hin zu erweiterten Konfigurationen. Sie lernen, mehrere Videoquellen hinzuzufügen, Wiedergabeeinstellungen zu steuern, eigene Vorschaubilder festzulegen und direkt in Webseiten ansprechendere und benutzerfreundlichere Videoerlebnisse zu erstellen.

Einfaches Videoelement mit Steuerelementen erstellen

In diesem Schritt erstellen Sie ein einfaches Videoelement mit wichtigen Steuerelementen in HTML. HTML5 stellt mit dem Tag <video> ein einfaches und leistungsfähiges Element bereit, mit dem Sie Videos direkt in Webseiten einbetten können.

Erstellen Sie zunächst eine HTML-Datei für die Videoeinbettung. Öffnen Sie die WebIDE und legen Sie im Verzeichnis ~/project eine neue Datei mit dem Namen video-demo.html an.

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>My First Video Element</h1>

    <video controls width="640" height="360">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Sehen wir uns die wichtigsten Bestandteile des Videoelements an:

Tag <video>: Der Hauptcontainer zum Einbetten von Videoinhalten
Attribut controls: Fügt die standardmäßigen Steuerelemente des Videoplayers hinzu (Wiedergabe, Pause, Lautstärke)
Attribute width und height: Legen die Abmessungen des Videoplayers fest
Text innerhalb des Tags: Fallback-Nachricht für Browser, die HTML5-Video nicht unterstützen

Das Attribut controls ist besonders wichtig, weil es den Benutzern standardmäßige Steuerelemente für die Wiedergabe, das Pausieren, die Lautstärkeregelung und den Vollbildmodus bereitstellt.

Hinweis: Weitere Informationen finden Sie unter HTML-Dateien in der WebIDE in der Vorschau anzeigen.

HTML-Videoelement mit Steuerelementen

Videoquelle hinzufügen und Wiedergabe stummschalten

In diesem Schritt fügen Sie Videoquellen zu Ihrem HTML-Videoelement hinzu und legen den anfänglichen Wiedergabestatus fest. Dazu ändern Sie die zuvor erstellte Datei video-demo.html, fügen Videoquellen hinzu und sorgen dafür, dass das Video standardmäßig stummgeschaltet ist.

Öffnen Sie die Datei ~/project/video-demo.html in der WebIDE und ersetzen Sie ihren Inhalt durch Folgendes:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>Video with Multiple Sources</h1>

    <video controls width="640" height="360" muted>
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Sehen wir uns die neuen Elemente an:

Tags <source>: Mit ihnen können Sie mehrere Videoformate für die Kompatibilität mit verschiedenen Browsern angeben
- Die erste Quelle ist eine MP4-Datei.
- Die zweite Quelle ist eine WebM-Datei (alternatives Format).
- Der Browser verwendet das erste unterstützte Format.
Attribut muted: Schaltet das Video beim Laden automatisch stumm
- Das verhindert eine unerwartete Audiowiedergabe.
- Entfernen Sie das Attribut, wenn das Video standardmäßig mit Ton wiedergegeben werden soll.
Attribut type: Gibt den MIME-Typ der Videoquelle an
- Dadurch können Browser feststellen, ob sie das Video wiedergeben können.

Das Setup-Skript erstellt beide Beispieldateien für Videos lokal. Dadurch funktioniert das Beispiel, ohne auf einen externen Video-Host angewiesen zu sein. In einem realen Szenario würden Sie diese Pfade durch die Pfade zu Ihren eigenen Videodateien ersetzen.

HTML-Videoelement mit mehreren Quellen

Video-Poster als eigenes Vorschaubild einrichten

In diesem Schritt verwenden Sie das Attribut poster, um vor Beginn der Wiedergabe ein eigenes Vorschaubild für das Videoelement anzuzeigen. Laden Sie zunächst ein Beispielbild herunter, das als Poster verwendet wird.

Laden Sie das Beispielbild mit dem folgenden Befehl herunter:

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

Aktualisieren Sie nun die Datei ~/project/video-demo.html und ergänzen Sie das Attribut poster:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video with Custom Poster</title>
  </head>
  <body>
    <h1>Video with Custom Thumbnail</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Wichtige Punkte zum Attribut poster:

Zeigt ein eigenes Bild an, bevor die Videowiedergabe beginnt.
Ersetzt das erste Videobild in der Vorschau.
Trägt zu einer ansprechenderen Benutzeroberfläche bei.
Funktioniert mit lokalen und entfernten Bilddateien.

Das Posterbild dient als Vorschau des Videoinhalts. Es kann die Benutzererfahrung verbessern, weil es vor Beginn der Wiedergabe einen Eindruck vom Inhalt vermittelt.

Beispiel für ein Video-Poster als Vorschaubild

Attribute und Konfigurationen des Video-Tags erkunden

In diesem Schritt sehen Sie sich die verschiedenen Attribute und Konfigurationen des HTML5-Videoelements genauer an. Aktualisieren Sie die Datei ~/project/video-demo.html, um die erweiterten Einstellungen zu testen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Video Configurations</title>
  </head>
  <body>
    <h1>Exploring Video Tag Attributes</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Sehen wir uns die neuen Attribute an:

preload="metadata":
- Steuert, wie das Video vor der Wiedergabe geladen wird.
- Optionen: auto (gesamtes Video laden), metadata (nur Metadaten laden), none (nicht vorladen)
loop:
- Startet das Video nach dem Ende automatisch erneut.
- Nützlich für Hintergrundinhalte oder sich wiederholende Inhalte.
playsinline:
- Ermöglicht die Wiedergabe des Videos innerhalb der Seite auf mobilen Geräten.
- Verhindert den automatischen Vollbildmodus auf iOS-Geräten.

Zusätzliche nützliche Attribute, mit denen Sie experimentieren können:

autoplay: Startet die Videowiedergabe automatisch.
crossorigin: Verarbeitet Videoquellen aus anderen Ursprüngen.
disablepictureinpicture: Verhindert den Bild-in-Bild-Modus.

Tipps:

Nicht alle Browser unterstützen jedes Attribut.
Testen Sie Ihre Einstellungen immer auf verschiedenen Geräten und in verschiedenen Browsern.
Berücksichtigen Sie die Benutzererfahrung, wenn Sie autoplay oder loop verwenden.

Videowiedergabe verbessern

In diesem Schritt verbessern Sie die Videowiedergabe, indem Sie eigene Steuerelemente und Formatierungen hinzufügen. Erstellen Sie die neue Datei ~/project/video-enhanced.html mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Video Player</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="sample-video.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">Play/Pause</button>
        <button onclick="muteToggle()">Mute/Unmute</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

      function togglePlay() {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

Keine Sorge, wenn Sie noch keine Erfahrung mit CSS und JavaScript haben. Dieses Beispiel zeigt eine einfache Möglichkeit, eigene Videosteuerelemente zu erstellen und die Benutzeroberfläche des Videoplayers zu gestalten.

Die wichtigsten Verbesserungen in diesem Beispiel:

Eigene Videosteuerelemente:
- Erstellt ein eigenes Bedienfeld mit Schaltflächen für Wiedergabe/Pause und Stummschaltung.
- Fügt einen Lautstärkeregler für eine präzise Lautstärkeregelung hinzu.
CSS-Formatierung:
- Formatiert den Videocontainer und die Steuerelemente.
- Verwendet Flexbox für das Layout.
- Fügt den Steuerelementen einen halbtransparenten Hintergrund hinzu.
JavaScript-Interaktionen:
- togglePlay(): Steuert die Wiedergabe und das Pausieren des Videos manuell.
- muteToggle(): Schaltet die Stummschaltung des Videos um.
- changeVolume(): Passt die Videolautstärke programmgesteuert an.

Dieser Ansatz bietet beim Entwurf von Videoplayer-Oberflächen mehr Flexibilität als die standardmäßigen Steuerelemente des Browsers.

Beispiel für eine Oberfläche eines eigenen Videoplayers

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie Videoelemente mit dem Tag <video> in HTML einbetten und anpassen. Das Lab behandelte wichtige Techniken zum Erstellen interaktiver Videoplayer, darunter das Hinzufügen grundlegender Steuerelemente, das Angeben mehrerer Videoquellen und das Konfigurieren von Wiedergabeeinstellungen. Zu den vermittelten Fähigkeiten gehören das Festlegen von Videodimensionen, das Implementieren von Fallback-Inhalten, das Hinzufügen standardmäßiger Player-Steuerelemente sowie das Stummschalten des Videos und die Auswahl von Videoquellen.

Sie haben praktische Techniken zum Einbetten von HTML5-Videos angewendet, indem Sie ein Videoelement mit Standardfunktionen wie Wiedergabe-/Pausesteuerung, konfigurierbarer Breite und Höhe sowie Unterstützung für verschiedene Videoformate erstellt haben. Das Lab vermittelte praktische Erfahrung beim Verständnis der Attribute des Video-Tags und bei der Verbesserung der Benutzerinteraktion mit eingebetteten Videoinhalten durch verschiedene Konfigurationsoptionen.