在jquery事件上异步加载youtube播放器api

Question

我需要在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
 });

正确的方法是什么？

Answer 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);
});

Answer 2

德米特里的例子有效，但我有两个修改。首先，检查 API 是否已加载（是否定义了YT.Player），并且仅在未加载 API 时才加载 API。其次，你不妨使用$.getScript()因为你提到你正在使用jQuery。

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