2010-12-16 3 views
1

onyoutubeplayerready 함수를 필요로하는 두 개의 다른 플러그인을 사용하고 있습니다.원래 - 다형성 문제를 덮어 쓰지 않고 자바 스크립트에서 여러 함수를 호출?

http://code.google.com/p/jquery-tubular/ 
http://badsyntax.github.com/jquery-youtube-player/examples/player.html 

둘 다 선언하고 onyoutubeplayerready 함수를 초기화합니다. 따라서 플러그인 중 하나가 작동하지 않게됩니다.

나는 머리 태그에이 세 가지가 있습니다

<script type="text/javascript"> 
//<![CDATA[ 

(function($){ 
    var config = { 

     repeatPlaylist: 1, 

     // Custom playlist 
     playlist: { 
      title: 'Random videos', 
      videos: [ 
       { id: 'CJCTiC1po8E', title: 'VCore Intro'}, 
       { id: 'ydCF922o944', title: 'VCore Admin' }, 
       { id: 'yC-_eqPqaoY', title: 'VCore Admin System' }, 
       { id: '7qkE30S2Btk', title: 'VCore Site' } 
      ] 
     } 

     /* 
     // Youtube playlist 
     playlist: { 
      playlist: '71B8152559FA2805' 
     } 

     // Latest user videos 
     playlist: { 
      user: 'TheSensless' 
     } 
     */ 
    }; 

    $('.youtube-player').player(config) 

})(this.jQuery); 
//]]> 
</script> 
<script type="text/javascript"> 
(function($){ 
function initializeTub(){ 
    $('body').tubular('_VKW_M_uVjw','wrapper'); 

} 
$('a').click(function(){initializeTub()}); //clicking a random link just to test it 
})(jQuery) 
</script> 

@epascarello

나는 당신의 솔루션을 시도 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript" src="js/jquery.youtube.player.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script> 

모두 스크립트가 바로 종료 body 태그 전에 정의된다.

   window.onYouTubePlayerReady = function(id){ 
       console.log('2'); 


       var player = document.getElementById(id); 

       player.addEventListener("onStateChange", 'onytplayerStateChange' + id); 

       player.addEventListener('onError', 'onytplayerStateChange' + id); 

       window['onytplayerStateChange' + id](9); 
      }; 

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function onYouTubePlayerReady(playerId) { 
console.log('1'); 
ytplayer = document.getElementById("myytplayer"); 
ytplayer.setPlaybackQuality('medium'); 
ytplayer.mute(); 

_onYouTubePlayerReady(playerId); 

콘솔은 다음을 출력합니다.

2 
2 

따라서, 먼저 선언 된 것을 두 번 호출합니다. 그리고 콘솔이 출력하지 않기 때문에 두 번째는 절대 호출되지 않습니다.

그러나 자바 스크립트 프로그래머 참조 :

In fact, if you attempt to overload a function, the most recent definition will be used. This is because of the mutable nature of objects such as functions. 

그래서 그 경우 :

 <script type="text/javascript" src="js/jquery.youtube.player.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script> 

하나의 함수 관형으로 정의 된 것이 두 번째 이유입니다. 함수가 결국 호출 될 때 가리키는 점이 아닌 이유는 무엇입니까? 관형 스크립트가 두 번째로 제공됩니다.

또한 Fred의 솔루션도 작동하지 않았습니다.

나는 이것을 시도하고 그것도 작동하지 않았다 :

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function _onYouTubePlayerReady(playerId) { 
console.log('1'); 
ytplayer = document.getElementById("myytplayer"); 
    ytplayer.setPlaybackQuality('medium'); 
    ytplayer.mute(); 

} 
_onYouTubePlayerReady(playerId); 

그건 그렇고, 내가 어떤 시점에서 Google에 분명히 마술처럼 부름을 받았을 때 아무런 단서도 없다. 플러그인과 함께 제공되는 스크립트

응답 해 주셔서 감사합니다.

+0

당신이 코드 수정을 원하는 뭔가에 오는 하나를 변경 수 있을까? – Fred

+0

예, 어디서 함수가 호출되는지는 알 수 없습니다. – JohnMerlino

답변

0

이 작업을 수행하는 방법은 jQuery의 .trigger() 함수로 사용자 지정 이벤트를 발생시키는 것입니다 (이 작업을 수행하는 순수한 JS 방법을 알지 못합니다).jQuery를에

function onMyCustomEventTwo(playerId) { 
    ytplayer = document.getElementById("myytplayer"); 
    ytplayer.setPlaybackQuality('medium'); 
    ytplayer.mute(); 
} 

과 :

window.onMyCustomEventOne = function(id){ 
    var player = document.getElementById(id); 
    player.addEventListener("onStateChange", 'onytplayerStateChange' + id); 
    player.addEventListener('onError', 'onytplayerStateChange' + id); 

      window['onytplayerStateChange' + id](9); 
     }; 
    } 

Tubular을 :
Youtube.player.js을 : 그런 다음에 코드를 변경할 수 있습니다

window.onYouTubePlayerReady = function(vars){ 
    $('window').trigger('myCustomEventOne',vars).trigger('myCustomEventTwo',vars); 
}; 

희망이 도움이!

+0

이 솔루션은 작동하지 않았습니다. – JohnMerlino

+0

Tubular에서도'onMyCustomEventTwo'를 호출하는 코드를 변경해야하지만 코드를 게시하지 않았으므로 변경할 수 없습니다. – Fred

0

당신은 두 번째 그래서이

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function onYouTubePlayerReady(playerId) { 
    //whatever code needs to be here 
    _onYouTubePlayerReady(playerId); 
} 
+0

이 작동하지 않았습니다. 콘솔의 결과가 작동하지 않는 이유에 대한 내 질문을 업데이트했습니다. – JohnMerlino