addEventListener'正在播放'只會觸發一次。

我有以下script它獲取給定的頁面上的所有video元素，然後施加一個playing事件對他們說：addEventListener'正在播放'只會觸發一次。

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只適用於第一個被點擊的視頻，有人可以解釋爲什麼以及如何解決這個問題，因此它會觸發每次播放視頻？

來源

2016-12-07 Code Ratchet

您可能應該給我們一個現場演示（StackSnippet®或小提琴）來重現問題，因爲您的實際代碼應該可以工作; @gyre所做的一個工作也應該是*（現在他/她修正了她/他的錯字）*，你也可以使用'this'，但我想沒有其他解決方案可以解決潛在的問題，這是不可見的你的代碼塊。 – Kaiido

嘗試移除外部閉包並在偵聽器中使用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。

來源

2016-12-07 04:14:01 gyre

這不能解決問題，不幸的是 –

您是否在每次點擊「play」時試圖觸發事件偵聽器？ – gyre

當我點擊視頻1上的播放時，例如它有效，當視頻1播放完畢，然後我點擊播放視頻2時，沒有任何聲音被觸發。 –

addEventListener'正在播放'只會觸發一次。

回答

相關問題