Bootstrap轮播 – 播放YouTubevideo时暂停

我的Bootstrap轮播中有一些嵌入式YouTubevideo。 默认情况下，轮播会自动前进，但我想在播放video时暂停。

是否有检测video播放时间的技巧？ 我想在不使用YouTube API的情况下这样做（每个轮播都有任意数量的video，我不想创建每个video的实例）。

编辑：最终设计

我在video上创建了重叠：

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

当用户点击轮播控件时，它会重置所有蒙版和iframeurl：

  $('.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大于掩码（因此该人仍然可以手动进行幻灯片演示）。

希望这对其他人有用！

Answer 1

我在video上创建了重叠：

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

当用户点击轮播控件时，它会重置所有蒙版和iframeurl：

  $('.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大于掩码（因此该人仍然可以手动进行幻灯片演示）。

希望这对其他人有用！

Answer 2

新的Carousel 2于2016年4月发布，增加了对video播放的支持。 查看他们的网站 ，尤其是video文档 。

这是他们网站上的代码示例：

建立

 $('.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