2012-06-07 1 views
3

Я использую SWFObject для встраивания видео YouTube на наш сайт. Есть много ссылок на видео в одной странице, и каждое звено очищает оболочку DIV, а затем загружает новое встраивание в него, с этим кодом:Как правильно использовать SWFObject

$('a.video-link').each(function() { 
    $(this).on('click', function(e) { 
     e.preventDefault(); 

     if ($('#video-wrap').has('object').length == 0) { 
      var params = { allowScriptAccess: 'always', allowFullScreen: 'true' }; 
      var atts = { id: 'ytapiplayer' }; 
      swfobject.embedSWF($(this).attr('href'), 'ytapiplayer', '1000', '562', '8', null, null, params, atts); 
      $('#video-wrap').show(); 
     } else { 
      $('#video-wrap').find('object').remove(); 
      $(this).trigger('click'); 
     } 
    }); 
}); 

Они являются Youtube ссылки, которые я использую для каждого врезать:

http://www.youtube.com/v/{Youtube ID}?hl=en_US&rel=0&hd=1&border=0&version=3&fs=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytapiplayer 

Тогда вот onYouTubePlayerReady() обработчик событий:

function onYouTubePlayerReady(id) { 
    console.log('youtube player is ready.'); 
    var ytplayer = document.getElementById('ytapiplayer'); 
    ytplayer.addEventListener('onStateChange', 'onYouTubePlayerStateChange'); 
    ytplayer.addEventListener('onError', 'onYouTubePlayerError'); 
} 

Все видео загрузки хорошо, однако onYouTubePlayerReady никогда не попал!

я попытался решения от here и here, но ничего не получалось :(

Пожалуйста, помогите мне решить эту проблему. Конечная цель состоит в том, чтобы получить Youtube API для работы.

Спасибо.

EDIT: Я попытался воспроизвести код, убедитесь, что все имена верны, разделены на разные теги сценария и/или .js-файл, загрузите его в начале, внутри document.ready(), по-прежнему, onYouTubePlayerReady is no стрельба. Что вы думаете?

+0

После SWFObject имеет встроенный проигрыватель, проверьте узел DOM и проверить, что AllowScriptAccess = «всегда» в настоящее время установлен правильно. – mqsoh

+0

Правильно было установлено ... Я получил его работу и добавлю ответ с правильным кодом :) – pilau

ответ

3

Вот рабочий код:

Выполнение SWFObject на каждую видеосвязь:

$('a.video-link').on('click', function(e) { 
    e.preventDefault(); 
    // SWFObjects loads a video object into div with ID ytapiplayer. 
    // If the wrapper div already contains a video we need to remove it first: 
    if ($('#video-wrap').has('object').length == 0) { 
     var params = { allowScriptAccess: 'always', allowFullScreen: 'true' }; 
     var atts = { id: 'ytapiplayer' }; 
     swfobject.embedSWF($(this).attr('href'), 'ytapiplayer', '1000', '562', '8', null, null, params, atts); 

     $('#video-wrap').show(); 
    } else { 
     $('#video-wrap').find('object').remove(); 
     $(this).trigger('click'); 
    } 
}); 

Ссылка YouTube со значениями API:

http://www.youtube.com/v/' + data.YoutubeLink + '?hl=en_US&rel=0&hd=1&border=0&version=3&fs=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytapiplayer 

И обработчики событий SWFObject I поместите этот код в отдельный .js-файл, загруженный до кода, выполняющего SWFObject. Я не знаю, если это необходимо, но это все равно работает:

function onYouTubePlayerReady(id) { 
    // We need the actual DOM element for this, if we want to use more advanced API. 
    // This is because addEventListener activates the API. 
    var ytplayer = $('#ytapiplayer').get(0); 
    ytplayer.addEventListener('onStateChange', 'onYouTubePlayerStateChange'); // onYouTubePlayerStateChange(newState) 
    ytplayer.addEventListener('onError', 'onYouTubePlayerError'); // onYouTubePlayerError(errorCode) 
} 
+1

Да, это необходимо. OnYouTubePlayerReady должен быть доступен, прежде чем делать какие-либо запросы на YouTube. В будущем вы должны протестировать его, вручную вызвав функцию до или после вызова embedSWF. – mqsoh

+0

Это отличная идея. Действительно, я знал, что SWFObject требует определения onYouTubePlayerReady перед вызовом API, и действительно, на другом сайте у меня вообще не было никаких проблем. Однако в этом проекте, я думаю, разделение кода на два файла заставило его работать. – pilau

+0

У вас, вероятно, не было никаких проблем, потому что это то, что известно как «состояние гонки». Время загрузки HTTP-запроса для загрузки проигрывателя YouTube происходит в браузере, который загружает JavaScript. Это коварный тип ошибок. – mqsoh

 Смежные вопросы

  • Нет связанных вопросов^_^