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

在哪里＆＃34; ytplayer＆＃34;是你的目标玩家。

我会说你可以使用

setInterval(getCurrentTime(), 3000);

并检查它是否匹配。

您需要设置 var ~~以设置要测试的值。~~

=到？但是＆lt; ??

之后脚本可以相应地更改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


}

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

2 个答案: