Следующее видео jquery

544

03 января 2017, 00:22

При отсутствии пользователя включается видео. При активности - выключается. Воспроизводится первое видео, пользователь кликает и видео выключается, пользователь снова не активен и включается уже ВТОРОЕ видео. Если второе воспроизводилось, то включается ТРЕТЬЕ и так последовательно по кругу. Как сделать такую последовательность? Так же нужно сделать интервал между воспроизведением. Что бы первое, допустим, заканчивалось и проходило какое то время прежде чем включилось второе. Спасибо.

<video id="video" autoplay="">
    <source class="vidActive" src="">
    <source src="">
    <source src="">
</video>

JS:

idleTimer = null;
$("#video").prop("muted", true);
$(document).bind('mousemove keydown scroll', function() {
    clearTimeout(idleTimer);
    if(idleState == true){ 
         $(".video-container").css("display", "none");
         $("#video").prop("muted", true);
    }
    idleState = true;
    idleTimer = setTimeout(function() { 
        $(".video-container").css("display", "block");
        $("#video").prop("muted", false);
        idleState = true;
        return false;
    }, idleWait);
});

Answer 1

Задайте один источник видео для видео

<video id="video" autoplay="">
    <source class="vidActive" src="">
</video>

Берёте массив строк с src нужных видео. Также переменную index, которая будет хранить индекс.

idleTimer = null;
// к примеру, есть такой массив
var videoSources = [ "videos/vasya.mp4", "videos/kostya.mp4", "videos/petya.mp4" ];
var index = 0;
$("#video").prop("muted", true);
$(document).bind('mousemove keydown scroll', function() {
    clearTimeout(idleTimer);
    if (idleState == true) {
         $(".video-container").css("display", "none");
         $("#video").prop("muted", true);
    }
    idleState = true;
    idleTimer = setTimeout(function() {
        $("#video source").attr("src", videoSources[index]);
        $("#video")[0].load();
        index++;
        // Для проигрывания видео по кругу
        if (index == videoSources.length) index = 0;
        $(".video-container").css("display", "block");
        $("#video").prop("muted", false);
        idleState = true;
        return false;
    }, idleWait);
});

Для проигрывания видео по кругу нужна обработка для $("#video") события ended:

var idleState = true;
var idleTimer = null;
// к примеру, есть такой массив
var videoSources = [ "videos/vasya.mp4", "videos/kostya.mp4", "videos/petya.mp4" ];
var index = 0;
$("#video").prop("muted", true);
// вынесем в отдельную функцию проигрывание следующего видео
function playNextVideo() {
    $("#video source").attr("src", videoSources[index]);
    $("#video")[0].load();
    index++;
    // Для проигрывания видео по кругу
    if (index == videoSources.length) index = 0;
}
$(document).bind('mousemove keydown scroll', function() {
    clearTimeout(idleTimer);
    if (idleState) {
         $(".video-container").css("display", "none");
         $("#video").prop("muted", true);
    }
    idleState = true;
    idleTimer = setTimeout(function() {
        playNextVideo();
        $(".video-container").css("display", "block");
        $("#video").prop("muted", false);
        idleState = true;
        return false;
    }, idleWait);
});
$("#video").bind("ended", function() {
    if (idleState) {
        // можете установить другой интервал
        setTimeout(playNextVideo, 500);
    }
});