如何在 youtube 章节标记播放器的章节菜单上播放视频时突出显示当前章节

Question

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

直播链接：http://gdata-samples.googlecode.com/svn/trunk/ytplayer/ChapterMarkerPlayer/index.html

完整的 CSS：http://gdata-samples.googlecode.com/svn/trunk/ytplayer/ChapterMarkerPlayer/chapter_marker_player.css

完整的javascript：http://gdata-samples.googlecode.com/svn/trunk/ytplayer/ChapterMarkerPlayer/chapter_marker_player.js

谁能给我一些类似的代码或示例。所以，我可以知道如何做到这一点.. 非常感谢:)

Answer 1

youtube api 有这个脚本

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

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

我会说你可以使用

setInterval(getCurrentTime(), 3000);

并检查是否匹配。

您需要为 var's 设置要测试的值。

= 到 ?但是?

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

Answer 2

新代码：

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);      

}

编辑代码：

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


}