title: HTML5 video addEventListener 'ended' not fired
body: <p>I have made a video slider that cycles trough video's. I tested the code several time when I was working on it, but a week later when I set the content online it did not function anymore.</p>
  
  <p>What the problem is:</p>
  
  <p>Firefox > Works fine, the addEventListener gets called and all is well
  Chrome > Works fine, no errors but the addEventListener is not called and the cycle is not continued.</p>
  
  <p>Is this a common Chrome bug, or did I bug my own code?</p>
  
  <p>The cycle that I have created is this></p>
  
  <pre><code>    /* SLIDER */
  var counter = 0;
  var vid_count = 2;
  var logotime = 2000;
  var waittime = 5000;
  
  function mainRotation(index){
  
      loadVideo(index);
  }
  function loadVideo(index){
      var video = document.getElementById('slideVideo' + index);
      if(video.getAttribute("src")==null) {
          video.setAttribute("src", './templates/tacticalghillies/video/slidevideo_' + index + '.mp4');
          video.load();
      }
      else{
          video.currentTime = 0;
          $('#slideVideo' + index).show();
      }
  
      $('#slideImage').addClass('fadeout');
      var timing = setInterval(function(){
          showVideo(index, function(){
              if(counter &lt; vid_count-1){
                  counter++;
                  mainRotation(counter);
              }
              else{
                  mainRotation(counter);
                  counter = 0;
              }
  
          });
          clearInterval(timing);
  
      }, waittime)
  
  
  }
  
  function showVideo(index, cb){
      //fade in video opacity
  
      //play video
      //video ended:
      var video = document.getElementById('slideVideo' + index);
      video.play();
      console.log("playing");
      video.addEventListener('ended', myHandler, false);
    function myHandler(e){
          if(!e) { e = window.event; }
          console.log("eddd");
          $('#slideImage').removeClass('fadeout');
          var timer = setInterval(function() {
              clearInterval(timer);
              $('#slideVideo' + index).hide();
              cb();
          }, logotime);
  
    }
  
  }
  </code></pre>
  
  <p>Just to be clear this is the HTML that corrosponds with this piece of code:</p>
  
  <pre><code>            &lt;div class="animation"&gt;
              &lt;img class="a_aligned" id="slideImage" src="./images/slide_holder.png"&gt;
              &lt;video class="a_aligned slideVideo" width="1280" style="max-width:1280px;" id="slideVideo0" &gt;&lt;/video&gt;
              &lt;video class="a_aligned slideVideo" width="1280" style="max-width:1280px;" id="slideVideo1" &gt;&lt;/video&gt;
              &lt;img class="a_aligned" style="z-index:-1;" src="./images/slide_overlay.png"&gt;
          &lt;/div&gt;
  </code></pre>