Stop the autoplay in swiper slider when the video is playing and move to next slide when video is paused or ended

Question

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js
        id="6304418462001"
        class="overlayVideo"
        data-account="6269594386001"
        data-player="oHG2GzKTGk"
        data-embed="default"
        controls=""
        data-video-id="6304418462001"
        data-playlist-id=""
        data-application-id=""
        data-object-fit="cover"
        autoplay
        muted
        playsinline
      >
      </video-js>
      <script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
    </div>
    <div class="swiper-slide">
      <video-js
        id="4029697544001"
        class="overlayVideo"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="4029697544001"
        data-playlist-id=""
        data-application-id=""
        autoplay
        muted
        playsinline
      ></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

<script>
  $(document).ready(function () {
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    $(".vjs-tech").on("play", function () {
      swiper.autoplay.stop();
    });

    $(".vjs-tech").on("ended, paused", function () {
      swiper.autoplay.start();
    });

    var sliderVideos = $(".swiper-slide .vjs-tech");

    /* SWIPER API - Event will be fired after animation to other slide (next or previous) */
    swiper.on("slideChange", function () {
      /* stop all videos (currentTime buggy without this loop idea - no "real" previousIndex) */
      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(".vjs-tech");
      var currentVideo = $(
        "[data-swiper-slide-index=" + this.realIndex + "]"
      ).find(".vjs-tech");
      prevVideo.trigger("stop");
      currentVideo.trigger("play");
    });
  });
</script>

I am trying to autoscroll the swiper slider. If the current slide has video element in it, then the autoplay should be paused until the video gets paused or completed. If I pause the current slide and move to the next slide then on revisiting the paused slide the video should remain in pause state alone, only when the video is ended and moved to next slide then on revisiting the video can start playing from the beginning. Currently once the loop is completed and the second loop starts the player is not working as expected. Couldn't find what is wrong in the player.

Answer 1

I'm not sure this will fix your problem, but in this part

 $(".vjs-tech").on("ended, paused", function () {
  swiper.autoplay.start();
});

you should use "end" & "pause" instead of "ended" and "paused"