Question

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

以下是我的演示：http://jsfiddle.net/Q2TYv/2053/

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

感谢您的任何建议。

＆＃13;

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

＆＃13;

@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;   
}

＆＃13;

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

＆＃13;

Answer 1

编辑：

我首先在下面发布的解决方案不起作用，因为有关iframe的同源政策，抱歉（请参阅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并使用它来在视频上注册PLAY和PAUSE事件。

Answer 2

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

在您的HTML中，您必须向iframe添加一个ID并将其传递到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/

播放Vimeo视频时暂停Bootstrap Carousel

2 个答案: