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

Question

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

jquerytwitter-bootstrapyoutubecarousel

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

一些需要检查的事情：确保Bootstrap轮播的控件具有比蒙版更高的z-index（使人们仍然可以手动进度幻灯片）。

希望这对其他人有用！

- scientiffic

1

您可以在 iframe 上放置一个覆盖层，当单击时，暂停轮播并将 iframe 重定向到相同的视频，但自动播放已开启。不太确定如何继续进行。 - Kevin B

你能否详细解释一下如何完成最后一部分（将iframe重定向到具有自动播放功能的同一视频）？ - scientiffic

1

theiframe.src = "http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1" - Kevin B

1

不要编辑您自己的问题，而是添加一个包含您的解决方案的答案，并将其标记为已接受。 - madth3

2个回答

0

新的Carousel 2在2016年4月发布，增加了对视频播放的更多支持。请查看他们的网站，特别是视频文档。

以下是他们网站上的代码示例：

设置

$('.owl-carousel').owlCarousel({
    items:1,
    merge:true,
    loop:true,
    margin:10,
    video:true,
    lazyLoad:true,
    center:true,
    responsive:{
        480:{
            items:2
        },
        600:{
            items:4
        }
    }
})

HTML

<div class="owl-carousel owl-theme">
    <div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
    <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
    <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div>
    <div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=0fhoIate4qI"></a></div>
    <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div>
</div>

- krismath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scientiffic · Accepted Answer

我在视频上创建了一个重叠效果：

.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-index（这样人们仍然可以手动进度幻灯片）。

希望这对其他人有用！