Comment changer dynamiquement la source d'une balise vidéo HTML5 ?

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

Créer un lecteur vidéo universel nécessite d'aborder la problématique 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 sources les balises ont été confrontées à des limitations, cet article présente une méthode fiable utilisant un seul

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 du

Implémentation à l'aide de JavaScript Vanilla :

Voici un extrait de code montrant comment changer la source de la vidéo à l'aide de 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 liés à l'utilisation de plusieurs sources balises. Cela garantit également que la vidéo sera lue dans le format le plus approprié pris en charge par le navigateur.

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!