Поделиться через


Как выполнять переход между клипами мультимедиа (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В этом разделе мы расскажем о том, как обеспечить плавные переходы между видео- или аудиоклипами, если у вас не меньше двух элементов мультимедиа и вы переключаетесь между ними. Один тег мультимедиа на переднем плане может воспроизводить текущий поток мультимедиа, в то время как другой тег предварительно загружает следующий поток в фоновом режиме.

Если клипы мультимедиа входят в список воспроизведения, то приложение среды выполнения Windows на JavaScript должно будет управлять этим списком, анализировать его и передавать каждый отдельный источник в видеотег или звуковой тег для воспроизведения.

Переход к элементу "Следующая дорожка"

Вот образец сценария, который позволяет переключаться между элементами мультимедиа.


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