我正在使用两个需要 onyoutubeplayerready 功能的不同插件:
http://code.google.com/p/jquery-tubular/
http://badsyntax.github.com/jquery-youtube-player/examples/player.html
他们都声明并初始化了 onyoutubeplayerready 函数。因此,其中一个插件最终无法正常工作。
我在 head 标签中有这三个:
<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);
};
第二个是这样的:
var _onYouTubePlayerReady = onYouTubePlayerReady;
function onYouTubePlayerReady(playerId) {
console.log('1');
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
_onYouTubePlayerReady( playerId );
}
控制台输出:
2
2
因此,首先声明的那个会被调用两次。第二个永远不会被调用,因为控制台永远不会输出 1。
但根据 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>
既然在tubular中定义的第一个函数排在第二位,为什么最终调用该函数时指向的不是那个?请注意,管状脚本排在第二位。
此外,弗雷德的解决方案也不起作用。
我试过这个,它也没有工作:
var _onYouTubePlayerReady = onYouTubePlayerReady;
function _onYouTubePlayerReady(playerId) {
console.log('1');
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
_onYouTubePlayerReady( playerId );
顺便说一句,我不知道什么时候调用它,显然在某些时候神奇地调用了谷歌,但绝对不是插件附带的任何脚本。
感谢您的回复。