javascript - 重置先前选择的链接背景颜色

Question

嗨，我有一个歌曲播放列表，并在播放器中使用 JavaScript 将正在播放的歌曲的背景色设置为浅绿色。我知道我可以使用 a:focus 但是，如果用户在播放歌曲时选择歌词，歌曲将继续播放，但它会失去焦点，因此背景颜色恢复为原始颜色。我需要一种方法，当歌曲不再播放或选择另一首歌曲时，使用 javascript 将歌曲的颜色更改回原来的颜色。代码如下。

<!-- Video Player Script -->


var video_playlist = document.getElementById("video_player");
var links = video_playlist.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {                 
    links[i].onclick = handler;                       
};

function handler(e) {                               
    e.preventDefault();     
    videotarget = this.getAttribute("href");
    filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
    video = document.querySelector("#video_player video");
    source = document.querySelectorAll("#video_player video source");
    source[0].src = filename + ".mp3";
    video.load();   
    video.play();   
    this.style.background = "#AAFF8D";                  
};      

Answer 1

如果这是 html5 视频，则使用 onend 属性来检测视频何时完成播放:

video.onended = function(e) {
  // change background color here
};