Question

我遇到的Slick.js轮播中有一些视频背景问题。

HTML：

<div id="mySlick">
     <div class="item">
          <img class="carousel-item-background" src="images/01.jpg">     
     </div>
     <div class="item">
          <img class="carousel-item-background" src="images/02.jpg">     
     </div>
     <div class="item">
          <img class="carousel-item-background" src="images/03.jpg">     
     </div>
     <div class="item">
          <div class="carousel-item-background">
               <video class="bgVid" autoplay muted loop preload>
                    <source src="video.mp4" type="video/mp4">
               </video>
          </div>    
     </div>
</div>

JS：

$("#mySlick").on('init', function(event. slick){
     $(".carousel-item-background").each(function(){
          $(this).find('.bgVid').get(0).play();
     });
});

$("#mySlick").slick({
     dots: false,
     infinite: true,
     speed: 1000,
     slidesToShow: 1,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 10000,
     arrows: true,
     focusOnSelect: true
});

function reloadBGVid(){
     $("video[class='bgVid']").each(function(){
          var ve = $(this);
          var $video = ve.get(0);
          if ($video.paused){
               $video.play();          
          }
     });
};

除非排除了我排除的CSS，否则滑块会加载并显示良好。我可以一直通过滑块单击下一个和上一个。我第一次在整个滑块中单击NEXT，当我到达视频幻灯片时，视频将从头开始，并且第一次单击PREVIOUS，直到视频幻灯片，即使我已经等了几秒钟了。要开始播放，我可以看到在FIRST幻灯片和LAST幻灯片之间的过渡期间，视频已经进行了播放，但是当过渡结束时，视频倒带到开头并从此处播放。我的脚本中没有afterChange调用。

我遇到的第二个问题是响应性的。我在CSS中有一个媒体查询，如果窗口宽度小于768px，则视频设置为display: none。我有一个jQuery函数，如果窗口为768px或更大，则媒体查询为空，并调用reloadBGVid()函数。但是无论我如何定位.bgVid，它都不会再次播放视频。

Answer 1

您在问题中发布的代码包含错误，根本无法使用。
我找不到在autoplay标签和video事件处理程序中同时拥有oninit属性的原因。同样也不清楚您在哪里调用reloadBGVid函数。

因此，我只为您提供以下摘录，希望对您有所帮助：

$(document).ready(function() {

  $("#mySlick").on('init', function(event) {
    $(".carousel-item-background .bgVid").each(function(i, e) {
      e.play();
    });
  });

  $("#mySlick").slick({
    dots: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 10000,
    arrows: true,
    focusOnSelect: true
  });

  function reloadBGVid() {
    $("video.bgVid").each(function(i, e) {
      if (e.paused) e.play();
    });
  }
});

body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div id="mySlick">
  <div class="item">
    <img class="carousel-item-background" src="https://picsum.photos/426/240?1">
  </div>
  <div class="item">
    <img class="carousel-item-background" src="https://picsum.photos/426/240?2">
  </div>
  <div class="item">
    <img class="carousel-item-background" src="https://picsum.photos/426/240?3">
  </div>
  <div class="item">
    <div class="carousel-item-background">
      <video class="bgVid" muted loop preload>
       <source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</div>

幻灯片轮播问题幻灯片的视频背景

1 个答案: