onyoutubeplayerready 関数を必要とする 2 つの異なるプラグインを使用しています。
http://code.google.com/p/jquery-tubular/
http://badsyntax.github.com/jquery-youtube-player/examples/player.html
どちらも onyoutubeplayerready 関数を宣言して初期化します。したがって、プラグインの 1 つが機能しなくなります。
head タグには次の 3 つがあります。
<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 タグの直前に定義されています。
<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
私はあなたの解決策を試しました。最初に来るものにはこれがあります:
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);
};
2番目に来るものにはこれがあります:
var _onYouTubePlayerReady = onYouTubePlayerReady;
function onYouTubePlayerReady(playerId) {
console.log('1');
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
_onYouTubePlayerReady( playerId );
}
コンソールはこれを出力します:
2
2
したがって、最初に宣言されたものが両方とも呼び出されます。コンソールが 1 を出力しないため、2 番目の呼び出しは呼び出されません。
しかし、本 JavaScript Programmer's Reference によると:
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>
チューブラーで定義された 1 つの関数が 2 番目に来るので、関数が最終的に呼び出されるときにそれが指されないのはなぜですか? 管状のスクリプトが 2 番目に来ることに注意してください。
また、フレッドのソリューションも機能しませんでした。
私はこれを試しましたが、どちらもうまくいきませんでした:
var _onYouTubePlayerReady = onYouTubePlayerReady;
function _onYouTubePlayerReady(playerId) {
console.log('1');
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
_onYouTubePlayerReady( playerId );
ちなみに、これがいつ呼び出されるかはわかりません。ある時点で魔法のように Google が呼び出されたようですが、プラグインに付属のスクリプトにはまったくありません。
返信ありがとうございます。