fancybox 2 슬라이드 쇼 (이미지와 비디오가 있지만 비디오가 끝날 때까지 기다림)

Question

이미지와 비디오가 포함 된 fancybox2 (v2.1.5) 갤러리가 있습니다. 갤러리를 슬라이드 쇼 (자동 실행 : true)로 표시하려고하지만 playSpeed가 올라갈 때 동영상이 중단됩니다 (예 : playSpeed ​​: 3000). 슬라이드 쇼에서 다음 이미지 또는 비디오로 계속 진행하기 전에 비디오 재생이 끝날 때까지 기다렸다가 본질적으로 playSpeed ​​값에 관계없이 비디오 지속 시간 동안 슬라이드 쇼를 일시 중지하고 싶습니다.

$(document).ready(function() { 
    $.fancybox.open(
    [ 
     { href : 'https://www.google.com/images/srpr/logo11w.png', title : 'first image' }, 
     { href : 'http://www.youtube.com/embed/XYZ?autoplay=1', title : 'first video', type : 'iframe' }, 
     { href : 'https://some/other/image.png', title : 'second image' } 
    ] 
    , 
    { autoPlay : true, playSpeed : 3000 } 
); 
}); 

내가 (즉, 어떤 버튼을 클릭 없음) 사용자 상호 작용없이 원하는대로 슬라이드 쇼가 행동에 대한 선호 : 여기

내가 현재 가지고있는 샘플입니다.

Fancybox 2에서는 이러한 종류의 동작이 가능합니까?

Answer 1

솔루션은 상상할 수있는 것보다 조금 복잡하지만 가능합니다.

첫째, 당신은 귀하의 페이지에 몇 가지 더 많은 자원을로드해야합니다

1. youtube's player API
2. Fancybox media helper는

그런 다음, 당신은 .ready() 방법을 포함하여 전체 fancybox 초기화 코드를 (포장 필요) onYouTubePlayerAPIReady() 기능 :

function onYouTubePlayerAPIReady() { 
    $(document).ready(function() { 
     $.fancybox.open([...],{ 
      // API options 
     }); // fancybox 
    }); // ready 
}; 

위의 기능을 사용하면 YouTube 플레이어의 이벤트를 감지 할 수 있습니다 (예 :

는 또한, 당신은 유튜브 이벤트를 처리하는 또 다른 함수를 작성해야 등), 비디오의 끝, 시작, 일시 정지 (

function onPlayerStateChange(event) { 
    // callback for youtube events 
}; 

지금, 재미가) fancybox 콜백 내에서 호출됩니다 fancybox 및 youtube 이벤트를 모두 탐지 할 때 :

• 은 콘텐츠 비디오 또는 이미지입니까? if video : 슬라이드 쇼를 일시 중지합니다.
• fancybox 슬라이드 쇼 상태 란 무엇입니까? 일시 중지 또는 사용 중입니까?
• 은 youtube 비디오 완성입니까? 그래서 우리는 슬라이드 쇼를 재개 할 수 있습니다.
• 방문자가 비디오를 보면서 수동으로 갤러리를 전진하면 어떻게됩니까? 비디오의 끝 부분이 감지되지 않고 슬라이드 쇼가 다시 시작되지 않을 수 있습니다.

다음은 전체 문서화 된 코드입니다 (갤러리 요소가 없으므로 짧음).

이 작업 방법을 참조하십시오 JSFIDDLE

function onPlayerStateChange(event) { 
    if (event.data === 0) { 
     // video is finished 
     $.fancybox.play(); // resume slide show 
    } 
} 

function onYouTubePlayerAPIReady() { 
    $(document).ready(function() { 
     $.fancybox.open([....], { 
      autoPlay: true, 
      playSpeed: 3000, 
      helpers: { 
       media: {} 
      }, 
      beforeLoad: function() { 
       // the coming content is iframe (video) 
       // and the slideshow is active/running 
       if (this.type == "iframe" && $.fancybox.player.isActive) { 
        $.fancybox.play(); // pause slide show 
       } else if (!$.fancybox.player.isActive) { 
        // the slideshow is paused 
        // most likely we advanced gallery using arrows 
        $.fancybox.play(); // resume slideshow 
       }; 
      }, 
      beforeShow: function() { 
       if (this.type == "iframe") { 
        // bind callback to youtube events 
        var id = $.fancybox.inner.find('iframe').attr('id'); 
        var player = new YT.Player(id, { 
         events: { 
          onStateChange: onPlayerStateChange 
         } 
        }); 
       }; 
      }, 
      margin: [20, 60, 20, 60] // Increase left/right margin 
     }); // fancybox 
    }); // ready 
} // youtube API ready 

당신은 통지 (또한 API 만 비디오를 재생하는 동안 외부 fancybox를 이동 fancybox 탐색 화살표를 만드는 JSFIDDLE에서 일부 CSS 코드를 알합니다 옵션 margin.) 이렇게하면 youtube의 컨트롤에 액세스 할 수 있습니다. 그렇지 않으면 화살표로 차단됩니다.

마지막 주 :

이 솔루션은 YouTube 동영상으로 만 작동합니다. 다른 유형의 동영상의 경우 동영상 변경 이벤트를 처리하기 위해 자체 API를 구현해야 할 수 있습니다.