title: VideoJS -- Best way to tie plugin to controlBar fadeIn
body: <p>I'm trying to create a plugin that'll add a sharing button to the videojs player's overlay when the user hovers over or pauses the video -- basically I want my element to fade in over the player when the controlBar is show and fade out when it's hidden. My hackish solution is to listen for the player's "controlsvisible" and "controlshidden" events and calling fadeIn/Out on my element when those trigger.</p>
  
  <p>Is that the best hook I have available, or is there a preferred method?</p>
  
  <p>Sample:</p>
  
  <pre><code>videojs.plugin('shareButtons', function(options) {
    var shareBtn;
    shareBtn = $('&lt;a href="#" id="player-share"&gt;&lt;span class="icon-share"&gt;&lt;/span&gt;share&lt;/a&gt;');
    shareBtn.click(function() {
      return alert("share");
    });
    $(this.el()).append(shareBtn);
    this.on("controlsvisible", function() {
      return vjs.Component.prototype.fadeIn.call($("#player-share"));
    });
    return this.on("controlshidden", function() {
      return vjs.Component.prototype.fadeOut.call($("#player-share"));
    });
  });
  </code></pre>