2

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

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

4

2 回答 2

4

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

$(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);
});
于 2012-12-19T08:39:25.487 回答
3

德米特里的例子有效，但我有两个修改。首先，检查 API 是否已加载（是否YT.Player已定义），如果没有则仅加载 API。其次，您也可以使用，$.getScript()因为您提到您正在使用 jQuery。

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

于 2012-12-19T17:50:06.977 回答