如何在媒体剪辑之间进行转换 (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();
}