0

问题：我有一个 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 /播放列表-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) {

  });
}

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

4

2 回答 2

0

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

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 方法。

希望能帮助到你！

于 2019-06-20T01:07:59.473 回答
0

我继续为您编写了一个纯 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

于 2019-06-20T01:14:13.607 回答