Come effettuare la transizione tra clip multimediali (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

In questo argomento viene descritto un modo per garantire transizioni uniformi tra clip video o audio utilizzando almeno due elementi multimediali e alternandoli. Il tag media in primo piano può riprodurre il flusso multimediale corrente, mentre l'altro tag può precaricare il flusso successivo in background.

Se le clip multimediali fanno parte di una playlist, l'app di Windows Runtime scritta in JavaScript dovrà gestire la playlist, analizzarla e passare ogni singola origine al tag video o audio per la relativa riproduzione.

Passaggio alla traccia successiva

Ecco uno script di esempio che alterna la riproduzione di elementi multimediali.

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();
}