Как запускать только текущее (открытое) видео в слайдере swiper?

Question

[Павел Сидоров]

//Главный слайдер
	var swiperSlider = new Swiper(".sliderSwiper", {
		slidesPerView: 1,
		loop: true,
		centeredSlides: true,
		spaceBetween: 20,
		speed: 800,
		loop: true,
		pagination: {
			el: ".swiper-pagination",
		},
		navigation: {
			nextEl: ".next-2",
			prevEl: ".prev-2",
		},
		breakpoints: {
			320: {
			  slidesPerView: 1,
			  spaceBetween: 0
			},
			480: {
			  slidesPerView: 1,
			  spaceBetween: 0
			},
			640: {
			  slidesPerView: 1,
			  spaceBetween: 0
			}
		}
	});

	swiperSlider.on('slideChange', function () {
		let activeIndex = swiperSlider.realIndex;
		//console.log(activeIndex);
		$('.swiper-slide').each(function (index, element) {
			let videoSlider = $(this).find('.vv')[0];
			if (videoSlider) {
				videoSlider.pause();
			}
		});
		let r = $('.swiper-slide-active').find('.vv')[0];
		console.log(r);
	});

<section>
	<div class="swiper sliderSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="main-slider-block">
					<div class="title-slider" data-animate="fadeInUp">ТЕст</div>
					<div class="main-slider-img">
						<video autoplay="autoplay" class="vv" loop="" muted="" loading="lazy">
							<source src="/upload/iblock/e46/ez7vyfl89pngjs9c3sdlt0ays7ntagou.mp4" type="video/mp4">
						</video>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-slider-block">
					<div class="title-slider" data-animate="fadeInUp">ТЕст</div>
					<div class="main-slider-img">
						<img src="/bitrix/templates/main/img/image.jpg" width="100%">
					</div>
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="pagination-arrow gallery-arrow gallery-arrow-lr-0">
			<div class="prev-gallery prev-2"></div>
			<div class="next-gallery next-2"></div>
		</div>
	</div>
</section>

мне надо когда фото - остановка всех видео - это я вроде добился
а теперь когда текущий слайд видео - запустить именного его . привязывался к swiper-slide-active но чет не выходит

Answer 1

[DrGritsyuk]

у меня в swiper работает так - добавьте в самом конце страницы

const videos = document.querySelectorAll('video'); 
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        const video = entry.target; 
        if (entry.isIntersecting) {
            video.play();
        } else {
            video.pause();
        }  
    });
}, {rootMargin: "-50px 0px", threshold: 0.7 }); // threshold сколько процентов должно быть видно
    videos.forEach(video => {
        observer.observe(video);
    });

если видно менее 70% любого видео оно останавливается, не важно в слайдере или при прокрутке страницы.
Решение универсальное.
Можете просмотреть в живую как реализован swiper на сайте Нью-Сил

Comments

[DrGritsyuk]

да, и видео запустится даже без autoplay и в мобильном телефоне тоже

[Павел Сидоров]

я сделал вот так. не знаю конечно, на сколько это красиво )

function vidik () {
	let videoSlider = $('.is-flipped').find('.vv')[0];
	if (videoSlider) {
		videoSlider.play();
	} else {
		$('.vv')[0].pause();
	}
}

	swiperSlider.on('slideChange', function () {
		let activeIndex = swiperSlider.realIndex;
		$('.main-swiper-slide').each(function (index, item) {
			if (activeIndex == index) {
				item.classList.add('is-flipped');
				vidik();
			} else {
				item.classList.remove('is-flipped');
				vidik();
			}
		});
	});

[Павел Сидоров]

DrGritsyuk, спс. за пример