jquery 基于视频播放和暂停事件在swiper容器中停止和开始自动播放

sgtfey8w 于 12个月前发布在 jQuery

关注(0)|答案(3)|浏览(151)

我试图把视频和图像元素的组合内刷卡容器与自动-播放属性。但我试图停止自动播放功能在刷卡时，视频正在播放，并开始自动播放时，视频暂停或结束。以及移动到下一张幻灯片的视频应该从一开始就自动播放。但目前在实施的条件，我能够停止自动播放只有第一时间和自动播放从第二个周期是不可控制的。需要帮助来解决逻辑。我已经尝试了下面的链接https://codepen.io/thajudeencse/pen/QWQRQEM的例子

$(function () {

    var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,

        // If we need pagination
        pagination: '.swiper-pagination',

        // Navigation arrows
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        autoplay: 3000
    });

    var v = document.getElementsByClassName("video")[0];
    v.addEventListener ("play", function () {
      mySwiper.autoplay.stop();
    }, true);
   v.addEventListener("ended", function () {
        mySwiper.startAutoplay();
    }, true);
  
});

字符串

jquery

来源：https://stackoverflow.com/questions/72744073/stop-and-start-autoplay-in-swiper-container-based-on-the-video-play-and-pause-ev

3条答案

按热度按时间

8i9zcol21#

这就是你想要的吗
https://codepen.io/ptahume/pen/NWyQydx

$(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"
    }
  });

  //$(".video").each(function () {
  //re add to stop all videos auto playing at start
  // $(".video").trigger("pause");
  // });
  var firstload = true;
  $(".video").on("play", function () {
    if (firstload) {
      swiper.autoplay.start();
      firstload = false;
      return;
    }
    swiper.autoplay.stop();
  });

  $(".video").on("ended", function () {
    swiper.autoplay.start();
  });
});

字符串
我不得不从头开始重建的东西，所以可能有点不同，从你的对不起，我用的插件从https://swiperjs.com/，我认为是相同的，你的，我希望这有助于

赞(0）回复(0）举报 12个月前

2eafrhcq2#

这应该做的工作，它将在当前幻灯片视频结束时播放下一张幻灯片，然后循环回到最后一张幻灯片视频结束事件的第一张幻灯片，有效地总是循环所有幻灯片，无论您有多少视频。
https://codepen.io/ptahume/pen/wvmporW?editors=1111

const getPlayerInstance = function (tindex) {
  const playerDom = $('video-js')[tindex];
  const id = $(playerDom).attr('id');
  return videojs.getPlayer(id);
};
$(document).ready(function () {
  const swiper = new Swiper(".mySwiper", {
    autoplay: false,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
  for (i = 0; i < $("video-js").length; i++) {
    const tplayer = getPlayerInstance(i);
    if (i > 0) {
      tplayer.currentTime(0);
      tplayer.pause();
    }
    tplayer.on('ended', function () {
      if ((swiper.slides.length - 1) === swiper.activeIndex) {
        swiper.slideTo(0);       
      } else {
        swiper.slideNext();   
      }
    })
  }
  swiper.on('slideChange', function (e) {
    const activePlayer = getPlayerInstance(swiper.activeIndex);
    activePlayer.currentTime(0);
    activePlayer.play();
  })
})

.swiper-container {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  overflow: hidden;
}

video-js {
  margin-left: calc((100vw - (100vh * 1.7)) / 2);
  margin-right: calc((100vw - (100vh * 1.7)) / 2);
  min-height: 100vh;
  min-width: 100vw;
}

@media (min-aspect-ratio: 16/9) {
  video-js {
    margin-left: 0;
  }
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js
        id="overlayVideo0"
        class="overlayVideo"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="4029697544001"
        data-playlist-id=""
        data-application-id=""
        data-object-fit="cover"
        autoplay
        muted
        playsinline
      >
      </video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>
    <div class="swiper-slide">
      <video-js
        id="overlayVideo1"
        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>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

我希望这能帮助

赞(0）回复(0）举报 12个月前

wooyq4lh3#

您可以重新添加自动播放，但要确保每个幻灯片中的所有视频都有足够的自动播放时间是很棘手的，即它可能对一个视频太短或对另一个视频太长。这个解决方案是基于前一个，但对于任何没有视频的幻灯片，它使用计时器来播放下一个幻灯片，我将计时器设置为5秒，但您可以根据需要更改它，注意：StackOverFlow代码片段不支持setinterval，因此它在这里无法正常工作，请查看codepen链接以查看是否正常工作。
我把一个空的div幻灯片在中间的2个视频幻灯片只是为了演示的目的，但代码应该工作，但你有你的设置在视频幻灯片和正常幻灯片方面
https://codepen.io/ptahume/pen/XWEZBwL

$(document).ready(function () {
  let myInterval = 0;
  const swiper = new Swiper(".mySwiper", {
    autoplay: false,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  });
  const getPlayerInstance = function (tindex) {
    const playerDom = $("video-js")[tindex];
    const id = $(playerDom).attr("id");
    return videojs.getPlayer(id);
  };
  function SlideIt() {
    clearInterval(myInterval);
    if (swiper.slides.length - 1 === swiper.activeIndex) {
      swiper.slideTo(0);
    } else {
      swiper.slideNext();
    }
  }
  for (let i = 0; i < $("video-js").length; i++) {
    const tplayer = getPlayerInstance(i);
    if (i > 0) {
      tplayer.currentTime(0);
      tplayer.pause();
    }
    tplayer.on("ended", function () {
      SlideIt();
    });
  }
  swiper.on("slideChange", function (e) {
    const slide = swiper.slides[swiper.activeIndex];
    if ($(slide).find(".overlayVideo").length > 0) {
      const activePlayer = videojs($(slide).find(".overlayVideo").attr("id"));
      activePlayer.currentTime(0);
      activePlayer.play();
    } else {
      myInterval = setInterval(SlideIt, 5000);
    }
  });
});

.swiper-container {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  overflow: hidden;
}

video-js {
  margin-left: calc((100vw - (100vh * 1.7)) / 2);
  margin-right: calc((100vw - (100vh * 1.7)) / 2);
  min-height: 100vh;
  min-width: 100vw;
}

@media (min-aspect-ratio: 16/9) {
  video-js {
    margin-left: 0;
  }
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js id="overlayVideo0" class="overlayVideo" data-account="1752604059001" data-player="default" data-embed="default" controls="" data-video-id="4029697544001" data-playlist-id="" data-application-id="" data-object-fit="cover" autoplay muted playsinline>
      </video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">
      <video-js id="overlayVideo1" 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>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

我希望这能帮助

赞(0）回复(0）举报 12个月前

我来回答

jquery 基于视频播放和暂停事件在swiper容器中停止和开始自动播放

3条答案

相关问题

热门标签

最新问答