滑动更改时，滑动滑块暂停youtubevideo

我使用Jquery Slick Slider创建了一个图像滑块，它也有youtubevideo剪辑。 当页面加载youtubevideo设置为滑块的第一张幻灯片时，它是自动播放并开始播放。 我想，当我将滑块更改为下一张幻灯片时，youtubevideo停止播放。

我看看其他stackoverflow的答案，但找不到任何东西。

我试过这个 –

这是我的div结构 –

我用JS –

 $("#mainSlider").slick({ dots: true, autoplay: false, autoplaySpeed: 7000, speed: 500, pauseOnHover: true, responsive: [ { breakpoint: 1025, settings: { arrows: true, dots: false } } ] }) .on('afterChange', function( e, slick, currentSlide ) { $('.bumper').css('display', 'block'); playpausevideo($currentSlide.eq(e).data('youtubeplayer'), 'pause') }); 

Youtube JS –

 function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference) jQuery(function($){ // when DOM has loaded var $contentdivs = $('.sliderItem').find('div.playerID') $contentdivs.each(function(i){ // loop through the content divs var $contentdiv = $(this) var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists if ($youtubeframe.length == 1){ var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object) events: { 'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading } }) $contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object } }) }) } function playpausevideo(player, action){ if (player && player._donecheck === true){ if (action == "play") player.playVideo() else if (action == "pause") player.pauseVideo() }  

此代码无效，youtubevideo无法停止，幻灯片更改时仍在播放。

有什么建议？

谢谢

Answer 1

我会重置HTML内容。 它会杀死IFrame并重建它。

 var slider = $('.mainSlider').slick({ slidesToShow: 1, autoplay: false, autoplaySpeed: 5000 }); slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){ var current = $('.slick-current'); current.html(current.html()); });