在视频播放器中达到特定时间时滚动答案

【问题标题】：scroll when specific time reaches in video player在视频播放器中达到特定时间时滚动
【发布时间】：2012-03-27 07:24:03
【问题描述】：

我正在开发一个页面，我必须在其中显示带有相关 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);

【问题讨论】：

标签： javascript jquery pdf scroll html5-video

【解决方案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

【讨论】：

它不滚动可能是因为pdf和video的所有代码都在不同的div中
@hiteshtr 如果视频事件正常运行并且滚动不起作用，那么您为什么不尝试打破它并提出有关该问题的新问题？在调用bookmarkscroll 之前也可以做一些简单的事情，比如console.log('trying to bookmarkscroll');，看看函数是否被调用。

【解决方案2】：

那是因为 timeupdate 通常不是 1,2,3,4，它像 1.02302350,1.12412312。所以你切换案例永远不会得到正确的时间。尝试使用间隔像

this.currentPageContainer; //save your current container


if( whereYouAt > 30 && whereYouAt < 60 ){
  var scrollTo = 'pageContainer2';
  if( this.currentPageContainer == scrollTo ) return;  //break, if already scrolled

  bookmarkscroll('pageContainer2');
  this.currentPageContainer = scrollTo;
}
else if( whereYouAt > 60 && whereYouAt < 90  ) ...

不知道你是否真的需要休息，因为我不知道你的滚动功能。最好的l

【讨论】：

【解决方案3】：

在您的 currentTime 上使用 Math.floor，如下所示：

var whereYouAt = Math.floor(myPlayer.currentTime);

这将返回一个integer 并且您的switch 语句将起作用。

【讨论】：