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

scroll when specific time reaches in video player

本文关键字：定时间 滚动 视频 播放器      更新时间：2023-09-26

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

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

由于timeupdate事件不关心好看的十进制数字，并且可能在任何给定时间甚至在不同的时间间隔根据浏览器触发（因此返回类似12.56661的内容），因此您应该更改对currentTime的值的处理（这也是一个属性，而不是一个方法-因此没有()-请参阅此文档）退货。

像这样的东西应该起作用：

//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

这是因为时间更新通常不是1,2,3,4，而是1.023023501.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

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

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

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

相关文章：