Declare A Global Variable From Inside A Function

I have the following code, necessary to track an embedded Youtube video in my page using their Javascript API: function onYouTubePlayerReady(playerId) { var youtubeplayer = d

Solution 1:

Another way to declare globals is to create it as an extra property to the global "window" object-- so do

window.youtubeplayer = document.getElementById('youtubeplayer'); 

This should be accessible to anything else on the page. So your complete code would look like this;

functiononYouTubePlayerReady(playerId) {
  window.youtubeplayer = document.getElementById('youtubeplayer');
  window.youtubeplayer.addEventListener("onStateChange", "onytplayerStateChange");
  window.youtubeplayer.setPlaybackQuality('large');
}

functiononytplayerStateChange(newState) {
  //Make it autoplay on page loadif (newState == -1) {
    window.youtubeplayer.playVideo();
  }

  var tiempo = window.youtubeplayer.getCurrentTime();
  //Rounds to 2 decimalsvar tiempo = Math.round(tiempo*100)/100;
  alert(tiempo);
}

Solution 2:

Instead of passing a string reference to your onytplayerStateChange function to the event listener, you can create an event handler within the ready function and pass that in directly, like so:

functiononYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    var stateChangeHandler = function (newState) {
        //Make it autoplay on page loadif (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimalsvar tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    };
    youtubeplayer.addEventListener("onStateChange", stateChangeHandler);
    youtubeplayer.setPlaybackQuality('large');
}

Or even pass in an anonymous function directly:

functiononYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    youtubeplayer.addEventListener("onStateChange", function (newState) {
        //Make it autoplay on page loadif (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimalsvar tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    });
    youtubeplayer.setPlaybackQuality('large');
}

This preserves the scope of the youtubeplayer variable inside of the "onYouTubePlayerReady" function and bypasses the need to establish a global variable.