Comment modifier dynamiquement les sources vidéo en HTML5 sans problèmes de compatibilité du navigateur ?

Changement dynamique des sources vidéo dans HTML5

Description du problème

Lors de la tentative de changement dynamique des sources vidéo dans un fichier HTML5

Solution

Pour surmonter ce problème, envisagez l'approche suivante qui utilise la fonction canPlayType() :

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();
}

Explication

Cette solution implique de supprimer les fichiers balises, en créant une nouvelle avec l'URL souhaitée et en déterminant le type MIME approprié à l'aide de canPlayType(). La nouvelle source est ensuite ajoutée à l'élément vidéo et la vidéo est rechargée. Cette approche fonctionne efficacement dans Chrome et Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!