Почему может переставать работать скрипт для кастомной кнопки управления видео внутри свайпера?

Question

[Kardamon90]

Прописал для сайта кастомную кнопку управления видео по инструкции отсюда: https://developer.mozilla.org/en-US/docs/Web/Guide...
Видео находится внутри слайда свайпера. Все работает отлично и так как задумано, но до того как слайд перелистнется - после возращения к слайду с видео скрипт уже не срабатывает и кнопка перестает выполнять свою задачу, а видео просто останавливается.
Сам код:

<div class="banner__item swiper-slide">
	<figure id="videoContainer">
		<video id="video" loop muted preload="metadata" poster="vid/poster.jpg">
			<source src="vid/videoplayback.webm" type="video/webm">
			<source src="vid/videoplayback.mp4" type="video/mp4">
		</video>
		<ul id="video-controls" class="controls">
		         <li class="play-pause"><button class="play" id="play-pause" type="button">Play/Pause</button></li>
                </ul>
	</figure>
</div>

var supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
	var videoContainer = document.getElementById('videoContainer');
	var video = document.getElementById('video');
	var videoControls = document.getElementById('video-controls');

	video.controls = false;
	videoControls.style.display = 'block';
	var mute = document.getElementById('mute')
	var playpause = document.getElementById('play-pause')

	playpause.addEventListener('click', function (e) {
		if (video.paused || video.ended) video.play();
		else video.pause();
	});
}

Answer 1

[historydev]

Измените класс controls на любой другой и посмотрите пропала ли ошибка

Comments

[Kardamon90]

Как я только что понял, дело в другом. Из-за того что у меня у свайпера стоит параметр loop:true, слайды клонируются, а кнопка же работает только в оригинальном слайде. Но при этом, если клонированные слайды - не активны, видео в них проигрывается, когда же они становятся ативными, видео зависает но даже тут ведет себя крайне странно и не стабильно

[historydev]

Kardamon90, по клику на кнопку слайдера переопределяйте обработчик

[Kardamon90]

Владимир, обработчик кнопки паузы?

Answer 2

[FKV]

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