Question

I am developing a page in which i have to show video with its related pdf.
I have used pdf.js and video.js projects for reading pdf and video respectively.
They both are implemented in different div. this is the link of my page’s screenshot here .I need to implement a function which checks for video current time and change the position of the pdf div according to time
below is the code i implemented but its not working at all

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

Since the timeupdate event does not care about nice looking decimal numbers and might fire at any given time and even at different intervals depending on your browser (therefore return something like 12.56661) you should change your handling of the value that currentTime (which is also a property and not a method – therefore no () – see this doc) returns.

Something like this should work:

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

Another thing to note is that the method for attaching event listeners is called addEventListener and not addEvent