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

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

[FKV]

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