Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавить cookie к play/pause фонового видео (https://javascript.ru/forum/misc/78213-dobavit-cookie-k-play-pause-fonovogo-video.html)

noid 10.08.2019 19:01
Добавить cookie к play/pause фонового видео
 
Доброго времени суток. Не могу разобраться с cookie, да и не хочу особо вникать. Мне просто нужен рабочий код, донатик за рабочее решение скину. Код:
$('.video-control').on('click', function () {
    $(this).toggleClass('video-control_active');
    var currentVideo = document.querySelector('.play');
    if (currentVideo.paused) {
        currentVideo.play();
    } else {
        currentVideo.pause()
    }
})

Нужно, чтоб запоминал вкл/выкл после перезагрузки страницы. Jquery подключена. Заранее благодарен :)

рони 10.08.2019 19:20
noid,
$(function() {
var currentVideo = document.querySelector('.play');
var paused = 'paused' in localStorage;
if(paused  == 'false') {
  currentVideo.play();
  $('.video-control').addClass('video-control_active');
}
$('.video-control').on('click', function () {
    $(this).toggleClass('video-control_active');
    if (currentVideo.paused) {
        currentVideo.play();
        localStorage.paused = 'false'
    } else {
        currentVideo.pause();
        localStorage.paused = 'true'
    }
})
});

noid 11.08.2019 19:04
Цитата:
Сообщение от рони (Сообщение 511480)
noid,
$(function() {
var currentVideo = document.querySelector('.play');
var paused = 'paused' in localStorage;
if(paused  == 'false') {
  currentVideo.play();
  $('.video-control').addClass('video-control_active');
}
$('.video-control').on('click', function () {
    $(this).toggleClass('video-control_active');
    if (currentVideo.paused) {
        currentVideo.play();
        localStorage.paused = 'false'
    } else {
        currentVideo.pause();
        localStorage.paused = 'true'
    }
})
});
Спасибо, в локалсторадж пишет. Я должен был сразу весь код выложить, мой бок. После перезагрузки страницы видео запускается, даже при сохраненном TRUE в сторадже. Видимо очередность видео мешает. Скинул весь js-ник в личку

рони 11.08.2019 20:41
noid,
playlist();

	$(function() {
	var currentVideo = document.querySelector('.play');
	var paused = 'paused' in localStorage;
	if(paused  == 'false') {
	  currentVideo.play();
	  $('.video-control').addClass('video-control_active');
	}
	$('.video-control').on('click', function () {
	    $(this).toggleClass('video-control_active');
	    if (currentVideo.paused) {
	        currentVideo.play();
	        localStorage.paused = 'false'
	    } else {
	        currentVideo.pause();
	        localStorage.paused = 'true'
	    }
	})
	});

заменить на
if(localStorage.paused !== 'true') playlist();
    $('.video-control').on('click', function () {
        $(this).toggleClass('video-control_active');
        var currentVideo = document.querySelector('.play');
        if (currentVideo  && currentVideo.paused) {
            currentVideo.play();
            localStorage.paused = 'false'
        } else {
            currentVideo.pause();
            localStorage.paused = 'true'
        }
    })

noid 11.08.2019 22:49
Цитата:
Сообщение от рони (Сообщение 511512)
noid,
... заменить на
if(localStorage.paused !== 'true') playlist();
    $('.video-control').on('click', function () {
        $(this).toggleClass('video-control_active');
        if (currentVideo.paused) {
            currentVideo.play();
            localStorage.paused = 'false'
        } else {
            currentVideo.pause();
            localStorage.paused = 'true'
        }
    })
Так перестало останавливаться видео и ничего не пишется в сторадж, но класс 'video-control_active' тоглится. Попробовал так:
if(localStorage.paused !== 'true') playlist();

	$(function() {
	var currentVideo = document.querySelector('.play');
	var paused = 'paused' in localStorage;
	if(paused  == 'false') {
	  currentVideo.play();
	  $('.video-control').addClass('video-control_active');
	}
	$('.video-control').on('click', function () {
	    $(this).toggleClass('video-control_active');
	    if (currentVideo.paused) {
	        currentVideo.play();
	        localStorage.paused = 'false'
	    } else {
	        currentVideo.pause();
	        localStorage.paused = 'true'
	    }
	})
	});

В сторадж пишется и видео реагирует на кнопку. Перезагружаю страницу из состояния:

1. Видео на паузе, сторадж=true -> в итоге видео висит на паузе и не реагирует на кнопку play. И сторадж не обновляется.

2. Перезагружаю, когда видео проигрывается и сторадж=false -> и видео и сторадж работают как надо

рони 11.08.2019 23:39
noid,
пробуйте, заменить на
if(localStorage.paused !== 'true') playlist();
    else {
        videos[currPlayVideo].classList.add('play');
        videos[currPlayVideo].onended = function () {
            playNextVideo();
        };
        $('.video-control').remove('video-control_active');
    };
    $('.video-control').on('click', function () {
        var currentVideo = document.querySelector('.play');
        $(this).toggleClass('video-control_active');
        if (currentVideo.paused) {
            currentVideo.play();
            localStorage.paused = 'false'
        } else {
            currentVideo.pause();
            localStorage.paused = 'true'
        }
    })

noid 12.08.2019 13:52
Цитата:
Сообщение от рони (Сообщение 511517)
noid,
пробуйте, заменить на
if(localStorage.paused !== 'true') playlist();
    else {
        videos[currPlayVideo].classList.add('play');
        videos[currPlayVideo].onended = function () {
            playNextVideo();
        };
        $('.video-control').remove('video-control_active');
    };
    $('.video-control').on('click', function () {
        var currentVideo = document.querySelector('.play');
        $(this).toggleClass('video-control_active');
        if (currentVideo.paused) {
            currentVideo.play();
            localStorage.paused = 'false'
        } else {
            currentVideo.pause();
            localStorage.paused = 'true'
        }
    })
Отлично! Все работает, за исключением состояния (внешнего вида) кнопки. Подскажите пожалуйста, как добавить проверку - если localStorage.paused == true -> тогда addClass('video-control_active') при загрузке страницы?

рони 12.08.2019 14:13
noid,
так может строка 7 ненужна?

noid 12.08.2019 14:26
Цитата:
Сообщение от рони (Сообщение 511550)
noid,
так может строка 7 ненужна?
По верстке нужна, но я уже вроде нашел решение. Добавил кусок, теперь как надо:
if (localStorage.getItem("paused") == "true") {
	  getFav = localStorage.paused;
	  $(".video-control").addClass('video-control_active');
	}


Спасибо Вам за помощь!


Часовой пояс GMT +3, время: 03:51.