Changer la source d'une balise vidéo HTML5 : une solution complète

Créer un lecteur vidéo universel nécessite de résoudre le problème du changement dynamique de la source de la vidéo. Cela permet aux utilisateurs de basculer entre les vidéos d'une liste de lecture. Alors que les approches précédentes utilisant plusieurs balises rencontraient des limites, cet article présente une méthode fiable utilisant un seul attribut .

Identification du type de fichier à l'aide de canPlayType() :

Pour déterminer le type de fichier approprié pour la vidéo, nous pouvons utiliser la fonction canPlayType(). Cette fonction renvoie une chaîne indiquant le niveau de prise en charge du navigateur pour un type de média donné. Par exemple :

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

Sur la base des résultats de canPlayType(), nous pouvons définir dynamiquement l'attribut src de la balise

Implémentation à l'aide de Vanilla JavaScript :

Voici un extrait de code montrant comment modifier la source du vidéo utilisant JavaScript Vanilla :

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

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

Cette approche permet un changement de source dynamique sans les inconvénients de l'utilisation de plusieurs balises . Cela garantit également que la vidéo sera lue dans le format le plus approprié pris en charge par le navigateur.