Youtube JSAPI, примеры не работают

Question

Я пытаюсь захватить объект YT. Вызываются функции onYouTubePlayerReady(), но я ничего не могу сделать с объектом.

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("swfobject", "2.2"); 
</script> 
<script type="text/javascript"> 
    function onYouTubePlayerReady (playerID) 
    { 
     ytplayer = document.getElementById(playerID); 
    } 

    function play() 
    { 
     if (ytplayer) 
     { 
      ytplayer.playVideo(); 
     } 
    } 
    play(); 
</script> 

ytplayer ссылается на DOM, а не само видео (играть для них бросает неперехваченного TypeError:. Объект # не имеют метода «playVideo», но это в основном пример, приведенный в Google

Что я делаю неправильно?

Answer 1

Я не вижу, где вы инициализируете свой видеопроигрыватель вообще в своем предыдущем коде. Код ниже отлично работает в Firefox. Подставьте видео-идентификатор видео, которое вы хотели бы играйте вместо [YOUR_VIDEO_ID] ниже, и вы должны быть настроены. Также можете подтвердить, что t код ниже работает как чемпион в IE и Chrome.

<div id="video" class="overlay"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
    <div id="ytapiplayer"></div> 
    <script type="text/javascript"> 
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: 'myytplayer' }; 
    swfobject.embedSWF("http://www.youtube.com/v/[YOUR_VIDEO_ID]?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "640", "360", "8", null, null, params, atts); 

    function onYouTubePlayerReady(playerId) { 
     ytplayer = document.getElementById("myytplayer"); 

     ytplayer.addEventListener('onStateChange','onytplayerStateChange'); 
    } 

    function onytplayerStateChange(newState) { 
     alert("Player's new state: "+newState); 
    } 

    function play() { 
     if (ytplayer) { 
     ytplayer.playVideo(); 
     } 
    } 
    </script> 
    <a href="javascript:void(0)" onclick="play()">Play</a> 
</div> 

Я думаю, что вам не хватает в том, что вы должны ссылаться на «playerId» на то, что вы прошли в атрибуты инициализации объекта (вар АТЦ = ...) линия. Выполнение небольшого тестирования показывает, что функция onYouTubePlayerReady фактически не передает действительное значение id, которое может использоваться для выполнения поиска DOM.

Answer 2

Вы вызываете play();, как только страница загружается.

Для загрузки youtube player требуется какое-то время, и после этого функция вызывает onYouTubePlayerReady.

Поскольку вы определяете ytplayer в onYouTubePlayerReady, вы не можете использовать ytplayer перед вызовом onYouTubePlayerReady. Кроме того, ytplayer должен быть глобальным, чтобы обе функции могли его использовать.