Использование javascript API Youtube с jQuery

Ответ 1

Edit:

По-видимому, вызов addEventListener объекта player приводит к тому, что script используется как строка в свойстве XML, переданном объекту Flash, - это исключает закрытие и т.п., поэтому время для старого Школьный уродский хак:

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);
}

Протестировано и работает!

Ответ 2

Im Использование 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(), чтобы получить упущенное

Ответ 3

У меня была такая же проблема и я попробовал принятый ответ. Это не сработало для меня; Функция 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);
}

Это довольно неприятно, но так же как и текущее состояние JavaScript JavaScript API.

Вот еще один полезный/неприятный код, если вы используете какие-либо продвинутые шаблоны прототипирования. Это в основном позволяет вам извлечь экземпляр класса из идентификатора проигрывателя YouTube:

// 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();
}

Ответ 4

Вот хорошая статья, которая проходит через создание класса для обертывания отдельного игрока, включая диспетчеризацию событий для отдельных объектов с использованием аналогичного подхода к упомянутому в предыдущем ответе.

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

Ответ 5

Как насчет чего-то вроде этого:

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)
}));