Wie kann man Videoquellen in HTML5 dynamisch ändern, ohne Probleme mit der Browserkompatibilität?

Videoquellen in HTML5 dynamisch ändern

Problembeschreibung

Beim Versuch, Videoquellen in einem HTML5-

Lösung

Um dieses Problem zu lösen, betrachten Sie den folgenden Ansatz, der die Funktion canPlayType() verwendet:

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

function changeSource(newUrl) {
  // Remove existing `<source>` tags
  while (video.children.length > 0) {
    video.removeChild(video.children[0]);
  }

  // Create a new `<source>` tag with the new URL
  const source = document.createElement('source');
  source.src = newUrl;

  // Determine the appropriate MIME type using `canPlayType()`
  const mimeType = video.canPlayType('video/mp4') ? 'video/mp4' : 'video/webm';
  source.type = mimeType;

  // Append the new `<source>` tag to the video element
  video.appendChild(source);

  // Reload the video
  video.load();
  video.play();
}

Erklärung

Diese Lösung beinhaltet das Entfernen vorhandener Tags, Erstellen eines neuen mit der gewünschten URL und Bestimmen des geeigneten MIME-Typs mit canPlayType(). Anschließend wird die neue Quelle an das Videoelement angehängt und das Video neu geladen. Dieser Ansatz funktioniert sowohl in Chrome als auch in Firefox effektiv.

Das obige ist der detaillierte Inhalt vonWie kann man Videoquellen in HTML5 dynamisch ändern, ohne Probleme mit der Browserkompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!