Question

嗨我有一首歌曲播放列表＆amp;在播放器中使用javascript将背景颜色设置为播放歌曲上的浅绿色。我知道我可以使用：焦点但是如果用户在播放歌曲时选择歌词，则歌曲将继续播放但是它会失去焦点，因此背景颜色将恢复为原始。当歌曲不再播放或选择了另一首歌曲时，我需要一种方法来使用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视频，那么使用onended proptery来检测视频何时播放完毕：

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

Answer 2

您似乎正在使用<video>音乐。考虑到这一点，歌曲不再播放了。＆＃34;我将假设这意味着视频已经结束。在这种情况下，您可以使用事件onended将背景颜色更改为原始颜色：

var player = document.getElementById("video_player");
player.onended = function(){
    // Change background color here
};

Answer 3

google＆amp;一些人想出了答案。

感谢Spencer Wieczorek＆amp; Walker Boh我认为应该可以解决问题。

以下代码：

<!-- Video Player Script -->


<!-- Get Selected Link --> 
var video_playlist = document.getElementById("video_player");
var links = video_playlist.getElementsByTagName('a');   
**var ele = video_playlist.getElementsByTagName("a");
var activeEle = null;**

for (var i=0; i<links.length; i++)
{                
links[i].onclick = handler;
};


<!-- Find Previously Selected Link -->
**for( var i=0; i<ele.length; i++ ) 
{
if( ele.item(i).style.background == "##AAFF8D" )
{
document.write(ele.item(i).id);
break;
}
}**

<!-- Highlight Selected Link & Remove Highlght On Previous Link -->             
**function highlight( )
{ 
if (activeEle){
activeEle.style.background = "#F9F9F9";
}                               
var oObj = event.currentTarget;
oObj.style.background = "#AAFF8D"; 
activeEle = oObj;
}** 


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();   
**highlight();**
};

重置之前选择的链接背景颜色

3 个答案: