컨베이어에서 동영상 일시 중지/재생을 제어하려면 어떻게해야합니까?

Question

flickity carousel library (here on codepen)을 사용하여 만든 동영상 회전식 메뉴가 있습니다. 내가 원하는 것은 사용자가 회전식 슬라이드를하면 선택한 슬라이드가 멈추고 선택한 중간 위치를 차지하는 슬라이드가 재생되기 시작한다는 것입니다. 지금, jQuery를 사용하여, 내가 선택한 슬라이드가 처음 플레이를 할 수 :

$(document).ready(function() { 
     var $partnerSlides = $('.partner-slides').flickity(); 

     function onLoadeddata(event) { 
      var cell = $partnerSlides.flickity('getParentCell', event.target); 
       $partnerSlides.flickity('cellSizeChange', cell && cell.element); 
     } 

     $partnerSlides.find('.slide video').each(function (i, video) { 
      video.pause(); 
      $(video).on('durationchange', onLoadeddata); 
     }); 

     $partnerSlides.find('.slide.is-selected video').each(function (i, video) { 
      video.play(); 
      $(video).on('durationchange', onLoadeddata); 
     }); 

}); 

을하지만 슬라이드의 위치를 ​​전환 할 때 새 슬라이드가 중간 위치를 받아 아무튼 동안, 선택한 슬라이드는 '위치를 이동하고 계속 재생 놀이.

회전식 슬라이드를 할 때마다 해당 기능을 업데이트 할 수 있습니까?

Answer 1

실제로이 작업을 수행하는 가장 좋은 방법은 무엇인지 생각해 냈습니다. .

var $gallery = $('.partner-slides').flickity(); //this is the carousel 

    $gallery.on('settle.flickity', function() { 
     console.log('Flickity settled at ' + flkty.selectedIndex); 

     $gallery.find('.slide video').each(function (i, video) { 
      video.pause(); 
      $(video).on('loadeddata', onLoadeddata); 
     }); 

     $gallery.find('.slide.is-selected video').each(function (i, video) { 
      video.play(); 
      $(video).on('loadeddata', onLoadeddata); 
     }); 

    }); 

의 선택이 재생됩니다 : 회전 목마가 미끄러 또는 autoplayed 후 침전마다 화재 회전 목마, 'settle.flickity'을위한 이벤트가있다 (더 많은 here on flickityflickity 이벤트에 대한 따라서,이 코드를 읽을 수 있습니다 선택한 동영상을 일시 중지하십시오.