So wird’s gemacht: Wechseln zwischen Medienclips (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In diesem Thema wird beschrieben, wie Sie reibungslose Übergänge zwischen Video- oder Audioclips sicherstellen können, indem Sie mindestens zwei Medienelemente verwenden und zwischen ihnen wechseln. Das Medientag im Vordergrund kann den aktuellen Medienstream wiedergeben, während das andere Tag den nächsten Stream vorab im Hintergrund laden kann.

Wenn die Clips Teil einer Playlist sind, muss die Windows-Runtime-App mit JavaScript die Playlist verwalten und analysieren und jede einzelne Quelle zur Wiedergabe an das Video- oder Audiotag übergeben.

Wechseln zur nächsten Spur

Im folgenden Beispielskript wird zwischen Medienelementen gewechselt.

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