油滑輪播如何阻止自動播放視頻時通過YouTube API

嗨，我有麻煩得到光滑的旋轉臺（http://kenwheeler.github.io/slick/）停止時，我使用滑塊內的YouTube視頻自動播放是..油滑輪播如何阻止自動播放視頻時通過YouTube API

有人說我可以使用onAfterChange，但仍然不知道如何關閉自動播放視頻時（注意，這是當鼠標在不在視頻上）

這是我使用任何幫助的代碼會不錯:) :)

$("#slider").slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    dots: true, 
    autoplay: true, 
    autoplaySpeed: 7000, 
    infinite: true 
}); 

/* **************************************** * 
* Youtube API 
* Create player 
* **************************************** */ 
var player; 
window.onYouTubePlayerAPIReady = function() { 

    $("#player").hide(); 
    var player_id = 'player'; 
    var $player  = jQuery('#'+player_id); 
    var parent  = $player.parent(); 

    player = new YT.Player(player_id, { 
     videoId: 'HevnOuJY1TM', 
     height: parent.height(), 
     width: '100%', 
     playerVars: { 
      'autoplay': 0, 
      'controls': 0, 
      'rel' : 0, 
      'disablekb' : 0, 
      'modestbranding' : 1, 
      'showinfo': 0, 
      'html5': 1 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 


    }); 

    var sizeVideo = _.debounce(function() { 

     player.setSize('100%', parent.height()); 

    }, 500); 

    jQuery(window).on('load resize', sizeVideo); 

    jQuery(window).trigger('resize'); 
}; 

function onPlayerReady() { 
    $("#slide-video").on("click", function() { 
     $(this).css('background','transparent'); 
     $("#player").show(); 
     player.playVideo(); 
    }); 
} 

function onPlayerStateChange(event) { 

    if(event.data === 0) { 
     $(".countdown").fadeIn(); 
    } 

    if(event.data === 1) { 
     $(".countdown").fadeOut(); 
    } 

    if(event.data === 2) { 
     $(".countdown").fadeIn(); 
    } 

    if(1 === event || 2 === event || 3 === event) { 
     $('#slider') 
      .slick('slickPause') 
      .slick('slickSetOption', 'autoplay', false, true); 
    } else { 
     $('#slider').slick('slickPlay') 
      .slick('slickSetOption', 'autoplay', true, true); 
    } 
} 

});

來源

2015-05-06 Tdservice

The onAfterChange是可以在插件啓動中傳遞的浮油屬性。

/* Slick slider init */ 
$("#slider").slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    dots: true, 
    autoplay: true, 
    autoplaySpeed: 7000, 
    infinite: true, 
    onAfterChange : function() { 
    player.stopVideo(); 
    } 
});

編輯

要在視頻開始，我想看着你的代碼停止拉頭，這裏是你可以嘗試什麼：

function onPlayerReady() { 
    $("#slide-video").on("click", function() { 

     // pause the slider 
     $('#slider').slick('slickPause'); 

     $(this).css('background','transparent'); 
     $("#player").show(); 
     player.playVideo(); 
    }); 
}

來源

2015-05-06 08:46:18 Filype

好吧，但我可以像這樣掛鉤OnAfterChange？ OnAfterChange：onPlayerStateChange ??因爲它的條件符合 – Tdservice

我認爲你需要通過window.player使播放器實例全局可用，然後使用YouTube API來停止視頻 – Filype

@ user3383249 - 我用一個使用onAfterChange停止的例子更新了我的答案視頻 – Filype

我找到了解決我的問題：

function onPlayerReady() { 
     $("#slide-video").on("click", function() { 
      $(this).hover(function(){ 
       slider.slick('slickPause'); 
      }); 
      $(this).css('background','transparent'); 
      $("#player").show(); 
      player.playVideo(); 
     }); 
    } 

    function onPlayerStateChange(event) { 
     if(event.data === 0 || event.data === 2) { 
      $(".countdown").fadeIn(); 
     } 

     if(event.data === 1) { 
      $(".countdown").fadeOut(); 
     } 

     if(1 === event.data || 2 === event.data || 3 === event.data) { 
      slider.slick('slickPause'); 

     } else { 
      slider.slick('slickPlay'); 
     } 
    }

這對我的工作在鉻& Safari .. Firefox不工作和IE我不能嘗試，因爲我不是在一臺電腦，但在MAC上，但是這就是爲什麼我提出了懸停功能，因爲有人想有鼠標在那裏？

更新：好吧，它現在適用於所有..它只是在你暫停視頻，然後繼續它後，滑塊已經走了一次，它不會再使用slickPause函數。

來源

2015-05-08 08:38:28 Tdservice

「滑塊」或「播放器」在哪裏申報？ –

油滑輪播如何阻止自動播放視頻時通過YouTube API

回答

相關問題