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

Dmitry の例は機能しますが、2 つの変更があります。最初に、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 に答える