slick slider videos duplicating

Question

I'm using slick slider to slide through 6 videos , and play them when they are the current slide, and the videos play but there is only audio, the html 5 player plays no video, and doesn't even start. There seems to be a second video playing in the background, because you can hear the video in the background, but you cannot control it with the video controls. Im using ruby on rails in this project.

hear is the code

<%= 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>

ok so when the current slide is 1 or 2 the video plays and pauses, it works, but two videos seem to exist for the same video. One is playing in the background and cant be controlled, and the other is the html 5 video but doesnt show anything

image of the current active video playing in the background, but not showing up and the progress bar is not moving, but if you play it, it will start a new instance of that video. And I thought it was turbolinks, but I disabled turbolinks and still the weird behavior.

Ionut Ionut · Accepted Answer · 2017-03-25T07:36:00

I think slick slider has a clone element. If you inspect the slider using inspect element you will see something like .slick-cloned added for every slide. So I think there is your problem, because you have the same video twice.

You can resolve this problem only if you set the slider not to run in an infinite loop. Then the clones will be removed. For that slick has the next property and value:

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

You can also look at the documentation here.

slick slider videos duplicating

1 Answers