title: HTML5 video ended event called several times
body: <p>I have a problem with playing a video in HTML5 and the ended Event.
  I view some HTML content and after a expired time I play a video. Is the video ended I will show the HTML content again. This should loop. Its for a presentation. </p>
  
  <p>My problem is, that after the first complete run, the ended event will fired repeatedly and the HTML content will displayed false.</p>
  
  <p>Here is the code part:</p>
  
  <pre><code>function playVideo() {
      var video = $('video')[0];
      video.addEventListener('ended', function () {
          $('video').hide();
          fadeShow();
      }, false);
      video.play();  
  }
  
  function fadeHide() {
      $('#content').fadeOut(1200, function () {
          $('div ul[id^=item]').each(function () {
              $(this).hide();
          });
          $('li[class^=visitor] span[id]').each(function () {
              $(this).hide();
          });
          playVideo();
      });
  }
  </code></pre>
  
  <p>The <code>fadeHide();</code> function will not called two times, just the <code>video.addEventListener('ended', function () {};</code> fill called several times. `fadeshow(); will display the HTML content. Actually I use the newest version of Chrome.</p>
  
  <p>Does anyone have an idea what went wrong?</p>
  
  <p><strong>Edit</strong>
  HTML video code. I hide the video with css.</p>
  
  <pre><code>&lt;video&gt;
      &lt;source src="video/mp4/xxx.mp4" type="video/mp4" /&gt;
      &lt;source src="video/ogg/xxx.ogg" type="video/ogg" /&gt;
      &lt;source src="video/webm/xxx.webm" type="video/webm" /&gt;
      Your browser does not support the video tag.
  &lt;/video&gt;
  </code></pre>
  
  <p>Greetz</p>