在播放Vimeo视频时暂停引导传送带

Question

我有一个简单的引导传送带，其中包含视频。

这里是我的演示：http://jsfiddle.net/Q2TYv/2053/

是否有可能，我可以暂停，当我点击视频“播放”滑块？目前，当我点击Play它仍然自动播放其余的传送带物品。**

感谢您的任何建议。

// invoke the carousel 
 
$('#myCarousel').carousel({ 
 
    interval: 3000 
 
}); 
 

 
/* SLIDE ON CLICK */ 
 

 
$('.carousel-linked-nav > li > a').click(function() { 
 

 
    // grab href, remove pound sign, convert to number 
 
    var item = Number($(this).attr('href').substring(1)); 
 

 
    // slide to number -1 (account for zero indexing) 
 
    $('#myCarousel').carousel(item - 1); 
 

 
    // remove current active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // add active class to just clicked on item 
 
    $(this).parent().addClass('active'); 
 

 
    // don't follow the link 
 
    return false; 
 
}); 
 

 
/* AUTOPLAY NAV HIGHLIGHT */ 
 

 
// bind 'slid' function 
 
$('#myCarousel').bind('slid', function() { 
 

 
    // remove active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // get index of currently active item 
 
    var idx = $('#myCarousel .item.active').index(); 
 

 
    // select currently active item and add active class 
 
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 
 

 
});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css'); 
 

 
#myCarousel { 
 
    margin-top: 40px; 
 
} 
 

 
.carousel-linked-nav, 
 
.item img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.carousel-linked-nav { 
 
    width: 120px; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script> 
 
<div id="myCarousel" class="carousel slide"> 
 
    <!-- Carousel items --> 
 
    <div class="carousel-inner"> 
 
    <div class="active item"> 
 
     <img src="http://placehold.it/300x200/444&text=Item 1" /> 
 
    </div> 
 
    <div class="item"> 
 
     <iframe src="https://player.vimeo.com/video/124400795"></iframe> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/300x200/444&text=Item 3" /> 
 
    </div> 
 
    </div> 
 
    <!-- Carousel nav --> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 
</div> 
 

 
<!-- LINKED NAV --> 
 
<ol class="carousel-linked-nav pagination"> 
 
    <li class="active"><a href="#1">1</a></li> 
 
    <li><a href="#2">2</a></li> 
 
    <li><a href="#3">3</a></li> 
 
</ol>

Answer 1

编辑：

的解决方案，我第一个贴在下面，因为对于I帧同源政策的不工作，对不起（见here）。

所以 - 使用在文章中提到的解决方案 - 这是一个有点复杂的解决方案：

var overiFrame = false; 

$('#myCarousel iframe').hover(function() { 
    overiFrame = true; 
}, function() { 
    overiFrame = false; 
}); 
$(window).blur(function() { 
    if(overiFrame){ 
     $('#myCarousel').carousel('pause'); 
    } 

}); 

这并不是因为相同来源，政策工作：

$('#myCarousel .item iframe').on('click', function(){ 
    $('#myCarousel').carousel('pause'); 
}); 

的最好的解决方案，没有像上面这样的黑客，可能会实现vimeo JS API并使用它来注册视频上的播放和暂停事件。

Answer 2

为了避免DOM和iframe嗅探，您可以使用vimeo frogaloop api's来检查视频是否已启动，如果是这样，请停止轮播以及何时结束再次启动。

在HTML你有一个ID添加到iframe和传递的查询字符串VIMEO像：

<iframe id="myVideo" src="https://player.vimeo.com/video/124400795?api=1&player_id=myVideo"></iframe> 

代码：

var iframe = $('#myVideo')[0]; 
var player = Froogaloop(iframe); 


// When the player is ready, add listeners for finish, and playProgress 
player.addEvent('ready', function() { 
    player.addEvent('finish', onFinish); 
    player.addEvent('playProgress', onPlayProgress); 
}); 

function onFinish(id) { 
    $('#myCarousel').carousel('play'); 
} 

function onPlayProgress(data, id) { 
    $('#myCarousel').carousel('pause'); 
} 

演示：http://jsfiddle.net/ednzc1de/