javascript - Youtube iFrame API 'YT is undefined' - Stack Overflow

admin管理员组

文章数量:1344473

I'm trying to put this code in an module function:

$(document).ready(function()
    {
        VIDEO.onYouTubeIframeAPIReady();
}


        var VIDEO = (function (my, $){
var tag = document.createElement('script');
var onPlayerStateChange;
  tag.src = "";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;


   my.onYouTubeIframeAPIReady =function() {
    player = new YT.Player('player', {
      height: '490',
      width: '880',
      videoId: SONG.getArtistId(),
      playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': catchError
      }
    });
  }

  function onPlayerReady(event) {


  if(typeof(SONG.getArtistId()) == undefined)
  {
    console.log("undefineeeed"); 
  } 


    event.target.playVideo();   
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    }
    if(event.data == YT.PlayerState.ENDED)
    {
      location.reload();
    }
  }

  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

  return my;

}(VIDEO || {}, jQuery));

The problem is: even it's self-executing, nothing happens and the iFrame is not shown. I'm trying to do this because it's part of an assignment. We have to work in modules.

I'm trying to put this code in an module function:

$(document).ready(function()
    {
        VIDEO.onYouTubeIframeAPIReady();
}


        var VIDEO = (function (my, $){
var tag = document.createElement('script');
var onPlayerStateChange;
  tag.src = "https://www.youtube./iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;


   my.onYouTubeIframeAPIReady =function() {
    player = new YT.Player('player', {
      height: '490',
      width: '880',
      videoId: SONG.getArtistId(),
      playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': catchError
      }
    });
  }

  function onPlayerReady(event) {


  if(typeof(SONG.getArtistId()) == undefined)
  {
    console.log("undefineeeed"); 
  } 


    event.target.playVideo();   
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    }
    if(event.data == YT.PlayerState.ENDED)
    {
      location.reload();
    }
  }

  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

  return my;

}(VIDEO || {}, jQuery));

The problem is: even it's self-executing, nothing happens and the iFrame is not shown. I'm trying to do this because it's part of an assignment. We have to work in modules.

• javascript
• iframe
• module
• youtube-api
• youtube-javascript-api

Share Improve this question Follow edited Jan 26, 2015 at 12:59 RW24 asked Jan 26, 2015 at 12:06 RW24RW24 66422 gold badges1010 silver badges2121 bronze badges 3

• 1. you didn't hook up the onYouTubeIframeAPIReady function to any event. 2. var VIDEO is declared outside of the script tag 3. you are using Jquery without referencing it on your page. – avrahamcool Commented Jan 26, 2015 at 12:10
• @avrahamcool I'm sorry, I pasted the wrong code. I edited my post. (I have a reference to use jQuery, that's not the problem) I get: 'Uncaught ReferenceError: YT is not defined' – RW24 Commented Jan 26, 2015 at 12:24
• create a fiddle that demonstrate the problem, it will be easier to help. – avrahamcool Commented Jan 26, 2015 at 13:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You need to simplify the code :

HTML

<div id="player"></div>

Javascript

$(document).ready( function() {
  console.log( "ready!" );
  loadPlayer();
});

function getArtistId() {
  return 'l-gQLqv9f4o';
}

function loadPlayer() { 
  if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {

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

    window.onYouTubePlayerAPIReady = function() {
      onYouTubePlayer();
    };

  } else {

    onYouTubePlayer();

  }
}

var player;

function onYouTubePlayer() {
  player = new YT.Player('player', {
    height: '490',
    width: '880',
    videoId: getArtistId(),
    playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
    events: {
      'onStateChange': onPlayerStateChange,
      'onError': catchError
    }
  });
}

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    } else if (event.data == YT.PlayerState.ENDED) {
      location.reload();
    }
  }

  function onPlayerReady(event) {

    //if(typeof(SONG.getArtistId()) == undefined)
    //{
    //  console.log("undefineeeed"); 
    //} 
    //event.target.playVideo();   
  }
  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

And a live example : http://jsbin./maweqahuhi/1/ http://jsbin./nipogicide/2/

EDIT

Regarding your mentq i made some changement in the code. You need to use onYouTubePlayerAPIReady() to call the player later. I edited all the previous code.

本文标签： javascriptYoutube iFrame API 39YT is undefined39Stack Overflow