在jquery中使用youtube的javascript API

编辑:

显然是打电话来的 addEventListener 上 player 对象导致脚本在传递给flash对象的XML属性中用作字符串-这排除了闭包之类的问题,因此是时候进行老派的丑陋黑客攻击了:

function onYouTubePlayerReady(playerId) {
    var player = $('#'+playerId)[0];

    player.addEventListener('onStateChange', '(function(state) { return playerState(state, "' + playerId + '"); })' );
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}

测试和工作!

我使用jquery swfobject插件, SWFobject

在视频末尾添加&enableJSAPI=1很重要

HTML:

<div id="embedSWF"></div>

jQuery:

             $('#embedSWF').flash({ 
                swf: 'http://www.youtube.com/watch/v/siBoLc9vxac',
                params: { allowScriptAccess: "always"},   
                flashvars: {enablejsapi: '1', autoplay: '0', allowScriptAccess: "always", id: 'ytPlayer' },   
                height: 450,   width: 385 });

function onYouTubePlayerReady(playerId) {
                $('#embedSWF').flash(function(){this.addEventListener("onStateChange", "onPlayerStateChange")});
            }
function onPlayerStateChange(newState) {
                   alert(newState);
                 }

OnyOutubeplayerReady必须在$(document).ready(function()之外才能激发

我也遇到了同样的问题,尝试了公认的答案。这对我不起作用;从未调用playerState()函数。然而,它让我走上了正确的道路。我最后做的是:

// Within my mediaController "class"
window["dynamicYouTubeEventHandler" + playerID] = function(state) { onYouTubePlayerStateChange(state, playerID); }
  embedElement.addEventListener("onStateChange", "dynamicYouTubeEventHandler" + playerID);
// End mediaController class

// Global YouTube event handler
function onYouTubePlayerStateChange(state, playerID) {
  var mediaController = GetMediaControllerFromYouTubeEmbedID(playerID);
  mediaController.OnYouTubePlayerStateChange(state);
}

这相当糟糕,但YouTube Javascript API的当前状态也是如此。

如果您使用任何类型的高级原型设计模式,这里还有一些其他有用/讨厌的代码。这基本上允许您从YouTube播放器ID中检索“类”实例:

// Within my mediaController "class"
// The containerJQElement is the jQuery wrapped parent element of the player ID
// Its ID is the same as the player ID minus "YouTubeEmbed".
var _self = this;
containerJQElement.data('mediaController', _self);
// End mediaController class

// Global YouTube specific functions
function GetMediaControllerFromYouTubeEmbedID(embedID) {      
  var containerID = embedID.replace('YouTubeEmbed', '');
  var containerJQObject = $("#" + containerID);
  return containerJQObject.data('mediaController');      
}

function onYouTubePlayerReady(playerId) {
  var mediaController = GetMediaControllerFromYouTubeEmbedID(playerId);
  mediaController.OnYouTubeAPIReady();
}

这是一篇很好的文章,通过创建一个类来包装一个单独的播放器,包括使用与前面答案中提到的类似的方法将事件分派到单个对象。

http://blog.jcoglan.com/2008/05/22/dispatching-youtube-api-events-to-individual-javascript-objects/

像这样的怎么样:

var closureFaker = function (func, scope) {
    var functionName = 'closureFake_' + (((1+Math.random())*0x10000000)|0).toString(16);
    window[functionName] = function () {
        func.apply(scope || window, arguments);
    };
    console.log('created function:', functionName, window[functionName]);
    return functionName;
};

ytplayer.addEventListener("onStateChange", closureFaker(function () {
    //place your logic here
    console.log('state change', arguments)
}));