MediaElementPlayer: Why can't I access a property of an object created outside of a function?
<p>Here is the code:</p>

<pre><code>var player = {};

$(document).ready(function() {
  initPlayer();
  initControls();
}

function initPlayer() {
  player = new MediaElementPlayer('#player', {
    loop: false,
    features: ['progress','duration','fullscreen'],
    success: function (mediaElement, domObject) { 
        mediaElement.addEventListener('pause', function(e) {
            $('#btn-play').find('span').toggleClass("glyphicon-pause").toggleClass("glyphicon-play");
        }, false);

        mediaElement.addEventListener('play', function(e) {
            $('#btn-play').find('span').toggleClass("glyphicon-play").toggleClass("glyphicon-pause");
        }, false);
    }
  });
}

function initControls() {
  $('#btn-play').click(function() {
      console.log(player.paused);
  }
}
</code></pre>

<p>I've created the empty '<strong>player</strong>' object outside the initPlayer function because I wanna use it later in different locations. The problem is, that I have no access to the properties of the object, outside of the <strong>initPlayer</strong> function.
The console.log in <strong>initControls()</strong> just throws an undefined.</p>

<p>When I define the player variable inside the initPlayer function (var player = new MediaElementPlayer [...]) I CAN read the properties of it in the initControls() function. Why do I have access to the local variable but not the global one? </p>