Comment modifier dynamiquement une source vidéo en HTML5 tout en conservant la compatibilité du navigateur ?

Changement dynamique de la source vidéo en HTML5

Dans la poursuite de la création d'un lecteur vidéo universel, il est crucial de prendre en compte la compatibilité du navigateur lorsqu'il est dynamique changer la source vidéo.

Le problème

L'utilisation de plusieurs sources balises dans une La balise pose des problèmes de compatibilité dans Firefox et d’autres navigateurs. Lorsque la méthode load() est appelée après avoir défini les URL source dans plusieurs fichiers balises, la lecture vidéo s'interrompt dans certains navigateurs.

Solution

Pour surmonter ce problème, il est recommandé d'utiliser un seul attribut src dans le fichier

Exemple de mise en œuvre

Le code JavaScript suivant illustre le processus de modification dynamique la source vidéo à l'aide de l'attribut src et de la fonction 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.');
}

Cette approche simplifie le processus de changement de source, garantit la compatibilité entre navigateurs et offre une expérience de lecture vidéo 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!