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

Question

问题：我有一个 HTML 的 Wistia 视频播放列表，我正在尝试更改视频播放时的背景颜色和颜色，通过点击它们或让播放列表自动播放。

我目前正在使用 a:focus 来完成点击部分，但我正在寻找更复杂的东西？作为解决方案。如果您点击视频播放列表或视频本身，颜色将恢复为默认值。

到目前为止，这是我的代码：https://codepen.io/atnd/pen/qzaVLX

JavaScript不是我的强项，所以我真的不知道从哪里开始。

我正在使用嵌入链接构建播放列表，但我引用了 Wistia 的 API 并且不确定适用的内容：https://wistia.com/support/developers/player-api && https://wistia.com/support/developers/playlist-api

这是我可怜的 JS：

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

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

  });
}

提前感谢您提供的任何帮助！

Answer 1

您可以使用类似这样的方法在单击菜单项时切换背景颜色：

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)
  })
}

要知道播放器自动播放的是哪个视频，会比较复杂。您必须在 API 中找到一个事件，告知何时播放新视频，然后获取菜单项的 DOM 元素并调用其上的 highlightMenuItemAndDisableOther 方法。

希望对您有所帮助！

Answer 2

我继续为你写了一个纯js解决方案。你想以某种方式包含你的 class 切换。这是切换逻辑的示例和底部的工作脚本 link。

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>

这是您的解决方案：https://codepen.io/jacobshenning/pen/pXNOay

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

How to change background color and text color of clicked or auto-played video

javascript

jquery

wistia