在 jquery 事件上异步加载 youtube player api答案

【问题标题】：Load youtube player api asynchronously on jquery event在 jquery 事件上异步加载 youtube player api
【发布时间】：2012-12-19 06:53:50
【问题描述】：

我需要在 jquery 更改事件上使用 api 加载 youtube iframe 播放器，但它只显示如何在加载脚本时加载它。

这是他们使用 api 加载播放器的脚本。

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

我需要等待触发这个，直到我的更改事件被触发，所以在这个里面..

 $(document).on("change","#yt-url", function() {
     youtubeUrl = $(this).val();
     youtubeId = youtube_parser(youtubeUrl);
     // Load the youtube player with api
 });

这样做的正确方法是什么？

【问题讨论】：

标签： javascript jquery youtube-api

【解决方案1】：

我认为您只需将创建播放器的代码封装到一个函数中，该函数仅由给定事件调用

$(document).on("change","#yt-url", function() {
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

【讨论】：

【解决方案2】：

Dmitry 的示例有效，但我有两个修改。首先，检查 API 是否已加载（是否定义了 YT.Player），如果没有则仅加载 API。其次，您最好使用$.getScript()，因为您提到您使用的是jQuery。

https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js 有一个这种方法的示例

【讨论】：

很好的例子，除了链接之外，您还应该将代码添加到您的答案中。