jquery – Bootstrap轮播 – 播放YouTube视频时暂停

我的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大于掩码(因此该人仍然可以手动进行幻灯片演示).

希望这对其他人有用！

解决方法

我在视频上创建了重叠：

.video_mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:275px;
  z-index:25;
  opacity:0;
}

当我点击蒙版时,new_url); } });

要检查的一些事项：确保引导程序轮播的控件的z-index大于掩码(因此该人仍然可以手动进行幻灯片演示).

希望这对其他人有用！