Как настроить автоматическое воспроизведение (autoplay) в swiper для нескольких видео?

Question

Вардан

javascript

Как настроить автоматическое воспроизведение (autoplay) в swiper для нескольких видео?

Я работаю над настройкой автоплея для слайдера Swiper с несколькими видео. Можете подсказать, как остановить воспроизведение видео, если слайд становится неактивным, и запускать его вновь, когда слайд активен? Я немного разобрался с функциями, но проблема заключается в том, что при использовании параметра loop Swiper создает дубликаты слайдов, и на эти дубликаты не применяется класс, который я использую для остановки проигрывания видео. Также мне нужно, чтобы переключение слайдов происходило только после завершения воспроизведения видео, а не по установленному времени в Swiper. Есть ли возможность реализовать такую функцию? Спасибо! 
<br/> 
<pre><code class="html">&lt;div class="main-home__slider swiper"&gt;
					&lt;div class="main-home__wrapper swiper-wrapper"&gt;
						&lt;div class="main-home__slide swiper-slide"&gt;
							&lt;video muted loop playsinline loading="lazy" class="vv" src="./files/videos/video.mp4"&gt;
								&lt;source loading="lazy" src="./files/videos/video.mp4" type="video/mp4"&gt;
							&lt;/video&gt;
						&lt;/div&gt;
						&lt;div class="main-home__slide swiper-slide"&gt;
							&lt;video muted loop playsinline loading="lazy" class="vv is-flipped" src="./files/videos/video-2.mp4"&gt;
								&lt;source loading="lazy" src="./files/videos/video-2.mp4" type="video/mp4"&gt;
							&lt;/video&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;</code></pre> 
<br/> 
<pre><code class="javascript">function vidik() {
		const videos = document.querySelectorAll('.video');
		videos.forEach(video =&gt; {
			const videoSlider = video.classList.contains('.is-flipped');
			if (videoSlider) {
				video.pause();
			} else {
				video.play();
			}
		});

	}

	mainSlider.on('slideChange', function () {
		//let activeIndex = mainSlider.contains.;
		const swiperSlides = document.querySelectorAll('.video');
		let vide...</code></pre>

24 декабря 2024 г. 20:24

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы реализовать автоматическое воспроизведение видео в Swiper, при этом останавливая видео, когда слайд становится неактивным, и начиная воспроизведение, когда слайд становится активным, вы можете использовать события Swiper. В вашем случае, поскольку играют несколько видео и вам необходимо отслеживать их состояние, необходимо написать немного кода на JavaScript.

Вот пример, как это можно сделать:

### HTML
```html
<div class="main-home__slider swiper">
    <div class="main-home__wrapper swiper-wrapper">
        <div class="main-home__slide swiper-slide">
            <video muted playsinline class="video" src="./files/videos/video.mp4">
                <source src="./files/videos/video.mp4" type="video/mp4">
            </video>
        </div>
        <div class="main-home__slide swiper-slide">
            <video muted playsinline class="video" src="./files/videos/video-2.mp4">
                <source src="./files/videos/video-2.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>
```

### JavaScript
```javascript
const swiper = new Swiper('.swiper', {
    loop: true,
    on: {
        slideChange: function () {
            handleVideoPlayback(this);
        }
    }
});

// Функция для обработки воспроизведения видео
function handleVideoPlayback(swiper) {
    const slides = swiper.slides;

    slides.forEach((slide, index) => {
        const video = slide.querySelector('.video');
        if (video) {
            if (index === swiper.activeIndex) {
                // Если слайд активен, запускаем видео
                video.play();
            } else {
                // Если слайд неактивен, приостанавливаем видео
                video.pause();
            }
        }
    });
}

// Запускаем видео на первом слайде при инициализации
document.addEventListener('DOMContentLoaded', function () {
    const initialVideo = document.querySelector('.swiper-slide-active .video');
    if (initialVideo) {
        initialVideo.play();
    }
});
```

### Объяснение кода
1. **Инициализация Swiper**: Мы создаём экземпляр Swiper и передаём ему параметры. Устанавливаем обработчик события `slideChange`, который вызывается каждый раз при смене слайда.
2. **Функция `handleVideoPlayback`**: В этой функции мы проходим по всем слайдам, и проверяем, является ли слайд активным. Если он активен, воспроизводим видео, если нет — приостанавливаем.
3. **Первоначальное воспроизведение**: После загрузки страницы мы воспроизводим видео на первом слайде, чтобы обеспечить автоматическое воспроизведение.

### Важно
1. Убедитесь, что ваше видео имеет атрибут `muted`, так как большинство браузеров блокируют автозапуск видео с включённым звуком.
2. Вы можете адаптировать решение под свою структуру и требования.
3. Этот код не учитывает необходимость ждать завершения видео для смены слайда. Если вам нужно, чтобы смена слайда происходила только после завершения видео, можно добавить обработчик события `ended` для видео и инициализировать смену слайда внутри этого обработчика.