How to catch Youtube player's dragging/skipping/forwarding event with API in javascript

2
votes

I'm looking at the documentation for onStateChange, but I don't find anything the even when user will be dragging the player timer left or right. In fact, onStateChange doesn't catch anything when I do that.

This is from the documentation:

https://developers.google.com/youtube/iframe_api_reference

This event fires whenever the player's state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)f
5 (video cued).

When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

But Youtube somehow does it itself when you try to share a video! Go to a youtube video, and click on the share button, and then look at the Start At textfield while trying to drag the player's timer. The textfield gets updated with the player's getCurrentTime. How is Youtube doing that?

1
javascriptjqueryyoutubeyoutube-apiyoutube-javascript-api

1 Answers

1
votes

It does appear YouTube does not have such a event listener..or at least I could not find one. So instead I'm using setInterval to continuously call getCurrentTime() API call. If there is a better approach, please let me know. thx

function onPlayerStateChange(event) {

    timeInterval = setInterval(function() { 
        setCurntTime( txtBox, event.target.getCurrentTime() ) 
         }, 1500);
}