引导旋转木马-在YouTube视频播放时暂停。

[英]Bootstrap carousel - pause when YouTube video played


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视频在我的引导旋转木马。默认情况下,carousel会自动前进,但我想在视频播放时暂停一下。

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

在播放视频的时候是否有检测的技巧?如果可能的话,我希望不使用YouTube API(每个旋转木马都有任意数量的视频,我不希望创建每个视频的实例)。

Edit: Final Design

编辑:最终设计

I created an overlap over the video:

我在视频中创建了一个重叠部分:

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

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

当我点击面具时,我将相应的iframe设置为autoplay,隐藏掩码,并暂停旋转木马:

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

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

当用户单击旋转木马控件时,将重置所有蒙版和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);
      }
    });

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

需要检查的一些事项:确保引导旋转木马的控件具有大于掩码的z索引(这样用户仍然可以手动地进行幻灯片)。

Hope this is useful to someone else!

希望这对别人有用!

2 个解决方案

#1


11  

I created an overlap over the video:

我在视频中创建了一个重叠部分:

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

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

当我点击面具时,我将相应的iframe设置为autoplay,隐藏掩码,并暂停旋转木马:

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

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

当用户单击旋转木马控件时,将重置所有蒙版和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);
      }
    });

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

需要检查的一些事项:确保引导旋转木马的控件具有大于掩码的z索引(这样用户仍然可以手动地进行幻灯片)。

Hope this is useful to someone else!

希望这对别人有用!

#2


0  

The new Carousel 2, which was released during April 2016, added more support for video playback. Check out their website, especially the video documentation.

新的旋转木马2在2016年4月发布,增加了对视频播放的支持。看看他们的网站,尤其是视频文档。

Here is a code example from their website:

以下是他们网站的一个代码示例:

Setup

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/08/14/f3e153adac9f1463d7325dda471b88c1.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com