미디어 클립 간을 전환하는 방법(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 항목에서는 최소 두 개의 미디어 요소를 번갈아 사용하면서 비디오 또는 오디오 클립 간에 매끄럽게 전환할 수 있는 방법을 설명합니다. 포그라운드의 미디어 태그가 현재 미디어 스트림을 재생하는 동안 다른 태그는 백그라운드에서 다음 스트림을 미리 로드할 수 있습니다.

미디어 클립이 재생 목록에 포함된 경우에는 JavaScript로 작성한 Windows 런타임 앱이 재생 목록을 관리하고, 재생 목록을 구문 분석하고, 각 개별 원본을 동영상 또는 오디오 태그에 전달하여 재생해야 합니다.

다음 트랙으로 전환

다음은 미디어 요소 간을 대체하는 예제 스크립트입니다.

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