引導旋轉木馬-在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