自动播放光滑的滑块和视频

Question

我已经在这里进行了长时间的搜索以找到解决方案，但找不到任何东西...

我正在使用这支笔的代码：https://codepen.io/digistate/pen/MvapbE

我更改了youtube的视频，自动播放效果不错，但是滑块不是自动的，我希望将幻灯片自动更改为图像或视频的其他项目，当该项目为视频时，它将自动播放到最后，然后更改下一个项目...

可以做到吗？

谢谢！

var slideWrapper = $(".main-slider"),
    iframes = slideWrapper.find('.embed-player'),
    lazyImages = slideWrapper.find('.slide-image'),
    lazyCounter = 0;

// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command){
  if (player == null || command == null) return;
  player.contentWindow.postMessage(JSON.stringify(command), "*");
}

// When the slide is changing
function playPauseVideo(slick, control){
  var currentSlide, slideType, startTime, player, video;

  currentSlide = slick.find(".slick-current");
  slideType = currentSlide.attr("class").split(" ")[1];
  player = currentSlide.find("iframe").get(0);
  startTime = currentSlide.data("video-start");

  if (slideType === "vimeo") {
    switch (control) {
      case "play":
        if ((startTime != null && startTime > 0 ) && !currentSlide.hasClass('started')) {
          currentSlide.addClass('started');
          postMessageToPlayer(player, {
            "method": "setCurrentTime",
            "value" : startTime
          });
        }
        postMessageToPlayer(player, {
          "method": "play",
          "value" : 1
        });
        break;
      case "pause":
        postMessageToPlayer(player, {
          "method": "pause",
          "value": 1
        });
        break;
    }
  } else if (slideType === "youtube") {
    switch (control) {
      case "play":
        postMessageToPlayer(player, {
          "event": "command",
          "func": "mute"
        });
        postMessageToPlayer(player, {
          "event": "command",
          "func": "playVideo"
        });
        break;
      case "pause":
        postMessageToPlayer(player, {
          "event": "command",
          "func": "pauseVideo"
        });
        break;
    }
  } else if (slideType === "video") {
    video = currentSlide.children("video").get(0);
    if (video != null) {
      if (control === "play"){
        video.play();
      } else {
        video.pause();
      }
    }
  }
}

// Resize player
function resizePlayer(iframes, ratio) {
  if (!iframes[0]) return;
  var win = $(".main-slider"),
      width = win.width(),
      playerWidth,
      height = win.height(),
      playerHeight,
      ratio = ratio || 16/9;

  iframes.each(function(){
    var current = $(this);
    if (width / ratio < height) {
      playerWidth = Math.ceil(height * ratio);
      current.width(playerWidth).height(height).css({
        left: (width - playerWidth) / 2,
         top: 0
        });
    } else {
      playerHeight = Math.ceil(width / ratio);
      current.width(width).height(playerHeight).css({
        left: 0,
        top: (height - playerHeight) / 2
      });
    }
  });
}

// DOM Ready
$(function() {
  // Initialize
  slideWrapper.on("init", function(slick){
    slick = $(slick.currentTarget);
    setTimeout(function(){
      playPauseVideo(slick,"play");
    }, 1000);
    resizePlayer(iframes, 16/9);
  });
  slideWrapper.on("beforeChange", function(event, slick) {
    slick = $(slick.$slider);
    playPauseVideo(slick,"pause");
  });
  slideWrapper.on("afterChange", function(event, slick) {
    slick = $(slick.$slider);
    playPauseVideo(slick,"play");
  });
  slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
    lazyCounter++;
    if (lazyCounter === lazyImages.length){
      lazyImages.addClass('show');
      // slideWrapper.slick("slickPlay");
    }
  });

  //start the slider
  slideWrapper.slick({
    // fade:true,
    autoplaySpeed:4000,
    lazyLoad:"progressive",
    speed:600,
    arrows:false,
    dots:true,
    cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
  });
});

// Resize event
$(window).on("resize.slickVideoPlayer", function(){  
  resizePlayer(iframes, 16/9);
});

$fonts: Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
$bg_color: #2d3042;
$font_color: #efefef;
$link_color: #efefef;
$link_hover_color: #fff;

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: $fonts;
  background-color: $bg_color;
  position: relative;
  color: $font_color;
  text-align: center;
  a, a:visited {
    color: $link_color;
    text-decoration: none;
  }
  a:hover {
    color: $link_hover_color;
  }
}
%bv_hidden {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
%filled_obj {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 5%;
  text-align: left;
  z-index: 1;
  h1 {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    padding-top: 18px;
  }
  nav {
    display: inline-block;
    float: right;
    ul {
      li {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        a {
          display: block;
          padding: 24px 15px;
          &:hover {
            background-color: rgba(#fff, .18);
          }
        }
      }
    }
  }
}

.main-slider {
  position: relative;
  width: 100%;
  height: 38vw;
  min-height: 8vw;
  margin-bottom: 50px;
  opacity: 0;
  visibility: hidden;
  transition:all 1.2s ease;
  &.slick-initialized {
    opacity: 1;
    visibility: visible;
  }
}
.slick-slide {
  position: relative;
  height: 38vw;
  @extend %bv_hidden;
  &::before {
    @extend %filled_obj;
    @extend %bv_hidden;
    background-color: #000;
    opacity: .3;
    z-index: 1;
  }
  video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform:translate(-50%, -50%);
  }
  iframe {
    position: relative;
    pointer-events: none;
  }
  figure {
    position: relative;
    height: 100%;
  }
  .slide-image {
    opacity: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    // background-color:rgba(#c46897,.38);
    // background-blend-mode:overlay;
    transition:all .8s ease;
    &.show {
      opacity: 1;
    }
  }
  .image-entity {
    width: 100%;
    opacity: 0;
    visibility: hidden;
  }
  .loading {
    position: absolute;
    top: 44%;
    left: 0;
    width: 100%;
  }
  .slide-media {
    animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);
  }
  &.slick-active {
    z-index: 1;
    .slide-media {
      animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
    }
    .caption {
      opacity: 1;
      transform:translateY(0);
      transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
    }
  }
}
.caption {
  position: absolute;
  top: 44%;
  left: 5%;
  text-align: center;
  padding: 20px;
  border: 3px solid;
  color: #fff;
  margin: 0;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .02em;
  opacity: 0;
  z-index: 1;
  transition:all .3s ease;
  transform:translateY(100px);
  @extend %bv_hidden;
}

.slick-dots {
  text-align: center;
  padding-top: 15px;
  li {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
    button {
      width: 16px;
      height: 16px;
      border: none;
      cursor: pointer;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 0 transparent;
      vertical-align: middle;
      color: #fff;
      background-color: #fff;
      transition:all .3s ease;
      opacity: .4;
      &:focus {
        outline: none;
      }
      &:hover {
        opacity: 1;
      }
    }
    &.slick-active {
      button {
        border-color: $bg_color;
        box-shadow: 0 0 0 2px #fff;
        opacity: 1;
      }
    }
  }
}

.container {
  background-color: #f2f2f2;
  color: #444;
  line-height: 1.6;
  padding: 40px 0;
  .content {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
  }
  p {
    margin-bottom: 40px;
  }
}

@keyframes slideIn {
  from {
    filter:blur(15px);
  }
  to {
    filter:blur(0);
  }
}
@keyframes slideOut {
  from {
    filter:blur(0);
  }
  to {
    filter:blur(15px);
  }
}

<header>
  <h1>SITE TITLE</h1>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>
<section class="main-slider">
  <div class="item image">
    <span class="loading">Loading...</span>
    <figure>
      <div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0');">
        <img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0" class="image-entity" />
      </div>
      <figcaption class="caption">Static Image</figcaption>
    </figure>
  </div>
  <div class="item vimeo" data-video-start="4">
    <iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=1&autoplay=0&id=217885864" width="980" height="520" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p class="caption">Vimeo</p>
  </div>
  <div class="item image">
    <figure>
      <div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM');">
        <img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="image-entity" />
      </div>
      <figcaption class="caption">Static Image</figcaption>
    </figure>
  </div>
  <div class="item youtube">
    <iframe class="embed-player slide-media" width="980" height="520" src="https://www.youtube.com/embed/QV5EXOFcdrQ?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&playlist=QV5EXOFcdrQ&start=1" frameborder="0" allowfullscreen></iframe> 
    <p class="caption">YouTube</p>
  </div>
  <div class="item image">
    <figure>
      <div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ');">
        <img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ" class="image-entity" />
      </div>
      <figcaption class="caption">Static Image</figcaption>
    </figure>
  </div>
  <div class="item video">
    <video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00">
      <source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
    </video>
    <p class="caption">HTML 5 Video</p>
  </div>
</section>
<section class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>
  </div>
</section>

Answer 1

您是否尝试过在光滑的初始化函数中添加autoplay:true选项？它对我来说很好。

https://codepen.io/anon/pen/qzydop

此外，如果您想循环浏览幻灯片，可以添加infinite: true选项。