在 jQuery 中加载 YouTube API

Posted 2023-02-24

【中文标题】在 jQuery 中加载 YouTube API

【英文标题】：Loading YouTube API in jQuery

【发布时间】：2013-08-10 22:45:21

【问题描述】：

我正在尝试加载 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);

有什么帮助吗？

【参考方案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'
    );
;

【讨论】：

引用api.jquery.com/jQuery.getScript: The callback is fired once the script has been loaded but not necessarily executed. 在您调用YT.Player() 时，API 可能尚未运行

所以，我真正需要做的就是使用 onYouTubeAPIFrameReady 函数。我仍然想使用 getScript 来加载数据，因为那个 DOM 修改是愚蠢的，但是如果您将该评论作为单独的答案提交，我会将其标记为正确。

另外，我现在得到：“”“阻止了原点为“youtube.com”的帧访问原点为“danhakimi.com”的帧。请求访问的帧的协议为“ https"，被访问的帧的协议是"http"。协议必须匹配。"""那是什么意思？

这是一个已知的铬问题，请参阅code.google.com/p/chromium/issues/detail?id=17325

【参考方案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
      
    );
  
;

【讨论】：

我觉得这可能会导致调用 getScript 的次数过多。

但根据源代码控制存储库，这是一个 google 拥有的项目。他们不知道自己在做什么吗？

【参考方案3】：

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

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

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

【讨论】：

iframe_api JS 已加载并执行，但它可能只是播放器本身的异步加载器。播放器没有立即准备好，您必须使用其他答案之一的代码来延迟您对YT.Player 的使用。

【参考方案4】：

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

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

【讨论】：

这是一个很好的解决方案。但是没有为我定义 YT，所以我这样做了： if(typeof YT !== "undefined" && YT && YT.Player)

【参考方案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>

【参考方案6】：

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