API YouTube - не срабатывает onYouTubePlayerReady () - PullRequest
Новая
       26

API YouTube - не срабатывает onYouTubePlayerReady ()

16 голосов
/ 18 января 2010

Из того, что я прочитал, я должен настроить API YouTube : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' />
    <title>Youtube Player</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      function onYouTubePlayerReady(id) {
        console.log("onYouTubePlayerReady() Fired!");
        var player = $("#youtube_player").get(0);
      }

      var params = { allowScriptAccess: "always" };
      var atts = { id: "youtube_player" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
                         "youtube", "425", "356", "8", null, null, params, atts);

    </script>
  </head>
  <body>
    <div id="youtube"></div>
  </body>
</html>

Однако onYouTubePlayerReady () не запускается вообще, и если я вручную получаю ссылку на плеер, многие методы не определены; например, cueVideoById () работает, а playVideo () - нет.

Как я могу решить эту проблему?

Ответы [ 7 ]

29 голосов
/ 18 января 2010

Вы должны находиться на веб-сервере со своим тестовым скриптом, как указано в документации :

Примечание. Чтобы протестировать любой из этих вызовов, ваш файл должен быть запущен на веб-сервере, поскольку проигрыватель Flash Player ограничивает вызовы между локальными файлами и Интернетом.

5 голосов
/ 22 октября 2012

эта функция: 

function onYouTubePlayerReady(playerid) {
  console.log('readyIn');
};

не обязательно находиться прямо в голове в отдельном теге скрипта.

Единственное правило, которое вы должны соблюдать: не помещайте эту функцию в событие domready - она ​​должна быть определена раньше.

Например, в mootools я использую его так: 

function onYouTubePlayerReady(playerid) {
  echo('readyIn');
};

document.addEvent('domready', function() { 
   ...
});
4 голосов
/ 20 апреля 2012

Я считаю, что это лучший способ добавить видео YouTube на свой сайт с помощью JavaScript. Это дает вам очень четкий способ иметь дело с событиями. Он работает на локальной машине, и, насколько я знаю, работает на устройствах Apple. Вы можете использовать все события и функции, описанные в документации javascript для API YouTube. 

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}
</script>

источник: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

4 голосов
/ 23 октября 2011

У меня есть ответ, выделите эту часть сценария и поместите его в заголовок в своем собственном теге сценария. О боже, наконец 

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>
1 голос
/ 03 июля 2013

Если вы встраиваете видео на YouTube так: 

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

тогда вы должны поставить 

<script src="http://www.youtube.com/player_api"></script>

после . По крайней мере, так у меня получилось.

Кроме того, если вы динамически изменяете атрибут [src] iframe с помощью jQuery или чего-либо еще, чтобы загрузить новое видео, вам нужно вызвать onYouTubePlayerAPIReady() после его загрузки.

Я предпочитаю изменить атрибут [src], а затем: setTimeout(onYouTubePlayerAPIReady, 500);

1 голос
/ 18 мая 2011 
<!DOCTYPE html>

должен был вести страницу, чтобы материал html5 работал для меня в FF4

0 голосов
/ 20 декабря 2011

Просто была такая же проблема, но по другой причине. Это работало в Chrome, но не в Firefox, и причина была в том, что у меня был http-заголовок «Content-type: text / xml» вместо «Content-type: text / html». При работе в качестве HTML теперь также запускается событие onYouTubePlayerReady в Firefox.

Просто опубликуйте это на тот случай, если кто-то наткнется на этот ответ от Google (как я только что пытался найти решение).

...