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。其次，你可以使用$.getScript()，因为你提到你正在使用jQuery。

在https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js

有一个这种方法的例子

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

2 个答案: