Actualmente estoy tratando de usar la API de YouTube como parte de un complemento jQuery y me he encontrado con un pequeño problema.Uso de la API de JavaScript de Youtube con jQuery
La forma en que funciona la API YT es que carga el flash player y, cuando esté listo, lo devolverá a una función global llamada onYouTubePlayerReady(playerId). A continuación, puede usar esa identificación combinada con getElementById(playerId) para enviar llamadas de JavaScript al reproductor flash (es decir, player.playVideo();).
Puede adjuntar un detector de eventos al reproductor con player.addEventListener('onStateChange', 'playerState'); que enviará los cambios de estado a otra función global (en este caso playerState).
El problema es que no estoy seguro de cómo asociar un cambio de estado con un jugador específico. Mi plugin jQuery puede adjuntar alegremente más de un video a un selector y adjuntar eventos a cada uno, pero en el momento en que un estado realmente cambia pierdo la pista de qué jugador sucedió.
Espero que algún código de ejemplo pueda hacer cosas un poco más claras. El siguiente código debería funcionar bien en cualquier archivo 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>
Verá la console.log() outputtin información sobre los cambios de estado, pero, como he dicho, no sé cómo decirle qué jugador que está asociado.
¿Alguien tiene alguna idea sobre cómo evitar esto?
EDITAR: Lo siento, también debería mencionar que he tratado de envolver la llamada al evento en un cierre.
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);
}
En esta situación, playerState nunca se llama. Lo cual es extra frustrante.
Eso fue lo primero que pensé también, pero en realidad no funciona aquí. playerState parece que nunca se llama. – Steerpike
He probado su código como se publicó y enYouTubePlayerReady nunca se llama – Greg
Los videos se reproducen bien a pesar de – Greg