Comment changer dynamiquement la source vidéo en HTML5 pour une lecture transparente de la liste de lecture ?

Changement dynamique de la source vidéo en HTML5

Problème :

Vous souhaitez créer un lecteur vidéo complet qui prend en charge la fonctionnalité de liste de lecture et permet aux utilisateurs de basculer entre les vidéos de manière transparente. Pour y parvenir, vous devez modifier dynamiquement la source de la balise vidéo HTML5 à l'aide de JavaScript. Cependant, vous rencontrez des problèmes dans Firefox où le lecteur vidéo fonctionne mal lors de l'utilisation de plusieurs fichiers balises et la méthode load().

Solution :

Pour résoudre ce problème, plutôt que d'utiliser plusieurs balises balises, vous pouvez déterminer le fichier vidéo approprié à l'aide de la fonction canPlayType() et définir l'attribut src du fichier

const video = document.querySelector('video');

// Check browser support for video formats
const supportedFormat = video.canPlayType('video/mp4') ? 'mp4' : 'webm';

// Set video source based on supported format
video.src = `my-video.${supportedFormat}`;

Cette approche élimine le besoin de plusieurs sources balises et assure la compatibilité entre différents navigateurs. Voici un exemple pour illustrer le changement de source dynamique :

const video = document.querySelector('video');
const playlist = ['video1.mp4', 'video2.webm', 'video3.mp4'];

// Current video index
let currentVideoIndex = 0;

// Function to load and play the next video in the playlist
const loadNextVideo = () => {
  if (currentVideoIndex < playlist.length) {
    const videoPath = playlist[currentVideoIndex];
    video.src = videoPath;
    video.load();
    video.play();
    currentVideoIndex++;
  } else {
    // Playlist completed, handle accordingly
  }
};

// Event listener for onended event
video.addEventListener('ended', loadNextVideo);

En modifiant dynamiquement l'attribut src et en utilisant des écouteurs d'événements pour contrôler la liste de lecture, vous pouvez obtenir une lecture transparente sans recourir à Flash ou à des lecteurs externes. Cette approche offre un plus grand contrôle et une plus grande flexibilité dans la gestion de votre contenu vidéo.

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!