视频结束时自动播放猫头鹰旋转木马

问题描述 投票：0回答：1

我对猫头鹰旋转木马有疑问，我想创建一个由图像和视频组成的旋转木马。我的视频有问题，我希望在视频完成时滚动到下一个元素（每个视频都有自己的持续时间），现在它总是在设定的时间内执行相同的操作。谢谢大家的帮助。

var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  dots: true,
  autoplay: true,
  items: 1
});

videoSlider.on('translate.owl.carousel', function (e) {
  $('.owl-item .item video').each(function () {
    // pause playing video - after sliding
    $(this).get(0).pause();
  });
});

videoSlider.on('translated.owl.carousel', function (e) {
  // check: does the slide have a video?
  if ($('.owl-item.active').find('video').length !== 0) {
    // play video in active slide
    $('.owl-item.active .item video').get(0).play();
  }
});
/* ---------------- */
/* HTML Reset Stuff */
/* ---------------- */
* {
  box-sizing: border-box;
  outline: none;
}

body, html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Tahoma;
  background: #222;
}

h1 {
  color: white;
  margin: 30px;
  font-size: 25px;
}

button span {
  color: white;
}

video {
  max-width: 100%;
}

/* --------------- */
/* Content Wrapper */
/* --------------- */
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: all .6s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* ---------------------- */
/* OWL Active Slider Mask */
/* ---------------------- */
.slider-mask {
  position: absolute;
  width: 100%;
  max-width: 400px;
  height: 220px;
  top: 0;
  left: 50%;
  z-index: 2;
  pointer-events: none;
  margin: 0 auto;
  transform: translateX(-50%);
}

.slider-mask::before,
.slider-mask::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: rgba(34,34,34,.8);
  display: block;
  content: ' ';
}

.slider-mask::after {
  left: auto;
  right: 100%;
}

/* ----------------- */
/* Owl Styling Stuff */
/* ----------------- */
.owl-carousel {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.owl-stage-outer {
  overflow: visible !important;
}

.owl-item {
  width: 100%;
  max-width: 400px;
  height: 220px;
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}

.owl-nav {
  font-size: 60px;
}

.owl-next {
  float: right;
}

.owl-dots {
  text-align: center;
  width: 80%;
  margin: -40px auto 0;
}

.owl-dot span{
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  margin: 0 4px;
}

.owl-dot.active span{
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.css" rel="stylesheet"/>
<header>
  <h1>Owl Slider - Play / Stop / Continue HTML5 Video</h1>
</header>

<main class="wrapper">

  <div class="slider-mask"></div>
  <div class="owl-carousel owl-theme">

    <div class="item"><h4>1</h4></div>
    <div class="item">
      <video class="video-item" muted loop>
        <source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.webm" type="video/webm">
        <source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item"><h4>3</h4></div>
    <div class="item">
      <video class="video-item" muted loop>
        <source src="https://ak4.picdn.net/shutterstock/videos/1014705914/preview/stock-footage--rd-happy-anniversary-text-greeting-and-wishes-card-made-from-glitter-particles-from-golden.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item"><h4>5</h4></div>
    <div class="item">
      <video class="video-item" muted loop>
        <source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.webm" type="video/webm">
        <source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.mp4" type="video/mp4">
      </video>
    </div>
  </div>
  
</main>

javascript owl-carousel
1个回答
0
投票

您应该检测视频事件 

ended
，请参阅检测 HTML5 视频何时结束

然后你应该手动调用 owl-carousel“下一张幻灯片”方法。

我设置了

autoplay: false
，但您需要添加超时来自动播放图像。

var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  dots: true,
  autoplay: false,
  items: 1
});

videoSlider.on('translate.owl.carousel', function(e) {
  $('.owl-item .item video').each(function() {
    // pause playing video - after sliding
    $(this).get(0).pause();
  });
});

videoSlider.on('translated.owl.carousel', function(e) {
  // check: does the slide have a video?
  if ($('.owl-item.active').find('video').length !== 0) {
    // play video in active slide
    $('.owl-item.active .item video').get(0).play();


  }
});


$(".video-item").on('ended', myHandler)

function myHandler(ev) {
  // there is no method 'next'
  // so we will fake a click
  $('.owl-next').trigger('click');
}
/* ---------------- */


/* HTML Reset Stuff */


/* ---------------- */

* {
  box-sizing: border-box;
  outline: none;
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Tahoma;
  background: #222;
}

h1 {
  color: white;
  margin: 30px;
  font-size: 25px;
}

button span {
  color: white;
}

video {
  max-width: 100%;
}


/* --------------- */


/* Content Wrapper */


/* --------------- */

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: all .6s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}


/* ---------------------- */


/* OWL Active Slider Mask */


/* ---------------------- */

.slider-mask {
  position: absolute;
  width: 100%;
  max-width: 400px;
  height: 220px;
  top: 0;
  left: 50%;
  z-index: 2;
  pointer-events: none;
  margin: 0 auto;
  transform: translateX(-50%);
}

.slider-mask::before,
.slider-mask::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: rgba(34, 34, 34, .8);
  display: block;
  content: ' ';
}

.slider-mask::after {
  left: auto;
  right: 100%;
}


/* ----------------- */


/* Owl Styling Stuff */


/* ----------------- */

.owl-carousel {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.owl-stage-outer {
  overflow: visible !important;
}

.owl-item {
  width: 100%;
  max-width: 400px;
  height: 220px;
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}

.owl-nav {
  font-size: 60px;
}

.owl-next {
  float: right;
}

.owl-dots {
  text-align: center;
  width: 80%;
  margin: -40px auto 0;
}

.owl-dot span {
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  margin: 0 4px;
}

.owl-dot.active span {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.css" rel="stylesheet" />
<header>
  <h1>Owl Slider - Play / Stop / Continue HTML5 Video</h1>
</header>

<main class="wrapper">

  <div class="slider-mask"></div>
  <div class="owl-carousel owl-theme">

    <div class="item">
      <h4>1</h4>
    </div>
    <div class="item">
      <video class="video-item" muted controls>
        <source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.webm" type="video/webm">
        <source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item">
      <h4>3</h4>
    </div>
    <div class="item">
      <video class="video-item" muted controls>
        <source src="https://ak4.picdn.net/shutterstock/videos/1014705914/preview/stock-footage--rd-happy-anniversary-text-greeting-and-wishes-card-made-from-glitter-particles-from-golden.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item">
      <h4>5</h4>
    </div>
    <div class="item">
      <video class="video-item" muted controls>
        <source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.webm" type="video/webm">
        <source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.mp4" type="video/mp4">
      </video>
    </div>
  </div>

</main>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.