2

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

<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);
});
2
  • А потом если не активен пользователь? Снова первое, второе или какое-то третье? 31 дек 2016 в 6:02
  • @VadimOvchinnikov если остановка произошла на 1ом видео, то активация второго видео, если на 2ом - то должно 3е воспроизвестись и так по кругу
    – Atomrr
    31 дек 2016 в 6:14

1 ответ 1

4

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

<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);
    }
});
16
  • Спасибо большое, а можно еще узнать, как сделать интервал между воспроизведением? Что бы первое, допустим, заканчивалось и проходило какое то время прежде чем включилось второе? Буду очень признателен
    – Atomrr
    31 дек 2016 в 6:51
  • @Atomrr то есть когда первое заканчивалось, просто воспроизводилось второе? Когда пользователь ничего не делает, они должны дальше идти и по кругу? 31 дек 2016 в 6:58
  • Да да, именно так. И если активность пользователя так и не появилась - видео по кругу и между ними интервал в несколько секунд. Спасибо большое за ответ, очень помогаете
    – Atomrr
    31 дек 2016 в 7:01
  • 1
    Спасибо Вам большое, очень выручили! С наступающим! :)
    – Atomrr
    31 дек 2016 в 7:16
  • 1
    То, что нужно! Еще раз благодарю Вас!
    – Atomrr
    31 дек 2016 в 8:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.