Swiper slider, pause html5 video when it's slide

0
votes

I am using idangero.us Swiper slider for my project. I have 3 html5 videos in slider but they are all playing at the same time. I need to pause the video when I click next and play again when it's visible.

HTML:

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <video preload="auto" loop="" autoplay="">
                    <source src=".../>
                </video>
            </div>              
            <div class="swiper-slide">
                <video preload="auto" loop="" autoplay="">
                    <source src=".../>
                </video>
            </div>              
        </div>
    </div>

JS: 

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 5000,
});
2
javascriptvideosliderhtml5-video
Welcome to Stack Overflow. SO is not a place to ask someone to code for you. But rather if you have an issue with your code, you should post that. – Tom
Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your relevant code in a minimal, complete, and verifiable example -- it's hard to solve a problem without seeing it. It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding how to ask good questions, and take the tour of the site :) – Obsidian Age

2 Answers

0
votes

Just make sure your videos have a class of d3-vid (you can change just change in script too). This works on HTML5 videos and embedded videos. Kinda a hack because it's just resetting the src but hey it works great. Do like this:

var radSwiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 5000,
});
radSwiper.on('slideChange', function () {
    document.querySelectorAll('.d3-vid').forEach(iframe => {
        iframe.setAttribute('src', iframe.getAttribute('src'));
    });
    document.querySelectorAll('.d3-vid').forEach(video => {
        video.setAttribute('src', video.getAttribute('src'));
    });
});

I don't know why people have to be so diff haha.

0
votes

You can tried this

var sliderVideos = $(".swiper-slide video");
swiper.on('slideChange', function () {
   sliderVideos.each(function( index ) {
    this.currentTime = 0;
    this.pause();
   });
});