@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",
	},
	
});
  • Вопрос задан
  • 1238 просмотров
Решения вопроса 1
ikonkov
@ikonkov
У свайпера есть евент семы сдайда

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;
});

и будет вам счастье
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы