如何在媒體剪輯之間轉換 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

本主題說明輪流使用至少兩個媒體元素來確保視訊或音訊剪輯間的順暢轉換。 位於前景的媒體標記可以播放目前的媒體串流，而另一個標記可以在背景預先載入下一個串流。

如果媒體剪輯是播放清單的一部分，則使用 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();
}