title: How to bind fullscreen event in HTML5 video element
body: <p>I am currently using following binding in <strong>angularJS</strong> controller. I am having problem of the event being bound multiple times. Is there a way to bind events to a specific element?</p>
  
  <p>Let's say I have 2 videos like this:</p>
  
  <pre><code>&lt;video id="video1"&gt;&lt;/video&gt;
  &lt;video id="video2"&gt;&lt;/video&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <p><em>This works</em> </p>
  
  <pre><code>$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e){
      //Do stuff like unmute video
  });
  </code></pre>
  
  <p><em>This doesn't work. I thought this should work.</em></p>
  
  <pre><code>$(document.getElementsByTagName("video")[0]).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e){
      //Do stuff like unmute video
  });
  </code></pre>