时间戳

首页 > 解决方案 > Slick Carousel 问题幻灯片的视频背景

javascript - Slick Carousel 问题幻灯片的视频背景

问题描述

我遇到的 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，它都不会再次播放视频。

标签： javascriptjquerycssvideoslick.js

解决方案

您在问题中发布的代码包含错误并且根本不起作用。
我找不到在标签和事件处理程序中同时具有autoplay属性的理由。此外，您在哪里调用函数 也不清楚。videooninit
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>

推荐阅读