Как воспроизвести видео-контент при смене слайда?

Question

[Anonimmus]

Доброго времени суток.
Товарищи подскажите. Как воспроизвести видео-контент при смене слайда? И если слайд не активен держит таймер на 00:01
Каждый ролик длится 5 секунд, затем происходит смена слайда. Но тут проблемка возникла.
Слайдер прокручивает и попадает на конец видео, порой и застывает. Это означает что автоплей срабатывает в фоне.
Выглядит это вот так
https://dropmefiles.com/MLwJL

По коду ничего особенного

<!-- Swiper -->
					<div class="swiper offer_slider">
						<div class="swiper-wrapper">
							<div class="swiper-slide"> 
								<video class="mainscreen__video" autoplay="" loop="" muted="" data-was-processed="true">
									<source data-src="source/video/ScreenRecorderProject.mp4" type="video/mp4"
										src="source/video/ScreenRecorderProject.mp4">
								</video>
							</div>
							<div class="swiper-slide">
								<video class="mainscreen__video" autoplay="" loop="" muted="" data-was-processed="true">
									<source data-src="source/video/ScreenRecorderProject.mp4" type="video/mp4"
										src="source/video/ScreenRecorderProject.mp4">
								</video>
							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>

var swiper = new Swiper(".offer_slider", {
	loop: true,
	autoplay: {
		delay: 5900,
	},
	// 	effect: 'fade',
	// fadeEffect: {
	// 	crossFade: true
	// }, 
	pagination: {
		el: ".swiper-pagination",
	},
	
});

Answer 1

[Иван К]

У свайпера есть евент семы сдайда

swiper.on('slideChange', function () {
  console.log('slide changed');
});

Доки
Перезапускайте им видео, в вашем случае можно все видео перезапускать, чтобы не заморачиваться.

let video = querySelectorAll(".swiper-slide video");
video.currentTime = 0;

Получается что то вроде

swiper.on('slideChange', function () {
  let video = querySelectorAll(".swiper-slide video");
  video.currentTime = 0;
});

и будет вам счастье

Comments

[Anonimmus]

Спасибо заработало)

var swiper = new Swiper(".offer_slider", {
	loop: true,
	autoplay: {
		delay: 4900,
	},
	// effect: 'fade',
	// fadeEffect: {
	// 	crossFade: true
	// },
	pagination: {
		el: ".swiper-pagination",
	},
	on: {
		init: function () {
			console.log('swiper initialized'); 
			let video = document.querySelector(".swiper-slide-active .mainscreen__video");
			video.currentTime = 0;
		},
	},
});
swiper.on('slideChange', function () {
	console.log('slide changed'); 
	let video = document.querySelector(".swiper-slide-active .mainscreen__video");
			video.currentTime = 0; 
});

[Иван К]

Anonimmus, пожалуйста