Comment changer dynamiquement de sources vidéo HTML5 tout en conservant la compatibilité du navigateur ?

Commutation dynamique de source pour la vidéo HTML5

L'utilisation de l'élément vidéo HTML5 offre une solution polyvalente pour la lecture vidéo sur diverses plates-formes. Cependant, intégrer une playlist ou un menu nécessite de changer dynamiquement la source vidéo. En mettant naïvement à jour le fichier peuvent sembler simples, la compatibilité des navigateurs pose des problèmes.

Plus précisément, dans Firefox, la mise à jour de plusieurs balises Les balises utilisant la méthode load() terminent brusquement le lecteur vidéo. Par conséquent, une approche plus fiable consiste à utiliser exclusivement l'attribut src dans le fichier

Solution JavaScript Vanilla

Pour changer dynamiquement de source vidéo, considérez l'extrait JavaScript Vanilla suivant :

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

source.setAttribute('src', 'video-url.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();

setTimeout(() => {
  video.pause();

  source.setAttribute('src', 'video-url.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
}, 3000);

Considérations de compatibilité

Bien que la solution fournie fonctionne bien dans Chrome, la compatibilité avec d'autres navigateurs doit être vérifiée. En outre, envisagez d'intégrer une gestion spécifique au navigateur pour garantir une expérience utilisateur cohérente.

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!