1

我正在使用两个需要 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 );

顺便说一句，我不知道什么时候调用它，显然在某些时候神奇地调用了谷歌，但绝对不是插件附带的任何脚本。

感谢您的回复。

4

2 回答 2

0

一种方法是使用 jQuery 的.trigger()函数触发一个自定义事件（我不知道纯 JS 的方法）。然后您可以将代码更改为以下内容
Youtube.player.js：

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

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

Tubular：

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

在 jQuery 中：

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

希望这可以帮助！

于 2010-12-16T02:20:34.233 回答
0

您可以将第二个更改为这样的

var _onYouTubePlayerReady = onYouTubePlayerReady;
function onYouTubePlayerReady(playerId) {
    //whatever code needs to be here
    _onYouTubePlayerReady( playerId );
}
于 2010-12-16T04:02:22.517 回答