Ändern der Quelle eines HTML5-Video-Tags: Eine umfassende Lösung

Bei der Erstellung eines universellen Videoplayers muss das Problem der dynamischen Änderung der Quelle angegangen werden des Videos. Dadurch können Benutzer zwischen Videos in einer Playlist wechseln. Während frühere Ansätze mit mehreren -Tags Einschränkungen aufwiesen, stellt dieser Artikel eine zuverlässige Methode vor, die ein einzelnes -Attribut verwendet.

Identifizieren des Dateityps mit canPlayType():

Um den geeigneten Dateityp für das Video zu bestimmen, können wir die Funktion canPlayType() verwenden. Diese Funktion gibt eine Zeichenfolge zurück, die den Grad der Unterstützung des Browsers für einen bestimmten Medientyp angibt. Zum Beispiel:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

Basierend auf den Ergebnissen von canPlayType() können wir das src-Attribut des

Implementierung mit Vanilla JavaScript:

Hier ist ein Codeausschnitt, der die Vorgehensweise zeigt Ändern Sie die Quelle des Videos mit Vanilla-JavaScript:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

Dieser Ansatz ermöglicht einen dynamischen Quellenwechsel ohne die Nachteile der Verwendung mehrerer -Tags. Es stellt außerdem sicher, dass das Video im am besten geeigneten Format abgespielt wird, das vom Browser unterstützt wird.