scroll when specific time reaches in video player

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

score 5 · Accepted Answer · edited May 23 '17 at 11:46

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

its not scrolling may be becoz all the code of both pdf and video are in different divs — hiteshtr, Mar 27 '12 at 09:50
@hiteshtr If the video events behave properly and the scrolling's not working then why don't you try to break that down and ask a new question about the issue? Also do sth simple like `console.log('trying to bookmarkscroll');` right before you call the `bookmarkscroll` to see if the function is called. — m90, Mar 27 '12 at 09:52

score 0 · Answer 2 · edited Jan 05 '17 at 01:37

0

Use Math.floor on your currentTime like so:

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

This will return an integer and your switch statement will work.

edited Jan 05 '17 at 01:37

ρяσѕρєя K

132,198
53
198
213

answered Jan 05 '17 at 01:16

Jason Baley

1

score 0 · Answer 3 · answered Mar 27 '12 at 07:42

that's because timeupdate isn't usually 1,2,3,4, it s sth like 1.02302350,1.12412312. so you switch case will never get the right time. try using intervalls like

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  ) ...

don t know if you really need the break, because i don t know your scrollfunction. best l

scroll when specific time reaches in video player

3 Answers3