Como fazer a transição entre clipes de mídia (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este tópico descreve uma maneira de garantir transições facilitadas entre clipes de áudio e vídeo usando pelo menos dois elementos de mídia e alternando entre eles. A marca de mídia em primeiro plano pode reproduzir o fluxo de mídia atual, enquanto a outra marca pode pré-carregar o próximo fluxo em tela de fundo.

Se os clipes de mídia fizerem parte de uma lista de reprodução, um aplicativo do Tempo de Execução do Windows precisará gerenciar a lista de reprodução, analisá-la e passar cada origem para a marca de vídeo ou de áudio, para reprodução.

Alternando para a faixa seguinte

Aqui está um exemplo de script que alterna entre elementos de mídia.

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