gpt4 book ai didi

javascript - 播放 Vimeo 视频时暂停 Bootstrap 轮播

转载 作者:行者123 更新时间:2023-11-30 16:56:41 25 4
gpt4 key购买 nike

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

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

当我点击视频上的“播放”时是否可以暂停 slider ?目前当我点击播放时它仍然会自动播放其余的轮播元素.**

感谢您的任何建议。

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

最佳答案

编辑:

由于关于 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 事件。

关于javascript - 播放 Vimeo 视频时暂停 Bootstrap 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29594524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com