title: HTML5 media events not working as expected
body: <p>I want to create an image fallback in case a video couldn't be loaded. I found out that the solution is to use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events" rel="nofollow">media events</a> for this problem. However, they don't seem to work as expected.</p>
  
  <pre><code>/**
   * Dynamically load the video within the given slide.
   */
  var loadVideo = function(slide) {
      var video = $('&lt;video muted&gt;'),
          source = $('&lt;source&gt;', {
              src: slide.attr('data-video'),
              type: 'video/mp4'
          });
  
      video.html(source);
  
      video[0].addEventListener('canplay', revealVideo(video), false);
      video[0].addEventListener('error', function() {
          alert('Video could not be loaded.');
          // fallback
      }, false);
      video[0].onended = function() { replayVideo(video) };
  
      slide.append(video);
  };
  </code></pre>
  
  <p>It doesn't matter whether the video is succesfully loaded or not, <code>revealVideo()</code> will always get called. The eventListener <code>error</code> is never triggered (for instance when using a <code>src</code> which doesn't exist).</p>