Swiper js, reset currentTime to 0 slide`s video

0
votes

I am trying to set currentTime = 0 to the slides with video when the slider is in a image slide.

Its possible with swiper js?

https://codepen.io/josedeharo/pen/QWwgaoK

The actual js: 

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  autoplayDisableOnInteraction: true,
    speed: 1000,
   autoplay: true,
});
1
javascriptslick.jsswiper

1 Answers

2
votes

First reset and autoplay video not related to swiper API - use simple JS:

stackoverflow: How to Reset video using html5

You should use Swiper API events:

mySwiper.on('slideChange', function () {
  console.log('slide changed do something');
});

update answer (Full code example)

  • Remove "autoplay" from all videos.
  • jquery require
  • The first video play under init event
  • The prev video and current video play/stop under slideChange event
  • I use var inside Jquery selector to get the prev/current video - read more her: stackoverflow: How to use JavaScript variables in jQuery selectors?

var swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  /* ON INIT AUTOPLAY THE FIRST VIDEO */
  on: {
    init: function () {
      console.log('swiper initialized');
      var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
      currentVideo.trigger('play');
    },
  },
});

/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");

/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
  console.log('slide changed');
  /* stop all videos (currentTime buggy without this loop idea) */
  sliderVideos.each(function( index ) {
    this.currentTime = 0;
  });

  /* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
  var prevVideo =  $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
  var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
  prevVideo.trigger('stop');
  currentVideo.trigger('play');
});
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* reset list */
ul.swiper-wrapper{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

h2{
  flex-basis: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <ul class="swiper-wrapper">
    <!-- Slides -->
    <li class="swiper-slide">
      <div>
        <h3>Slide 1 - <small>Reset video and play when slide change</small></h3>
        <video 
               width="320" height="240" controls muted loop>
          <source src="https://ak2.picdn.net/shutterstock/videos/34123252/preview/stock-footage-coworkers-discussing-in-the-future-of-their-company-over-several-charts-and-graphs-business.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </li>
    <li class="swiper-slide">
      <div>
        <h3>Slide 2 - <small>Reset video and play when slide change</small></h3>
        <video width="320" height="240" controls muted loop>
          <source src="https://ak1.picdn.net/shutterstock/videos/25348301/preview/stock-footage--business-new-customers-sale-and-people-concept-thousands-of-people-formed-qr-code-crowd-flight.webm" type="video/webm">
          Your browser does not support the video tag.
        </video>

      </div>
    </li>
    <li class="swiper-slide">
      <div>
        <h3>Slide 3 - <small>Reset video and play when slide change</small></h3>
        <video width="320" height="240" controls muted loop>
          <source src="https://ak4.picdn.net/shutterstock/videos/17795644/preview/stock-footage-receiving-email-e-mail-sign-on-holographic-screen-the-person-received-the-email-and-opens-it-with.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </li>
  </ul>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

codepen: https://codepen.io/ezra_siton/pen/povLPRY?editors=1111