addEventListener 'playing' only fires once.
<p>I have the following <code>script</code> which gets all <code>video</code> elements on a given page and then applies a <code>playing</code> event to them:</p>

<pre><code>var video = document.getElementsByTagName("video");

for(var i = 0; i &lt; video.length; i++){
 (function(vid) {
     vid.addEventListener('playing', function(){
       var percentComplete = Math.round((vid.currentTime / vid.duration) * 100);
       console.log(percentComplete);
     });
 })
 (video[i]);
}
</code></pre>

<p>Now when I run the page and click on video 1 for example I see the <code>percentComplete</code> being logged to the <code>console log</code>, however when video 1 finishes and I click video 2 nothing is written to the <code>console</code>, it seems this <code>addEventListener</code> is only applied to the first video that is clicked, can someone explain why and how I can resolve this so it fires every time a video is played? </p>