播放Vimeo视频时暂停Bootstrap Carousel

I have a simple Bootstrap Carousel which includes a video.

我有一个简单的Bootstrap Carousel,其中包含一个视频。

Here is my Demo: http://jsfiddle.net/Q2TYv/2053/

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

Is it possible I can pause the slider when I click 'Play' on the video? Currently when I click Play it still autoplays through the rest of the carousel items.**

当我点击视频上的“播放”时,我是否可以暂停滑块?目前,当我点击播放时,它仍会通过剩余的轮播项目自动播放。**

Thanks for any advice.

谢谢你的建议。

// 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>

2 个解决方案

#1

EDIT:

The solution i first posted below does not work because of the same-origin-policy regarding iframes, sorry (see here).

我首先在下面发布的解决方案不起作用,因为关于iframe的同源策略,抱歉(见这里)。

So - using the solution mentioned in that post - this the a bit more elaborate solution:

所以 - 使用该帖子中提到的解决方案 - 这是一个更精细的解决方案:

var overiFrame = false;

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

});

THIS IS NOT WORKING BECAUSE OF THE SAME-ORIGIN-POLICY:

这不是因为同样的原因 - 政策:

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

The best solution, without any hacks like above, would probably be to implement the vimeo JS API and use that to register PLAY and PAUSE events on the video.

没有上述任何黑客攻击的最佳解决方案可能是实现vimeo JS API并使用它来在视频上注册PLAY和PAUSE事件。

#2

In order to avoid DOM and iframe sniffing, you can use vimeo frogaloop api's to check if the video is started and if so stop the carousel and when it's ended start it again.

为了避免DOM和iframe嗅探,您可以使用vimeo frogaloop api来检查视频是否已启动,如果是,则停止旋转木马以及何时结束再次启动它。

In your HTML you have to add an id to the iframe and pass it in the vimeo querystring like:

在HTML中,您必须向iframe添加一个id,并将其传递给vimeo查询字符串,如:

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

Code:

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');
}

Demo: http://jsfiddle.net/ednzc1de/

#1