addEventListener «играет» только один раз.

Question

У меня есть следующие script, который получает все video элементы на данной странице, а затем применяет playing им событие:

var video = document.getElementsByTagName("video"); 

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

Теперь, когда я запускаю страницу и нажмите на видео 1, например, я вижу percentComplete быть зарегистрировался на console log, однако, когда видео 1 заканчивается, и я нажимаю видео 2, ничего не записывается в console, кажется, что этот addEventListener применяется только к первому клику, который можно щелкнуть, может кто-то объяснить, почему и как я могу это разрешить, чтобы он срабатывал каждый раз, когда воспроизводится видео?

Answer 1

Попробуйте удалить внешнее закрытие и использовать event.target в вашем слушателе.

var video = document.getElementsByTagName("video"); 

for (var i = 0; i < video.length; i++) { 
    video[i].addEventListener('playing', function (event) { 
     var vid = event.target 
     var progress = Math.round((vid.currentTime/vid.duration) * 100) 
     console.log(progress) 
    }) 
} 

Для тех, кто заинтересован, вот the full list of media events.