Wie kann ich eine Videoquelle in HTML5 dynamisch ändern und gleichzeitig die Browserkompatibilität beibehalten?

Dynamisches Ändern der Videoquelle in HTML5

Beim Bestreben, einen universellen Videoplayer zu erstellen, ist es wichtig, die Browserkompatibilität dynamisch zu berücksichtigen Ändern der Videoquelle.

Das Problem

Verwendung mehrerer Tags innerhalb eines

Lösung

Um dieses Problem zu beheben, wird empfohlen, ein einzelnes src-Attribut innerhalb des

Beispielimplementierung

Der folgende JavaScript-Code demonstriert den Prozess der dynamischen Änderung die Videoquelle mithilfe des src-Attributs und der Funktion canPlayType():

var video = document.getElementById('video');
var source = document.createElement('source');
var supported = video.canPlayType('video/mp4');
if (supported == '' || supported == 'no') {
  supported = video.canPlayType('video/webm');
}
if (supported != '' && supported != 'no') {
  source.setAttribute('src', 'path/to/video.' + supported.replace('video/', ''));
  source.setAttribute('type', supported);
  video.appendChild(source);
  video.load();
  video.play();
} else {
  alert('Video file not supported.');
}

Dieser Ansatz vereinfacht den Quellenwechselprozess und stellt sicher Browserübergreifende Kompatibilität und sorgt für ein konsistentes Videowiedergabeerlebnis.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Videoquelle in HTML5 dynamisch ändern und gleichzeitig die Browserkompatibilität beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!