我的Bootstrap轮播中有一些嵌入式YouTube视频。默认情况下,轮播会自动前进,但我想在播放视频时暂停。
是否有检测视频播放时间的技巧?我想在不使用YouTube API的情况下这样做(每个轮播都有任意数量的视频,我不想创建每个视频的实例)。
编辑:最终设计
我在视频上创建了重叠:
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
当我点击遮罩时,我将相应的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');
});
当用户点击轮播控件时,它会重置所有蒙版和iframe网址:
$('.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);
}
});
要检查的一些事项:确保引导程序轮播的控件的z-index大于遮罩(因此此人仍可以手动进行幻灯片演示)。
希望这对其他人有用!
答案 0 :(得分:11)
我在视频上创建了重叠:
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
当我点击遮罩时,我将相应的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');
});
当用户点击轮播控件时,它会重置所有蒙版和iframe网址:
$('.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);
}
});
要检查的一些事项:确保引导程序轮播的控件的z-index大于遮罩(因此此人仍可以手动进行幻灯片演示)。
希望这对其他人有用!
答案 1 :(得分:0)
2016年4月发布的新 Carousel 2 增加了对视频播放的更多支持。查看their website,尤其是video documentation。
以下是他们网站的代码示例:
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
})
<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>