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

Question

我的 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 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);
      }
    });

需要检查的一些事项:确保 Bootstrap 轮播的控件的 z 索引大于 mask (以便用户仍然可以手动进行幻灯片放映)。

希望这对其他人有用!

Answer 1

我在视频上创建了重叠:

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

需要检查的一些事项:确保 Bootstrap 轮播的控件的 z 索引大于 mask (以便用户仍然可以手动进行幻灯片放映)。

希望这对其他人有用!