使用Youtube的JavaScript API与jQuery [英] Using Youtube's javascript API with jQuery
问题描述
我正在尝试使用YouTube API作为jQuery插件的一部分，我遇到了一个问题。
I'm currently trying to use the YouTube API as part of a jQuery plugin and I've run into a bit of a problem.
YT的方式api的作品是加载Flash播放器，当它准备就绪时，它会发回一个名为 onYouTubePlayerReady（playerId）的全局函数。然后，您可以使用该ID与 getElementById（playerId）结合使用，将javascript调用发送到Flash播放器（即 player.playVideo（）; ）
The way the YT api works is that you load the flash player and, when it's ready it will send a call back to a global function called onYouTubePlayerReady(playerId). You can then use that id combined with getElementById(playerId) to send javascript calls into the flash player (ie, player.playVideo();).
您可以使用 player.addEventListener（'onStateChange'，'playerState'）为播放器附加事件侦听器; ，它会将任何状态更改发送到另一个全局函数（在这种情况下为 playerState ）。
You can attach an event listener to the player with player.addEventListener('onStateChange', 'playerState'); which will send any state changes to another global function (in this case playerState).
问题是我不知道如何将状态更改与特定播放器相关联。我的jQuery插件可以高兴地将多个视频附加到选择器，并将事件附加到每个视频，但是当一个状态实际上发生变化时，我不知道发生了哪个播放器。
The problem is I'm not sure how to associate a state change with a specific player. My jQuery plugin can happily attach more than one video to a selector and attach events to each one, but the moment a state actually changes I lose track of which player it happened in.
我希望一些示例代码可能会使事情更清晰一些。以下代码在任何html文件中都可以正常工作。
I'm hoping some example code may make things a little clearer. The below code should work fine in any html file.
<!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（）输出信息关于状态的变化，但像我一样说，我不知道如何告诉哪个玩家是关联的。
You'll see the console.log() outputtin information on the state changes, but, like I said, I don't know how to tell which player it's associated with.
任何人都有这样的想法？
Anyone have any thoughts on a way around this?
编辑：
对不起，我应该还提到我已经尝试在闭包中包装事件调用。
Sorry, I should also mentioned that I have tried wrapping the event call in a closure.
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 永远不会被叫。这是非常令人沮丧的。
In this situation playerState never gets called. Which is extra frustrating.
推荐答案
编辑：
code> addEventListener 在播放器对象导致脚本作为XML属性中的字符串传递给flash对象 - 这就排除了关闭等等，所以现在是一个老派丑陋的黑客：
Apparently calling addEventListener on the player object causes the script to be used as a string in an XML property that's passed to the flash object - this rules out closures and the like, so it's time for an old-school ugly hack:
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);
}
Tested&工作！
Tested & working!
这篇关于使用Youtube的JavaScript API与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
