Vimeo API Callback Function Help


(Matt) #1

Thanks @DBear for you post about settin up the Vimeo API. It works great!

I’m sure this is easy to do but I’m getting frustrated trying to figure how to use a callback function. I need to trigger something very simple when a Vimeo video reaches a certain number of seconds. hypeDocument.getElementById("notes").innerHTML = "text..."

I have the Vimeo API working fine to load and play the video but I’m stuck with making the callback function work. I believe this is the start of the code I need:

	vp.player.getCurrentTime().then(function(seconds) {
    // seconds = the current playback position
}).catch(function(error) {
    // an error occurred
});

LREI2018Final.zip (62.5 KB)


(Mark Hunte) #2

Hmm… not overly familiar with this. But that looks like it only gets the current time once per call. It is not really using a callback in the sense I think you mean. It is using a promise. Which is it will try and fire the code once it has the promised data from the call… i.e it will wait.

I think you want an event listener instead.

the API has a timeupdate event.

You can set it’s event listener to listen for the timeupdate event which fires ever 250ms.

So. I would place the event listener in your setup() function. After the creation of the player and player ready.

Like so:

vp.player.ready().then(function() {
    // the player is ready
    
    hypeDocument.getElementById('playButton').style.display = 'block';
});
	
vp.player.on('timeupdate', function(data) {
		
		if (Math.floor(data.seconds) == hypeDocumentCustomData.textTime){
		console.log(data.seconds + 's played');
		}
	});

The data returned by the event is a key/value associated object.

for example.

{
    duration: 61.857
    percent: 0.049
    seconds: 3.034
}

We need the seconds

So in the code above you see we access that data.seconds

You also will see we Math.floor() the result. This means 3.034 will become 3 . This is done so we do not have to factor in the milliseconds when we do our compares.

The compare we do is .

if (Math.floor(data.seconds) == hypeDocumentCustomData.textTime){

The hypeDocumentCustomData.textTime is a var we have added else where which will hold the value of seconds you want to watch for.

How we add it.

At the very top of the setup() function add these two lines.

hypeDocumentCustomData = {}
hypeDocumentCustomData.textTime = -1

The hypeDocumentCustomData = {} line declares an empty object. similar to what the data is.

We than declare a new key/value pair inside this object. i.e textTime as the key/Name and -1 as the value.
We us -1 because at the very beginning we do not want a no value match or a 0s match

Now that is all set up we can give the hypeDocumentCustomData.textTime new values each time one of your platVid() function’s switch cases are met.

So for example inside the setCurrentTime promise for ‘alden’ and after the seek we can add

hypeDocumentCustomData.textTime = 28

i.e

vp.player.setCurrentTime(20.0).then(function(seconds) {
    // seconds = the actual time that the player seeked to
    hypeDocumentCustomData.textTime = 28.0
    vp.player.play();

    });

I have not tested this fully and you will need to work on the comparison inside the timeupdate but this all hopefully helps you to move forward and hopefully was what you meant.


(Matt) #3

Thank you @MarkHunte!!

I learned so much from this. I literally spent an hour going through all of your info.

I ended up just using the timeupdate event to update an element as the video progressed like this:

vp.player.on('timeupdate', function(data) {
		
		
		 //evaluate  entries
        switch(true) {
 
   //everything is correct
     case (data.seconds < 13):  
     
     hypeDocument.getElementById("notes").innerHTML = "";
     
     break;
     
     
     case (data.seconds >= 13 && data.seconds < 87):  
     
     hypeDocument.getElementById("notes").innerHTML = "<i>The Tortoise</i> by <strong>Alex P</strong>";
    
     
     break;
     
     case (data.seconds >= 87 && data.seconds < 136):  
     
     hypeDocument.getElementById("notes").innerHTML = "<i>The Fire</i> by <strong>Amelie R</strong>";
     
     break;

etc…

Is there some reason why this would not be a good idea?

Thank you again!

(also do you have a Patreon page as I’d love to support all of your efforts on this forum)