5

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

確認すべき点: ブートストラップ カルーセルのコントロールの z-index がマスクよりも大きいことを確認します (ユーザーがスライドショーを手動で進められるようにするため)。

これが他の誰かに役立つことを願っています!

4

2 に答える 2

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

確認すべき点: ブートストラップ カルーセルのコントロールの z-index がマスクよりも大きいことを確認します (ユーザーがスライドショーを手動で進められるようにするため)。

これが他の誰かに役立つことを願っています!

于 2013-08-15T01:28:43.370 に答える