时间戳

首页 > 解决方案 > 如何更改点击或自动播放视频的背景颜色和文本颜色

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

问题描述

问题：我有一个 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) {

  });
}

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

标签： javascriptjquerywistia

解决方案

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

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

希望能帮助到你！

推荐阅读