wmpsites.com

HTML-Video auf voller Bildschirmgröße einbetten: Schritt-für-Schritt-Anleitung

Das Einbetten von Videos auf voller Bildschirmgröße in deinen HTML-Code ermöglicht es dir, immersive visuelle Erlebnisse für deine Benutzer zu schaffen. Folge dieser Schritt-für-Schritt-Anleitung, um in wenigen einfachen Schritten Videos auf voller Bildschirmgröße in deine Webseite einzubetten.

Schritt 1: Erstelle ein Video-Element

Beginne damit, ein <video>-Element zu deinem HTML-Code hinzuzufügen:

<video id="my-video" width="320" height="240">
  <source src="video.mp4" type="video/mp4">
</video>

Ersetze "video.mp4" durch die URL deines Videodateipfads. Du kannst mehrere <source>-Elemente für verschiedene Videoformate hinzufügen, um Browserkompatibilität sicherzustellen.

Schritt 2: CSS-Stile hinzufügen

Um die Größe deines Videos auf die volle Bildschirmgröße einzustellen, füge die folgenden CSS-Stile hinzu:

#my-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Schritt 3: JavaScript-Funktion für den Vollbildmodus

Um einen Vollbildmodus für dein Video zu aktivieren, benötigst du eine JavaScript-Funktion. Die folgende Funktion verwendet die HTML5-Vollbild-API:

function toggleFullscreen() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.getElementById("my-video").requestFullscreen();
  }
}

Schritt 4: Ereignis-Listener hinzufügen

Damit Benutzer dein Video in den Vollbildmodus schalten können, füge einen Ereignis-Listener zu deinem Video-Element hinzu:

<video id="my-video" ... onclick="toggleFullscreen()">

Schritt 5: Fertiges Snippet

Kombinieren wir nun alle Schritte:

<video id="my-video" width="320" height="240" onclick="toggleFullscreen()">
  <source src="video.mp4" type="video/mp4">
</video>

<style>
  #my-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<script>
  function toggleFullscreen() {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      document.getElementById("my-video").requestFullscreen();
    }
  }
</script>

Füge dieses Snippet zu deiner HTML-Datei hinzu und dein Video wird nun auf voller Bildschirmgröße abgespielt werden. Die Benutzer können es durch Klicken auf das Video in den Vollbildmodus schalten.

Video-Player zur Aktivierung des Vollbildmodus erstellen

Um ein Video auf voller Bildschirmgröße einzubetten, musst du zunächst einen Video-Player erstellen, der die Vollbildoption unterstützt. Hier sind die Schritte:

HTML-Code für den Video-Player erstellen

Erstelle eine HTML-Datei und füge den folgenden Code hinzu:

<video id="myVideo">
  <source src="path_to_video_file.mp4" type="video/mp4">
</video>

Dies erstellt einen einfachen Video-Player mit einem Quelle-Tag, das auf die Videodatei verweist.

CSS-Code für den Vollbildmodus hinzufügen

Füge den folgenden CSS-Code hinzu, um den Video-Player im Vollbildmodus anzuzeigen:

#myVideo {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}

Dieser Code stellt sicher, dass das Video die gesamte Browser-Fenstergröße ausfüllt und über anderen Elementen auf der Seite angezeigt wird.

Ereignis-Listener für den Vollbildmodus hinzufügen

Du kannst Ereignis-Listener hinzufügen, um die Vollbild-Option zu aktivieren. Hier ist ein Beispiel für JavaScript:

document.getElementById("myVideo").addEventListener("dblclick", function() {
  this.requestFullscreen();
});

Dieser Code weist dem Video-Player ein Doppelklick-Ereignis zu, das die requestFullscreen()-Methode aufruft, um den Vollbildmodus zu aktivieren.

Verwendung der Eigenschaft "controlsList"

Die Eigenschaft "controlsList" ermöglicht es dir, den Funktionsumfang des nativen HTML-Videoplayers anzupassen. Du kannst damit festlegen, welche Steuerelemente im Player angezeigt werden, einschließlich der Vollbildschaltfläche.

Deaktivierung der Standardeinstellungen

Standardmäßig enthält der HTML-Videoplayer eine Reihe von Steuerelementen, darunter die Vollbildschaltfläche. Wenn du diese Schaltfläche ausblenden möchtest, kannst du die Eigenschaft "controlsList" verwenden:

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

Dadurch wird der native HTML-Videoplayer mit allen Steuerelementen angezeigt, mit Ausnahme der Schaltfläche zum Herunterladen und der Vollbildschaltfläche.

Auswählen bestimmter Steuerelemente

Du kannst auch bestimmte Steuerelemente auswählen, die angezeigt werden sollen. Beispielsweise kannst du die Vollbildschaltfläche zusammen mit den Steuerelementen für Wiedergabe und Lautstärke anzeigen:

<video controlsList="play, volume, fullscreen" autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

Hinzufügen benutzerdefinierter Steuerelemente

Die Eigenschaft "controlsList" akzeptiert auch benutzerdefinierte Steuerelemente. Dies ermöglicht es dir, deine eigenen Steuerelemente zu erstellen, z. B. eine Schaltfläche zum Ändern der Videoqualität. Weitere Informationen zum Hinzufügen benutzerdefinierter Steuerelemente findest du in der HTML-Spezifikation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList

Aktivieren des Vollbildmodus mit Vollbild-API

Die Verwendung der Vollbild-API ermöglicht dir eine native Lösung zum Aktivieren des Vollbildmodus für dein Video. Diese API bietet eine standardisierte Methode zur Steuerung des Vollbildverhaltens in modernen Browsern.

Ermittlung der Unterstützung für die Vollbild-API

Bevor du die Vollbild-API verwenden kannst, musst du prüfen, ob sie vom Browser des Benutzers unterstützt wird. Du kannst dies mit folgendem JavaScript-Code tun:

if (document.fullscreenEnabled) {
  // Die Vollbild-API wird unterstützt.
}

Anfordern des Vollbildmodus mit der API

Um den Vollbildmodus anzufordern, rufe die requestFullscreen()-Methode für das Video-Element auf:

videoElement.requestFullscreen();

Beenden des Vollbildmodus

Zum Beenden des Vollbildmodus rufe die exitFullscreen()-Methode für das Video-Element auf:

document.exitFullscreen();

Behandeln von Vollbildereignissen

Du kannst auf Vollbildereignisse wie fullscreenchange und fullscreenerror lauschen, um Änderungen im Vollbildstatus zu erkennen:

videoElement.addEventListener('fullscreenchange', () => {
  // Der Vollbildstatus hat sich geändert.
});

Hinweise zur Vollbild-API

• Die Vollbild-API ist eine asynchrone Operation. Du solltest auf das fullscreenchange-Ereignis warten, um sicherzustellen, dass der Vollbildmodus erfolgreich aktiviert wurde.
• Einige Browser blockieren die Vollbild-API, wenn das Video nicht auf derselben Domain wie die Webseite gehostet wird. Stelle sicher, dass dein Video auf derselben Domain gehostet wird, um Probleme zu vermeiden.
• Es ist eine gute Praxis, die Vollbild-API nur zu aktivieren, wenn der Benutzer explizit danach gefragt hat, um unerwünschte Vollbildübergänge zu verhindern.

Vollbild für mobile Geräte aktivieren

Mobile Geräte stellen einzigartige Herausforderungen beim Aktivieren des Vollbildmodus für eingebettete Videos dar. Um ein optimales Seherlebnis auf Smartphones und Tablets zu gewährleisten, musst du zusätzliche Schritte unternehmen.

### Vollbild-API für mobile Geräte

Um den Vollbildmodus auf mobilen Geräten zu aktivieren, kannst du die Vollbild-API verwenden. Diese API bietet eine konsistente Möglichkeit, Videos auf dem gesamten Bildschirm anzuzeigen, unabhängig vom verwendeten Browser.

### Schritte zur Aktivierung des Vollbildmodus auf mobilen Geräten

1. Erstelle ein Element: Erstelle ein Element, z. B. eine Schaltfläche oder ein Symbol, auf das Benutzer klicken können, um den Vollbildmodus zu aktivieren.
2. Füge einen Event-Listener hinzu: Füge dem Element einen Event-Listener hinzu, der auf das Klickereignis reagiert.
3. Rufe die Vollbild-API auf: Rufe die requestFullscreen()-Methode des Videoelements aus dem Event-Listener auf. Dadurch wird der Browser aufgefordert, das Video im Vollbildmodus anzuzeigen.

### Beispiel zur Aktivierung des Vollbildmodus auf mobilen Geräten

<button onclick="toggleFullscreen()">Vollbild</button>

<script>
  function toggleFullscreen() {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      videoElement.requestFullscreen();
    }
  }
</script>

### Tipps für die Implementierung des Vollbildmodus auf mobilen Geräten

• Verwende responsives Design: Stelle sicher, dass der Videoplayer und die Vollbildschaltfläche auf allen Bildschirmgrößen ordnungsgemäß funktionieren.
• Behandle die Tastaturnavigation: Biete eine Möglichkeit für Benutzer, den Vollbildmodus über Tastaturkürzel zu verlassen.
• Teste auf verschiedenen Geräten: Teste den Vollbildmodus auf verschiedenen mobilen Geräten, um sicherzustellen, dass er wie erwartet funktioniert.

Beispiele für die Implementierung eines Vollbild-Videos

Es gibt verschiedene Möglichkeiten, ein Vollbild-Video in HTML einzubetten. Hier sind einige beliebte Implementierungen:

Einbetten eines Vollbild-Videos mit HTML5

<video width="100%" height="100%" controlsList="nodownload">
  <source src="..." type="..." />
</video>

Mit dieser Methode kannst du ein Vollbild-Video direkt in deine HTML-Seite einbetten. Die Eigenschaft controlsList="nodownload" entfernt die Download-Schaltfläche aus den Steuerelementen, um unerwünschte Downloads zu verhindern.

Verwenden eines Video-Players von Drittanbietern

Zahlreiche Video-Player von Drittanbietern wie Video.js, JW Player und Flowplayer bieten Vollbildfunktionen. Diese Player bieten erweiterte Funktionen wie Anpassung des Designs, Wiedergabelisten und Analysen.

Integration der Vollbild-API

Die Vollbild-API bietet eine standardisierte Möglichkeit, Videos im Vollbildmodus anzuzeigen. Du kannst diese API verwenden, um die Vollbildfunktion programmatisch zu aktivieren.

let video = document.getElementById("myVideo");

video.requestFullscreen();

Mobile Vollbildaktivierung

Um Videos auf mobilen Geräten im Vollbildmodus anzuzeigen, musst du möglicherweise eine etwas andere Methode verwenden. iOS-Geräte erfordern beispielsweise die Verwendung des WebKit-Vollbildmodus.

video.webkitEnterFullscreen();

Fehlerbehebung: Vollbildmodus funktioniert nicht

Wenn der Vollbildmodus nicht wie erwartet funktioniert, überprüfe Folgendes:

• Stelle sicher, dass dein Browser die Vollbild-API unterstützt.
• Vergewissere dich, dass das Video nicht in einem iframe eingebettet ist.
• Überprüfe, ob die Seite über die Berechtigung zur Anzeige im Vollbildmodus verfügt.
• Deaktiviere Ad-Blocker oder andere Erweiterungen, die den Vollbildmodus beeinträchtigen könnten.

Fehlerbehebung: Vollbildmodus funktioniert nicht

Es kann mehrere Gründe dafür geben, warum der Vollbildmodus für dein eingebettetes HTML-Video nicht funktioniert. Hier sind einige häufig auftretende Probleme und deren Lösungen:

Überprüfe die Browser-Kompatibilität

Stellsicher, dass dein verwendeter Browser den Vollbildmodus für HTML5-Videos unterstützt. Ältere Browser bieten diese Funktion möglicherweise nicht an.

Überprüfe die Videoquelle

Vergewissere dich, dass die Videoquelle gültig und zugänglich ist. Lade das Video in einen separaten Browser-Tab oder -Fenster, um sicherzustellen, dass es ordnungsgemäß abgespielt wird.

Überprüfe die Videoeigenschaften

• Kontrollliste: Stelle sicher, dass die Eigenschaft controlsList aktiviert und "fullscreen" enthält.
• Vollbild-API: Prüfe, ob du die Vollbild-API korrekt implementiert hast. Verwende den Befehl console.log() im Browser, um die Ausgabe zu überprüfen und mögliche Fehler zu identifizieren.

Überprüfe die Sicherheitseinstellungen

In einigen Browsern kann der Vollbildmodus aus Sicherheitsgründen deaktiviert sein. Überprüfe die Sicherheitseinstellungen deines Browsers und stelle sicher, dass die Option zum Aktivieren des Vollbildmodus aktiviert ist.

Überprüfe die Gerätekompatibilität

Der Vollbildmodus wird auf mobilen Geräten möglicherweise nicht wie erwartet funktionieren. Einige mobile Browser unterstützen möglicherweise keinen nativen Vollbildmodus oder erfordern zusätzliche Schritte zur Aktivierung. Überprüfe die Dokumentation deines Geräts, um mehr zu erfahren.

Probiere eine Alternative zum Vollbildmodus aus

Wenn der Vollbildmodus weiterhin nicht funktioniert, kannst du versuchen, eine Alternative wie den "Theatermodus" zu verwenden. Dieser Modus zoomt das Video zwar nicht auf die volle Bildschirmgröße, bietet aber dennoch ein immersives Erlebnis. Du kannst den Theatermodus mithilfe von JavaScript oder CSS implementieren.