我目前正在尝试使用 YouTube API 作为 jQuery 插件的一部分，但遇到了一些问题。
YT API 的工作方式是加载 Flash 播放器，当它准备就绪时，它会向名为 onYouTubePlayerReady(playerId) 的全局函数发送回调。然后，您可以将该 ID 与 getElementById(playerId) 结合使用，将 javascript 调用发送到 Flash 播放器(即 player.playVideo();)。
您可以使用 player.addEventListener('onStateChange', 'playerState'); 将事件监听器附加到播放器，这会将任何状态更改发送到另一个全局函数(在本例中 玩家状态)。
问题是我不确定如何将状态更改与特定玩家关联起来。我的 jQuery 插件可以愉快地将多个视频附加到选择器，并将事件附加到每个视频，但是当状态实际发生变化时，我就无法跟踪它发生在哪个播放器中。
我希望一些示例代码可以让事情变得更清楚一些。下面的代码应该可以在任何 html 文件中正常工作。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/text+html;utf-8"/>
<title>Sandbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js"></script>
<script type="text/javascript">
(function($) {
$.fn.simplified = function() {
return this.each(function(i) {
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer"+i };
$div = $('<div />').attr('id', "containerplayer"+i);
swfobject.embedSWF("http://www.youtube.com/v/QTQfGd3G6dg&enablejsapi=1&playerapiid=ytplayer"+i,
"containerplayer"+i, "425", "356", "8", null, null, params, atts);
$(this).append($div);
});
}
})(jQuery);
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', 'playerState');
}
function playerState(state) {
console.log(state);
}
$(document).ready(function() {
$('.secondary').simplified();
});
</script>
</head>
<body>
<div id="container">
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
</div>
</body>
</html>
您将看到 console.log() 输出有关状态更改的信息，但是，正如我所说，我不知道如何判断它与哪个玩家关联。
有人对解决这个问题有什么想法吗？
编辑: 抱歉，我还应该提到我已经尝试将事件调用包装在闭包中。
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', function(state) {
return playerState(state, playerId, player); } );
}
function playerState(state, playerId, player) {
console.log(state);
console.log(playerId);
}
在这种情况下，playerState永远不会被调用。这尤其令人沮丧。
最佳答案
编辑:
显然，在 player 对象上调用 addEventListener 会导致脚本被用作传递给 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);
}
已测试并工作!
关于javascript - 将 Youtube 的 javascript API 与 jQuery 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/786380/