Bootstrap 轮播 - 播放 YouTube 视频时暂停 [英] Bootstrap carousel - pause when YouTube video played

问题描述

我的 Bootstrap 轮播中嵌入了一些 YouTube 视频.默认情况下，轮播会自动前进，但我想在播放视频时暂停.

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.

有什么技巧可以检测视频何时播放?如果可能的话，我想不使用 YouTube API 来实现(每个轮播都有任意数量的视频，我不想为每个视频创建实例).

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

最终设计

我在视频上创建了重叠:

I created an overlap over the video:

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

当我点击蒙版时，我将相应的 iframe 设置为自动播放、隐藏蒙版和暂停轮播:

When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:

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

When the user clicks on the carousel controls, it resets all masks and iframe urls:

  $('.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 大于掩码(因此该人仍然可以手动进行幻灯片放映).

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

希望这对其他人有用！

推荐答案

我在视频上创建了重叠部分:

I created an overlap over the video:

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

当我点击蒙版时，我将相应的 iframe 设置为自动播放、隐藏蒙版和暂停轮播:

When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:

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

When the user clicks on the carousel controls, it resets all masks and iframe urls:

  $('.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 大于掩码(因此该人仍然可以手动进行幻灯片放映).

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

希望这对其他人有用！

这篇关于Bootstrap 轮播 - 播放 YouTube 视频时暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！