光滑的滑块视频复制

Posted 2023-02-25

【中文标题】光滑的滑块视频复制

【英文标题】：slick slider videos duplicating

【发布时间】：2017-03-25 07:30:28

【问题描述】：

我正在使用slick滑块滑过6个视频，当它们是当前幻灯片时播放它们，视频播放但只有音频，html 5播放器不播放视频，甚至不播放开始。后台似乎正在播放第二个视频，因为您可以在后台听到视频，但您无法使用视频控件对其进行控制。我在这个项目中使用 ruby​​ on rails。

听到的是密码

<%= render 'navs/nav' %>

<div class="homepage-index-slider">

  <div class="slick-codepen">

    <% @videos.each.with_index do |video,index| %>
      <div class = "hes" data-id="<%= video.id %>">
        <video style = "width: 100%; height: auto; " id="my-video" class="video-js<%= index %> pin_image videos-homepage-video-logic<%= index %>" controls
               poster="MY_VIDEO_POSTER.jpg" data-setup="">
          <source src="<%= video.mp4.url %>" type='video/mp4'>
          <source src="<%= video.mp4.url %>" type='video/webm'>
          <source src="<%= video.mp4.url %>" type='video/ogg'>
          <p class="vjs-no-js">
            To view this video please enable javascript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
          </p>
        </video>
        <a href = "../videos/<%= video.id %>"><%= image_tag video.image.url(:medium), class: "videos-video-chosen-thumbnail-image videos-video-chosen-thumbnail-image#index" %></a>
      </div>
    <% end %>
  </div>
</div>

<script>

    var $slickElement = $('.slick-codepen');

    $slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide)
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        console.log(i);
    );

    $('.slick-codepen').slick(
        draggable: false,
        accessibility: true,
        centerMode: true,
        variableWidth: true,
        slidesToShow: 3,
        speed: 800,
        arrows: true,
        swipeToSlide: true,
        infinite: false,
        slidesToScroll: 3,
        onAfterChange: function(e) 
            if( e.currentSlide == 1 ) 
                $(".videos-video-chosen-thumbnail-image1").fadeOut("slow");
                $(".video-js1").get(0).play();
            
            if( e.currentSlide == 2 ) 
                $(".videos-video-chosen-thumbnail-image2").fadeOut("slow");
                $(".videos-video-chosen-thumbnail-image1").fadeIn("slow");
                $(".video-js1").get(0).pause();
                $(".video-js2").get(0).play();
             
        
    );
</script>

好的，所以当当前幻灯片为 1 或 2 时，视频播放和暂停时，它可以正常工作，但同一视频似乎存在两个视频。一个在后台播放，无法控制，一个是html 5视频但什么都不显示

当前活动视频的图像在后台播放，但未显示且进度条未移动，但如果您播放它，它将启动该视频的新实例。我还以为是 turbolinks，但我禁用了 turbolinks 仍然是奇怪的行为。

【参考方案1】：

我认为slick 滑块有一个克隆元素。如果您使用检查元素检查滑块，您将看到为每张幻灯片添加了类似.slick-cloned 的内容。所以我认为这是你的问题，因为你有两次相同的视频。

只有将滑块设置为不无限循环运行，才能解决此问题。然后克隆将被删除。对于那个 slick 有下一个 property 和 value：

$('.slick-codepen').slick(
  infinite: false
);

您也可以查看文档here。

【讨论】：

@lonut 我在检查元素时看到了 .slick-clone做同样的事情。生病尝试寻找一种方法来禁用它

@jalen201，我看到在您的原始代码中有infinite: true，您是否将其删除或替换为infinite: false？我已经在这个 sn-p 上对其进行了测试，您可以看到它在添加 infinite: false 时删除了克隆 jsfiddle.net/q1qznouw/725

对不起，我刚才用infinite:false 替换了infinite:true 来测试它，我仍然在检查器中看到克隆。我想可能是我有 centermode:true on ，但事实并非如此

@jalen201，可能是浏览器缓存问题。尝试检查您在隐身模式下拥有的页面并在那里检查。正如您在我在上面的评论中发布的小提琴中看到的那样，它可以解决问题，所以也许是缓存或者是另一回事。但是infinite: false 绝对有效。啊，还有可能导致infinite: false 不起作用的东西就是它的版本。我认为旧版本的slick 不支持这种属性。因此，如果您使用旧版本的 slick，也许您应该更新到最新版本。

@lonut 好吧，我试了一下，仍然是相同的克隆，如果答案只是将无限更改为 false，那么我的 rails 应用程序内部可能发生了一些事情。我会做一些调查