Как изменить цвет фона и цвет текста кликаемого или автоматически воспроизводимого видео

Question

Проблема: У меня есть список воспроизведения видео в формате HTML с видео Wistia, и я пытаюсь изменить цвет фона и цвет видео во время их воспроизведения, либо щелкнув по ним, либо выбрав список воспроизведения.autoplay.

В настоящее время я использую: focus для выполнения щелчка, но я ищу что-то более сложное?как решение.Если вы щелкнете по списку воспроизведения видео или по самому видео, цвета вернутся к значениям по умолчанию.

Вот мой код: https://codepen.io/atnd/pen/qzaVLX

JavaScript не моя сильная сторона, поэтому я не знаю, с чего начать.

Я использую Embed Links для создания плейлиста, но я ссылался на API Wistia и не уверен, что применимо: 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

Я пошел дальше и написал чистое решение для 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

Answer 2

Вы можете использовать что-то подобное для переключения 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.

Надеюсь, это поможет!