javascript - 在 jQuery 中加载 YouTube API

Question

我正在尝试加载 YouTube 的 iframe API。到目前为止，我要做的就是制作和加载播放器。它似乎加载了 API，但随后无法将“YT.Player()”识别为构造函数。在 chrome js 控制台中，我在该行遇到的确切错误是:

    Uncaught TypeError: undefined is not a function 

那么……我究竟做错了什么？我在这件事上到处都是 console.log 语句，并尝试以几种方式重写它。我试过将 api 复制到本地文件中。我试过用常规脚本标签加载它。我已经尝试用他们在 api 引用中使用的古怪的 DOM 修改加载它 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);

有什么帮助吗？

Answer 1

可以借用技巧used in 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
      }
    });
  }
};