title: Video.js: Adding a menu to the control bar via plugin
body: <p>I'm trying to a menu to the control bar of a video.js player via a plugin. Here's a <a href="http://jsbin.com/qisec/1/edit" rel="nofollow">demo</a> of my end goal. The problem is that the demo is adding a menu to the control bar in video.js itself whereas I want a plugin that adds a menu.</p>
  
  <p>So far I have been able to create a plugin that adds a <code>MenuButton</code> to the control bar, but I'm unable to populate the menu with any menu items.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/jUCu2/2/" rel="nofollow">demo</a> of where I'm at now.</p>
  
  <p>The problem is when I try to create a new <code>PlaybackRateMenuItem</code> object with <code>new videojs.PlaybackRateMenuItem(this, {rate: rates[i] + 'x'})</code>. The JS console throws the following error on line 805 of <code>video.dev.js</code>:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'guid' of undefined
  </code></pre>
  
  <p>This corresponds to the following function in the unminified version:</p>
  
  <pre><code>vjs.bind = function(context, fn, uid) {
      // Make sure the function has a unique ID
      if (!fn.guid) {
          fn.guid = vjs.guid++;
      }
  
      ... omitted ...
  };
  </code></pre>
  
  <p>Or more specifically, this line: <code>if (!fn.guid) {</code>.</p>
  
  <p>From stepping through in a debugger, I see that <code>fn</code> is being passed in as <code>undefined</code> and the caller of the function is: </p>
  
  <pre><code>vjs.bind(this.player(), this.player().reportUserActivity);
  </code></pre>
  
  <p>When this function is being called, <code>this.player()</code> returns a defined value, but once <code>vjs.bind</code> is called, both arguments become undefined and I have no idea why. Any ideas or a point in the right direction? Thanks!</p>