播放 Vimeo 视频时暂停引导轮播
Posted
技术标签:
【中文标题】播放 Vimeo 视频时暂停引导轮播【英文标题】:Pause Bootstrap Carousel when playing Vimeo video 【发布时间】:2015-06-18 03:01:20 【问题描述】:我有一个简单的引导轮播,其中包含一个视频。
这是我的演示:http://jsfiddle.net/Q2TYv/2053/
是否可以在我点击视频上的“播放”时暂停滑块?目前,当我点击Play
时,它仍会自动播放其余的轮播项目。** p>
感谢您的建议。
// 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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 的点击并在有人点击 iframe 时停止轮播吗? 你能告诉我怎么做吗?我是一个 JS 新手。 在我的回答中这样做了。 【参考方案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 并使用它来注册视频上的播放和暂停事件,而无需像上述任何黑客攻击。
【讨论】:
我在这里试过这个代码:jsfiddle.net/Q2TYv/2058 但没有成功。可以试试吗?【参考方案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 视频时暂停引导轮播的主要内容,如果未能解决你的问题,请参考以下文章