當使用者點擊carousel的影片播放時,需要暫停carousel自動換頁的動作。
目前影片是採用Vimeo,所以你可以使用Froogaloop這個元件來取得Vimeo的控制。
完整範例可參考:http://developer.vimeo.com/player/js-api
一開始在用的時候,沒有認真看文件的說明,導致AddEvent的事件完全無動作,大家要注意嵌入的影片格式要包含api=1與player_id=
相關範例如下:
var $myCarousel = $("#carousel-iangel"); $myCarousel.on("slide.bs.carousel", function(event) { $.console("change slide"); var $currentSlide = $myCarousel.find(".active iframe"); // exit if there"s no iframe, i.e. if this is just an image and not a video player if (!$currentSlide.length) { return; } // pass that iframe into Froogaloop, and call api("pause") on it. var player = Froogaloop($currentSlide[0]); player.api("pause"); }); var iframe = $("#videoIntro")[0], player = $f(iframe); //$f 這是Froogaloop提供的方法 // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent("ready", function() { player.addEvent("play", function(id) { // $.console("id:" + id + " play"); $myCarousel.carousel("pause"); }); player.addEvent("pause", function(id) { // $.console("id:" + id + " pause"); $myCarousel.carousel("pause"); }); player.addEvent("finish", function(id) { // $.console("id:" + id + " finish"); $myCarousel.carousel("cycle"); }); player.addEvent("loadProgress", function(data, id) { // $.console(data.seconds + "s played"); }); });