twitter-bootstrap Bootstrap 轮播 - 播放 YouTube 视频时暂停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18241569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel - pause when YouTube video played
提问by scientiffic
I have some embedded YouTube videos in my Bootstrap carousel. By default, the carousel advances automatically, but I'd like to to pause when a video is playing.
我的 Bootstrap 轮播中嵌入了一些 YouTube 视频。默认情况下，轮播会自动前进，但我想在播放视频时暂停。
Is there a trick to detecting when the video is playing? I'd like to do it without using the YouTube API if possible (each carousel has an arbitrary number of videos, and I'd like not to create instances of every video).
是否有检测视频何时播放的技巧？如果可能的话，我想在不使用 YouTube API 的情况下做到这一点（每个轮播都有任意数量的视频，我不想为每个视频创建实例）。
Edit: Final Design
编辑：最终设计
I created an overlap over the video:
我在视频上创建了一个重叠：
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:
当我点击蒙版时，我将相应的 iframe 设置为自动播放，隐藏蒙版，并暂停轮播：
$('.video_mask').click(function(){
iframe = $(this).closest('.item').find('iframe');
iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
// hide the mask
$(this).toggle();
// stop the slideshow
$('.projectOverviewCarousel').carousel('pause');
});
When the user clicks on the carousel controls, it resets all masks and iframe urls:
当用户单击轮播控件时，它会重置所有掩码和 iframe url：
$('.projectOverviewCarousel').on('slide', function(){
var iframeID = getID($(this).find('iframe').attr("id"));
// stop iframe from playing
if(iframeID != undefined){
callPlayer(iframeID, 'stopVideo');
}
// turn on all masks
$('.video_mask').show();
// reset src of all videos
$('.projectOverviewCarousel').find('iframe').each(function(key, value){
url = $(this).attr('src');
if(url.indexOf("autoplay")>0){
new_url = url.substring(0, url.indexOf("?"));
$(this).attr('src', new_url);
}
});
Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually).
需要检查的一些事项：确保引导程序轮播控件的 z-index 大于掩码（因此该人仍然可以手动进行幻灯片放映）。
Hope this is useful to someone else!
希望这对其他人有用！
回答by scientiffic
I created an overlap over the video:
我在视频上创建了一个重叠：
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:
当我点击蒙版时，我将相应的 iframe 设置为自动播放，隐藏蒙版，并暂停轮播：
$('.video_mask').click(function(){
iframe = $(this).closest('.item').find('iframe');
iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
// hide the mask
$(this).toggle();
// stop the slideshow
$('.projectOverviewCarousel').carousel('pause');
});
When the user clicks on the carousel controls, it resets all masks and iframe urls:
当用户单击轮播控件时，它会重置所有掩码和 iframe url：
$('.projectOverviewCarousel').on('slide', function(){
var iframeID = getID($(this).find('iframe').attr("id"));
// stop iframe from playing
if(iframeID != undefined){
callPlayer(iframeID, 'stopVideo');
}
// turn on all masks
$('.video_mask').show();
// reset src of all videos
$('.projectOverviewCarousel').find('iframe').each(function(key, value){
url = $(this).attr('src');
if(url.indexOf("autoplay")>0){
new_url = url.substring(0, url.indexOf("?"));
$(this).attr('src', new_url);
}
});
Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually).
需要检查的一些事项：确保引导程序轮播控件的 z-index 大于掩码（因此该人仍然可以手动进行幻灯片放映）。
Hope this is useful to someone else!
希望这对其他人有用！
回答by krismath
The new Carousel 2, which was released during April 2016, added more support for video playback. Check out their website, especially the video documentation.
2016 年 4 月发布的新Carousel 2增加了对视频播放的更多支持。查看他们的网站，尤其是视频文档。
Here is a code example from their website:
这是他们网站上的代码示例：
Setup
设置
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
})
HTML
HTML
<div class="owl-carousel owl-theme">
<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div>
<div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=0fhoIate4qI"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div>
</div>
