引导轮播-播放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索引大于遮罩(这样，该人仍可以手动进行幻灯片放映).

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索引大于遮罩(这样，该人仍可以手动进行幻灯片放映).

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

希望这对其他人有用！

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