滑らかなスライダーのビデオ複製

Question

これはちょっと説明するのが難しいですが、私はslickスライダーを使って6つのビデオをスライドさせて、現在のスライドでビデオを再生しますが、オーディオはhtml 5人のプレーヤーはビデオを再生せず、開始もしません。あなたはバックグラウンドでビデオを聞くことができるので、ビデオコントロールでコントロールすることはできないので、バックグラウンドで2番目のビデオが再生されているようです。私はこのプロジェクトでレール上のルビーを使用しています。

聞くには、コード

<%= 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ので、現在のスライドが1つのまたは2のビデオの再生と一時停止され、それは動作しますが、2つのビデオは、同じビデオのために存在するように見えるです。一つは、バックグラウンドで再生されているし、制御することがカント、およびその他のvideo要素であるが、現在のアクティブ・バックグラウンドで再生した映像が、表示されないと進歩の何

画像を表示doesntのバーは動いていませんが、再生すると、そのビデオの新しいインスタンスが開始されます。そして私はそれがターボリンクだと思っていましたが、私はターボリンクを無効にしていましたが、まだ変わった行動です。

Answer 1

私はslickスライダーにクローン要素があります。 inspect要素を使ってスライダを調べると、すべてのスライドに.slick-clonedというようなものが追加されます。あなたは同じビデオを2度持っているので、あなたの問題があると思います。

この問題は、スライダを無限ループで実行しないように設定した場合にのみ解決できます。その後、クローンは削除されます。そのslickについて次の財産と値を持っています

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

ます。また、ドキュメントhereで見ることができます。