Загрузка API YouTube в jQuery

Я пытаюсь загрузить API YouTube iframe. Пока все, что я пытаюсь сделать, это сделать и загрузить игрока. Кажется, что он загружает API, но затем не распознает "YT.Player()" как конструктор. Точная ошибка, которую я получаю в этой строке, в консоли chrome js:

    Uncaught TypeError: undefined is not a function

Итак... Что в мире я делаю неправильно? Я запустил все консольные заявления console.log и попытался переписать его несколькими способами. Я попытался скопировать api в локальный файл. Я пробовал загружать его с помощью обычных тегов скриптов. Я попробовал загрузить его с дурацкой модификацией DOM, которую они использовали в ссылке api на странице https://developers.google.com/youtube/iframe_api_reference. Я уверен, что код ниже должен работать:

    function youtubeAPIReady(script, textStatus, jqXHR)
    {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'CxTtN0dCDaY'
        });
    }

    function readyFunction()
    {
        $.getScript("https://www.youtube.com/iframe_api", youtubeAPIReady);
    }

    jQuery(document).ready(readyFunction);

Любая помощь?

Ответы

Ответ 1

Цитата из http://api.jquery.com/jQuery.getScript/

Обратный вызов запускается после загрузки сценария, но не обязательно выполняется.

API, вероятно, не запускался к тому времени, когда вы вызываете YT.Player()

Ответ 2

Вы можете одолжить технику, используемую в YouTube Direct Lite, чтобы отложить загрузку JavaScript до тех пор, пока он явно не понадобится:

var player = {
  playVideo: function(container, videoId) {
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
      window.onYouTubeIframeAPIReady = function() {
        player.loadPlayer(container, videoId);
      };

      $.getScript('//www.youtube.com/iframe_api');
    } else {
      player.loadPlayer(container, videoId);
    }
  },

  loadPlayer: function(container, videoId) {
    new YT.Player(container, {
      videoId: videoId,
      width: 356,
      height: 200,
      playerVars: {
        autoplay: 1,
        controls: 0,
        modestbranding: 1,
        rel: 0,
        showInfo: 0
      }
    });
  }
};

Ответ 3

бедный человек, но...

function readyYoutube(){
    if((typeof YT !== "undefined") && YT && YT.Player){
        player = new YT.Player('player', {
            ...
        });
    }else{
        setTimeout(readyYoutube, 100);
    }
}

Ответ 4

Я не могу говорить о решении jQuery, но попробуйте использовать стандартный javascript. В любом случае вам не придется ждать загрузки документа (этот код должен находиться за пределами $(document).ready())

// Load the YouTube API asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create the player object when API is ready
var player;
window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'CxYyN0dCDaY'
    });
};

Ответ 5

Я решил эту проблему, объединив подходы Саймона и пользователя151496.

Код:

<script>
    // load API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // define player
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640'
        });
    }

    $(function () {

       // load video and add event listeners
       function loadVideo(id, start, end) {
          // check if player is defined
          if ((typeof player !== "undefined")) {
            // listener for player state change
            player.addEventListener('onStateChange', function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // do something
                }
            });
            // listener if player is ready (including methods, like loadVideoById
            player.addEventListener('onReady', function(event){
                event.target.loadVideoById({
                    videoId: id,
                    startSeconds: start,
                    endSeconds: end
                });
                // pause player (my specific needs)
                event.target.pauseVideo();
            });
        }
        // if player is not defined, wait and try again
        else {
            setTimeout(loadVideo, 100, id, start, end);
        }
      }

      // somewhere in the code
      loadVideo('xxxxxxxx', 0, 3);
      player.playVideo();
   });
</script>

Ответ 6

Удалите блок добавления из браузера и повторите попытку. Это сработало для меня.