Question

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

我目前正在使用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

单击菜单项时，您可以使用类似这种方式来切换backgroundColor：

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解决方案。您希望包含以某种方式切换的类。这是切换逻辑的示例，并在底部提供了指向您的工作脚本的链接。

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

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

2 个答案: