JQuery Cycle Plugin이 실수로 다시 시작됩니다.

YouTube 동영상이 포함 된 슬라이드 쇼에서 슬라이드를 찾고 있습니다. 그것은해야한다 : YouTube 동영상을 재생하는 동안 JQuery Cycle Plugin이 실수로 다시 시작됩니다.

일시 정지 마우스 오버에

일시 중지
내가 슬라이드 쇼 JQuery와주기 플러그인을 사용하여 페이지 매김을

가 포함되어 있습니다. http://jquery.malsup.com/cycle/

및 YouTube의 iframe이 API https://developers.google.com/youtube/iframe_api_reference

슬라이드 쇼 일시 정지를 사용하고 비디오의 재생/일시 정지에 대해 올바르게 다시 시작합니다; 그러나 비디오 슬라이드의 마우스 아웃을 다시 시작하면 다시 시작됩니다.

JQuery Cycle Plugin을 사용하는 것을 막을 수있는 방법이 있습니까?

감사합니다.

<!-- added to example from http://jquery.malsup.com/cycle/ --> 

<html> 
<head> 
<title>JQuery Cycle Plugin - with YouTube</title> 

<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
/* slideshow pagination */ 
#nav_slideshow { width: 232px; margin: auto } 
#nav_slideshow a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; } 
#nav_slideshow a.activeSlide { background: #ea0 } 
#nav_slideshow a:focus { outline: none; } 
</style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
    <script type="text/javascript"> 

     var theslideshow; 
     $(document).ready(function() { 
     theslideshow = $(".slideshow") 
      .before('<div id="nav_slideshow">') 
      .cycle({ 
       fx: 'fade', 
       pause: true, // pause on mouseover - will still fire resume 
           // after cycle('pause') is called to play video 
           // then if user leaves YouTube's iframe it resumes slideshow 
       timeout: 2500, 
       speed: 2500, 
       sync: 1, 
       pager: '#nav_slideshow' 
      }); 
     }); 

     // Access YouTube's APIs 
     // https://developers.google.com/youtube/iframe_api_reference 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // pause slide show when youtube video is playing <-- not working yet! 
     // mouseout event triggers resume in Cycle's pause on mouseover 
     function onPlayerStateChange(event){ 
     console.log(event.data); 
     if(event.data == '1') { 
      theslideshow.cycle('pause'); 
     } else if((event.data == '0') || (event.data == '2')) { 
      theslideshow.cycle('resume'); 
     } 
     } 

    </script> 
    </head> 
    <body> 
     <div class="slideshow"> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
      <iframe id="player" width="560" height="315" src="http://www.youtube.com/embed/7CGQzQuH4X4?enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </body> 
    </html>

출처

2013-01-17 user877718

정확한 해결책은 없지만 간단한 대안입니다.

cycle-upgrade를 cycle2 - http://jquery.malsup.com/cycle2/으로 사용 했으므로 이미 youtube 비디오 용 cycle2 확장이 있습니다 (다운로드 섹션 확인).

구문이 거의 동일하기 때문에 코드의 90 %를 사용할 수 있습니다 - 일부 새 옵션을 제외하고 (일부는 이름이 변경됨).

출처

2013-01-17 12:44:11 easwee

JQuery Cycle Plugin이 실수로 다시 시작됩니다.

답변

관련 문제