[jQuery Plugins] 影片在bootstrap carousel中時，當影片播放時如何停止carousel

很多網站的banner都會使用bootstrap carousel這個外掛，
當使用者點擊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");
            });
        });