如何更改单击或自动播放视频的背景颜色和文本颜色

Question

Problem: I have a HTML video playlist of Wistia videos and I'm trying to change the background-color and color of the videos as they are played, either by clicking on them or having the playlist autoplay.

I'm currently using a:focus to accomplish the click part, but I'm looking for something more sophisticated? as a solution. If you click out of the video playlist or on the video itself, the colors go back to their defaults.

Here is my code so far: https://codepen.io/atnd/pen/qzaVLX

JavaScript is not my strong suit, so I don't really know where to begin.

I'm using Embed Links to build a playlist, but I referenced Wistia's API and am unsure what is applicable: https://wistia.com/support/developers/player-api && https://wistia.com/support/developers/playlist-api

Here's my pathetic JS:

var vidcontainer = document.getElementById("vidcontainer");
var videos = video.getElementsByTagName("a");

for(i=0; i<videos.length; i++) {
  videos[i].addEventListener("click", function(event) {

  });
}

Thank you in advance for any help you can provide!

Answer 1

You could use something like this for toggling the backgroundColor when the menu item is clicked :

var vidcontainer = document.getElementById("vidcontainer");
var videos = vidcontainer.getElementsByTagName("a");

function highlightMenuItemAndDisableOthers(element) {
  element.style.backgroundColor = 'red'
  for (let video of videos) {
    if (video !== element) video.style.backgroundColor = 'white'
  }
}

for (let video of videos) {
  video.addEventListener('click', event => {
    highlightMenuItemAndDisableOthers(video, videos)
  })
}

For knowing which video is played automatically by the player, it will be more complex. You have to find an event in the API that tell when a new video is playing, then get the DOM element of the menu item and call the highlightMenuItemAndDisableOther method on it.

Hope it helps!

Answer 2

I went ahead and wrote a pure js solution for you. You want to contain your class toggling somehow. Here is an example of the switching logic and a link to your working script on the bottom.

 var videos = document.getElementsByTagName('a'); for(i=0; i<videos.length; i++) { videos[i].addEventListener("click", function(event) { document.querySelectorAll('li').forEach( el => el.classList.remove('active') ); event.target.parentNode.classList.add('active'); }); } 

 .active { font-weight: bold; } 

 <nav id="Nav" class="interest-nav"> <ul id="interest-ul"> <li><a href="#box1">Fashion</a></li> <li><a href="#box2">Movies</a></li> <li><a href="#box3">TV</a></li> </ul> </nav> 

Here is your solution: https://codepen.io/jacobshenning/pen/pXNOay