在 jQuery 中加载 YouTube API

Question

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

    Uncaught TypeError: undefined is not a function 

那么...我到底做错了什么？我已经在这件事上抛出了 console.log 语句，并尝试用几种方式重写它。我尝试将 api 复制到本地文件中。我试过用常规脚本标签加载它。我尝试使用他们在https://developers.google.com/youtube/iframe_api_reference 的 api 参考中使用的古怪 DOM 修改来加载它。我很确定下面的代码应该可以工作：

    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

我不能代表 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'
    });
};

Answer 2

您可以借用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
      }
    });
  }
};

Answer 3

引用http://api.jquery.com/jQuery.getScript/

脚本加载后触发回调，但未加载 必须执行。

在您调用 YT.Player() 时，API 可能尚未运行

Answer 4

穷人的解决办法，但是……

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

Answer 5

我通过结合 Simon 和 user151496 的方法解决了这个问题。

代码：

<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>

Answer 6

从浏览器中删除添加块，然后重试。它对我有用。