Comment passer d’un clip multimédia à un autre (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique décrit une façon d’assurer des transitions fluides entre les clips vidéo ou audio en utilisant au moins deux éléments multimédias et en alternant les deux. La balise media au premier plan peut lire le flux multimédia actuel, tandis que l’autre balise peut précharger le prochain flux à l’arrière-plan.

Si les clips multimédias font partie d’une playlist, une application Windows Runtime en JavaScript doit gérer cette playslist, l’analyser, puis transmettre chaque source individuelle à la balise vidéo ou audio à des fins de lecture.

Passage à la piste suivante

Voici un exemple de script qui affiche des éléments multimédias en alternance.


var audioPlayList = ['01.mp3', '02.mp3'];
var currentTrack = 0;
var trackBeingCued = false;

var currAudioTag;
var nextAudioTag;

function initTags() {
    currAudioTag = document.getElementById("audio1");
    nextAudioTag = document.getElementById("audio2");
    currAudioTag.addEventListener("ended", SwitchToNextTrack);
    nextAudioTag.addEventListener("ended", SwitchToNextTrack);
}


function CueNextTrack() {
    if (trackBeingCued) return;
    nextAudioTag.src = audioPlayList[(currentTrack + 1) % audioPlayList.length];
    trackBeingCued = true;
}

function SwitchToNextTrack() {
    initTags();
    trackBeingCued = false;
    var tmp = currAudioTag;
    currAudioTag = nextAudioTag;
    nextAudioTag = tmp;
    currAudioTag.play();
    currentTrack = currentTrack + 1;
    CueNextTrack();
}