Javascript 如何在youtube chapter marker player的章节菜单上播放视频时突出显示当前章节

我是编程新手。我只是想知道，在youtube chapter marker播放器的章节菜单上播放视频时，如何突出显示当前章节

实时链接：

完整CSS：

完整javascript：

---

谁能给我提供一些类似的代码或样品。所以，我可以知道怎么做。。非常感谢：）

youtube api有这个脚本

function getCurrentTime() {
   ytplayer.getCurrentTime();
}

其中“ytplayer”是您的目标玩家

我想你可以用

setInterval(getCurrentTime(), 3000);

并检查是否匹配

您需要使用要测试的值设置var

=到？但是呢

之后，脚本可以相应地更改div的css。onClick需要有相同的结果。

新代码：

function clearList() {

  var list  = document.getElementById("chapter-list"); 
  var items = list.getElementsByTagName("li"); 

  for (var i = 0; i < items.length; i++) { 

      items[i].removeAttribute("class"); 

  }

}

function highlightChapter(player) {

  setInterval(function() { 

    var status = player.getPlayerState();

    if (status>0) {

        var currentTime = player.getCurrentTime() ;

        list = document.getElementById('chapter-list');

        for (var i = 0; i < times.length; i++) {

          var time = times[i];
          var item = list.children[i];

          if (currentTime>=time) {

            clearList();
            item.setAttribute('class', 'current');

          }

        }
    }  

  }, 1000);      

}

函数clearList（）{
var list=document.getElementById（“章节列表”）；
var items=list.getElementsByTagName（“li”）；
对于（var i=0；i0）{
var currentTime=player.getCurrentTime（）；
list=document.getElementById（'chapter-list'）；
对于（var i=0；i=时间）{
clearList（）；
item.setAttribute（'class'，'current'）；
}
}
}  
}, 1000);      
}

编辑代码：

function addChapterMarkers(containerElement, player) {
  var ol = document.createElement('ol');
  ol.setAttribute('class', 'chapter-list');
  ol.setAttribute('id', 'chapter-list'); ////////////// HERE
  ol.setAttribute('style', 'width: ' + width + 'px');
  containerElement.appendChild(ol);

  for (var i = 0; i < times.length; i++) {
    var time = times[i];
    var chapterTitle = params.chapters[time];

    var li = document.createElement('li');
    li.setAttribute('data-time', time);
    li.textContent = formatTimestamp(time) + ': ' + chapterTitle;

    li.onclick = function() {
      // 'this' will refer to the element that was clicked.
      player.seekTo(this.getAttribute('data-time'));

      //my code
      clearList(); //// ADDITIONAL CODE
      this.setAttribute('class', 'current');  //// ADDITIONAL CODE
      // end my code

    };
    ol.appendChild(li);
  }
}

function insertPlayerAndAddChapterMarkers(params) {
  var containerElement = document.getElementById(params.container);
  if (!containerElement) {
    throw 'The "container" parameter must be set to the id of a existing HTML element.';
  }
  var player = initializePlayer(containerElement, params);
  addChapterMarkers(containerElement, player);

  highlightChapter(player); ////// INSERT


}

函数addChapterMarkers（容器元素，播放器）{
var ol=document.createElement（'ol'）；
ol.setAttribute（'class'，'chapter list'）；
ol.setAttribute（'id'，'chapter list'）；//此处
ol.setAttribute（'style'，'width:'+width+'px'）；
containerElement.appendChild（ol）；
对于（var i=0；i

为OP提供一个关于他们错误操作的答案，而不仅仅是代码块，这是很有帮助的！