javascript - 当特定时间到达视频播放器时滚动

Question

我正在开发一个页面，我必须在其中显示视频及其相关的 pdf。 我已经使用 pdf.js 和 video.js 项目分别阅读 pdf 和视频。 它们都在不同的 div 中实现。这是我页面截图的链接here .我需要实现一个检查视频当前时间并根据时间更改pdf div位置的功能 下面是我实现的代码，但它根本不起作用

//function to perform on every timeupdate
var myFunc =function(){
    var myPlayer = this;
    var whereYouAt = myPlayer.currentTime();
//working of function
switch(whereYouAt)
{
    case 30: bookmarkscroll('pageContainer2');
         break;
    case 60: bookmarkscroll('pageContainer3');
         break;
    case 90: bookmarkscroll('pageContainer4');
         break;
    case 120: bookmarkscroll('pageContainer5');
          break;
    case 150: bookmarkscroll('pageContainer6');
          break;
    case 180: bookmarkscroll('pageContainer7');
          break;

}

};
myPlayer.addEvent("timeupdate",myFunc);

Answer 1

由于 timeupdate 事件不关心漂亮的十进制数字，并且可能在任何给定时间触发，甚至在 different intervals depending on your browser 时触发 (因此返回类似 12.56661 的东西)你应该改变你对 currentTime 值的处理(它也是一个属性而不是一个方法 - 因此没有 () - 请参阅 this doc ) 返回。

像这样的东西应该可以工作:

//select video player only once
var myPlayer = document.getElementById('videoPlayer');

//function to perform on every timeupdate
var myFunc =function(){

var whereYouAt = myPlayer.currentTime; 

if (whereYouAt > 30 && whereYouAt <= 60){
   bookmarkscroll('pageContainer2');
} else if (whereYouAt > 60 && whereYouAt <= 90){
   bookmarkscroll('pageContainer3');
} else if .... //and so on

}

myPlayer.addEventListener('timeupdate',myFunc,false);

另外需要注意的是，附加事件监听器的方法叫做 addEventListener 而不是 addEvent