title: HTML5 Video Event Listeners not working
body: <p>I'm trying to add an 'ended' and 'timeupdate' event listener to my video player, but for some reason it doesn't work:</p>
  
  <pre><code>//File: watch.php
  //Folder Layout:
  //root
  //   watch.php
  //   js/
  //      jquery-3.3.1.min.js
  //      bootstrap.min.js
  //   cs/
  //      bootstrap.min.css
  //      style.css
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;?php
      $video_link = "first_video.mp4";
      ?&gt;
  
      &lt;title&gt;Watch Video&lt;/title&gt;
  
      &lt;!-- STYLESHEETS --&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;?php echo "&lt;video id='video_player' src='$video_link' controls autoplay onclick='this.paused ? this.play() : this.pause();' oncontextmenu='return false;'&gt;Browser doesn't support HTML5 Video!&lt;/video&gt;"; ?&gt;
  
      &lt;!-- SCRIPTS --&gt;
      &lt;script src="js/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          var video = document.getElementById('video_player');
  
          function Ended() 
          {
              alert("Ended!");
              $('#video_player').attr('src', 'second_video.mp4');
              video.load();
              video.play();
          };
  
          function TimeUpdate()
          {
              if(video.currentTime &gt; (1 * 60))
                  alert("1min passed...");
          };
  
          video.addEventListener('ended', Ended);
          video.addEventListener('timeupdate', TimeUpdate);
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>If somebody could explain to me why it doesn't work that would be great. Any help is greatly appreciated. Thanks in advance!</p>