Question

我使用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，仍然是奇怪的行为。

Answer 1

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

仅当您将滑块设置为不在无限循环中运行时，才能解决此问题。然后将删除克隆。为此slick有下一个属性和值：

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

您还可以查看文档 here 。

光滑的滑块视频重复

1 个答案: