Video in HTML einbetten und anpassen

Einführung

In diesem Lab werden die Teilnehmer lernen, wie man Videoelemente in HTML mithilfe des leistungsstarken <video>-Tags einbettet und anpasst. Das Lab behandelt essentielle Techniken zur Erstellung interaktiver Videoplayer, einschließlich der Hinzufügung von Steuerelementen, der Konfiguration von Videquellen, der Implementierung benutzerdefinierter Vorschaubilder und der Erkundung verschiedener Video-Tag-Attribute, um die Wiedergabeerfahrung zu verbessern.

Durch einen schrittweisen Ansatz werden die Lernenden praktische Fähigkeiten in der HTML5-Videoeinbettung erwerben, beginnend mit der Erstellung einfacher Videoelemente bis hin zu fortgeschrittenen Konfigurationen. Die Teilnehmer werden entdecken, wie man mehrere Videquellen hinzufügt, Wiedergabeeinstellungen steuert, benutzerdefinierte Vorschaubilder festlegt und direkt auf Webseiten ansprechendere und benutzerfreundlichere Videoerlebnisse schafft.

Erstellen eines einfachen Videoelements mit Steuerelementen

In diesem Schritt lernen Sie, wie Sie ein einfaches Videoelement in HTML mit essentiellen Steuerelementen erstellen. HTML5 bietet ein einfaches und leistungsstarkes <video>-Tag, das es Ihnen ermöglicht, Videos direkt in Webseiten einzubetten.

Zunächst erstellen wir eine HTML-Datei, um die Videoeinbettung zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens video-demo.html im Verzeichnis ~/project.

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>

Lassen Sie uns die wichtigsten Komponenten des Videoelements analysieren:

<video>-Tag: Der Hauptcontainer zur Einbettung von Videoinhalten
controls-Attribut: Fügt die Standardsteuerelemente des Videoplayers hinzu (Abspielen, Pausieren, Lautstärke)
width- und height-Attribute: Legen die Abmessungen des Videoplayers fest
Text innerhalb des Tags: Fallback-Nachricht für Browser, die HTML5-Videos nicht unterstützen

Das controls-Attribut ist von entscheidender Bedeutung, da es den Benutzern Standard-Wiedergabesteuerelemente wie Abspielen, Pausieren, Lautstärkeeinstellung und Vollbildmodus zur Verfügung stellt.

Anmerkungen: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut.

Hinzufügen einer Videquelle und Stummschalten der Wiedergabe

In diesem Schritt lernen Sie, wie Sie Videquellen zu Ihrem HTML-Videoelement hinzufügen und seinen anfänglichen Wiedergabezustand steuern. Wir werden die vorherige video-demo.html-Datei ändern, um Videquellen hinzuzufügen und zu zeigen, wie man das Video standardmäßig stumm schaltet.

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

<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Lassen Sie uns die neuen Ergänzungen analysieren:

<source>-Tags: Ermöglichen es Ihnen, mehrere Videoformate für die Browserübergreifende Kompatibilität anzugeben
- Die erste Quelle ist eine MP4-Datei
- Die zweite Quelle ist eine WebM-Datei (Alternative Format)
- Browser verwenden das erste unterstützte Format
muted-Attribut: Stumm schaltet das Video automatisch beim Laden
- Nützlich, um unerwartete Audiowiedergabe zu vermeiden
- Kann entfernt werden, wenn Sie standardmäßig Ton haben möchten
type-Attribut: Gibt den MIME-Typ der Videquelle an
- Hilft den Browsern zu bestimmen, ob sie das Video abspielen können

Die Beispiel-Video-URLs sind öffentlich zugängliche Beispielvideos, die mehrere Quellenformate demonstrieren. In einer realen Anwendung würden Sie diese durch die Pfade zu Ihren eigenen Videodateien ersetzen.

Implementieren eines Video-Posters für benutzerdefinierte Vorschaubilder

In diesem Schritt lernen Sie, wie Sie das poster-Attribut verwenden, um ein benutzerdefiniertes Vorschaubild zu Ihrem Videoelement hinzuzufügen, bevor die Wiedergabe beginnt. Zunächst laden wir ein Beispielbild herunter, das wir als Poster verwenden können.

Verwenden Sie den folgenden Befehl, um ein Beispielbild herunterzuladen:

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

Jetzt aktualisieren Sie die Datei ~/project/video-demo.html mit dem poster-Attribut:

<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Wichtige Punkte zum poster-Attribut:

Zeigt ein benutzerdefiniertes Bild an, bevor die Video-Wiedergabe beginnt
Ersetzt den ersten Videobildschirm als Vorschau
Hilft, eine ansprechendere Benutzeroberfläche zu erstellen
Funktioniert mit lokalen oder Remote-Bilddateien

Das Posterbild bietet eine Vorschau des Videoinhalts und kann die Benutzererfahrung verbessern, indem es Kontext vor Beginn der Wiedergabe gibt.

Beispiel für ein Video-Poster-Vorschaubild

Erkunden von Video-Tag-Attributen und -Konfigurationen

In diesem Schritt werden Sie tiefer in die verschiedenen Attribute und Konfigurationen des HTML5-Videoelements eintauchen. Aktualisieren Sie die Datei ~/project/video-demo.html, um diese erweiterten Einstellungen zu erkunden:

<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Lassen Sie uns die neuen Attribute erkunden:

preload="metadata":
- Steuert, wie das Video vor der Wiedergabe geladen wird
- Optionen: auto (gesamtes Video laden), metadata (nur Metadaten laden), none (nicht vorladen)
loop:
- Lässt das Video automatisch wiederholen, wenn es endet
- Nützlich für Hintergrund- oder wiederholende Inhalte
playsinline:
- Ermöglicht die Inline-Wiedergabe von Videos auf Mobilgeräten
- Verhindert den automatischen Vollbildmodus auf iOS-Geräten

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

autoplay: Startet die Video-Wiedergabe automatisch
crossorigin: Behandelt cross-origin-Videquellen
disablepictureinpicture: Verhindert den Picture-in-Picture-Modus

Pro-Tipps:

Nicht alle Browser unterstützen jedes Attribut
Testen Sie immer auf verschiedenen Geräten und Browsern
Berücksichtigen Sie die Benutzererfahrung, wenn Sie Autoplay oder Loop verwenden

Verbessern der Video-Wiedergabeerfahrung

In diesem Schritt lernen Sie, wie Sie die Video-Wiedergabeerfahrung verbessern können, indem Sie benutzerdefinierte Steuerelemente hinzufügen und das Erscheinungsbild gestalten. Erstellen Sie eine 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.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>

Machen Sie sich keine Sorgen, wenn Sie neu in CSS und JavaScript sind. Dieses Beispiel zeigt eine einfache Möglichkeit, benutzerdefinierte Videosteuerungen zu erstellen und die Benutzeroberfläche des Videoplayers zu gestalten.

Wichtige Verbesserungen in diesem Beispiel:

Benutzerdefinierte Videosteuerungen:
- Erstellen Sie ein benutzerdefiniertes Steuerpanel mit Play/Pause- und Stummschalt-Tasten
- Fügen Sie einen Lautstärkeregler hinzu, um die Lautstärke präzise zu steuern
CSS-Gestaltung:
- Gestalten Sie den Videocontainer und die Steuerungen
- Verwenden Sie Flexbox für das Layout
- Fügen Sie den Steuerungen einen halbtransparenten Hintergrund hinzu
JavaScript-Interaktionen:
- togglePlay(): Steuern Sie die Video-Wiedergabe/Pause manuell
- muteToggle(): Schalten Sie die Stummschaltung des Videos um
- changeVolume(): Stellen Sie die Videolautstärke programmgesteuert ein

Dieser Ansatz gibt Ihnen mehr Flexibilität bei der Gestaltung von Videoplayer-Benutzeroberflächen im Vergleich zu den Standard-Browsersteuerungen.

Beispiel für eine benutzerdefinierte Videoplayer-Benutzeroberfläche

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man Videoelemente mithilfe des <video>-Tags in HTML einbettet und anpasst. Das Lab hat essentielle Techniken zur Erstellung interaktiver Videoplayer behandelt, einschließlich dem Hinzufügen von grundlegenden Steuerungen, der Angabe mehrerer Videquellen und der Konfiguration von Wiedergabeeinstellungen. Zu den entwickelten Schlüsselkompetenzen gehören das Festlegen von Videodimensionen, die Implementierung von Fallback-Inhalten, das Hinzufügen von Standardspielersteuerungen sowie die Verwaltung der Stummschaltung von Videos und die Auswahl von Quellen.

Die Teilnehmer haben praktische Techniken zum Einbetten von HTML5-Videos erkundet, indem sie ein Demonstrations-Videoelement mit Standardfunktionen wie Play/Pause-Steuerungen, Breiten- und Höhenkonfiguration sowie Unterstützung für verschiedene Videoformate erstellt haben. Das Lab hat praktische Erfahrungen in der Erforschung von Video-Tag-Attributen und der Verbesserung der Benutzerinteraktion mit eingebetteten Videoinhalten über verschiedene Konfigurationsoptionen vermittelt.