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

Posted

技术标签:

【中文标题】Bootstrap 轮播 - 播放 YouTube 视频时暂停【英文标题】:Bootstrap carousel - pause when YouTube video played 【发布时间】:2013-08-16 23:40:10 【问题描述】:

我的 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 大于掩码(因此用户仍可以手动播放幻灯片)。

希望这对其他人有用!

【问题讨论】:

您可以在 iframe 上放置一个叠加层,单击该叠加层会暂停轮播并将 iframe 重定向到相同的视频,但会启用自动播放。不太确定你将如何启动它。 您能否更详细地解释一下我如何完成最后一部分(通过自动播放将 iframe 重定向到同一视频)? theiframe.src = "http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1" 不要编辑您自己的问题,而是在您的解决方案中添加答案并将其标记为已接受。 【参考方案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);
      
    );

需要检查的一些事项:确保引导轮播控件的 z-index 大于掩码(因此用户仍可以手动播放幻灯片)。

希望这对其他人有用!

【讨论】:

引导轮播幻灯片事件现已命名为命名空间 - 新事件名称为“slide.bs.carousel”。 只是添加到大卫的评论 - 你应该替换 $('.projectOverviewCarousel').on('slide', function() 与 $('.projectOverviewCarousel').bind('slide.bs .carousel', 函数 (e) 【参考方案2】:

2016 年 4 月发布的新 Carousel 2 增加了对视频播放的更多支持。查看their website,尤其是video documentation。

这是他们网站上的代码示例:

设置

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

【讨论】:

以上是关于Bootstrap 轮播 - 播放 YouTube 视频时暂停的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap2 的图片轮播,如何自动播放?

bootstrap2 的图片轮播,如何自动播放?

视频播放时停止轮播 - Bootstrap 4

自动播放时 twitter-bootstrap 轮播导航和内容不同步

Bootstrap 模式关闭时 Youtube 视频仍在播放

html 完整示例 - 在模态中自动播放youtube视频(Bootstrap + Jquery)