Cómo realizar una transición entre clips multimedia (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este tema se describe una forma de garantizar que las transiciones entre los clips de audio y vídeo son fluidas. Para ello, solo hay que tener dos elementos multimedia y alternar entre ambos. La etiqueta multimedia en primer plano puede reproducir la secuencia multimedia actual, mientras que la otra puede cargar previamente la siguiente secuencia en segundo plano.

Si los clips multimedia forman parte de una lista de reproducción, una aplicación de Windows en tiempo de ejecución con JavaScript deberá administrar dicha lista, analizarla y pasar cada uno de los orígenes individuales a la etiqueta de vídeo o audio para su reproducción.

Cambiar a la pista siguiente

Aquí tienes un script de ejemplo que alterna entre elementos multimedia.

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