Custom progress bar using YouTube API

Question

I want to create a custom progress bar using YouTube API and I think the best event listener to do the progress calculations would be YT.PlayerState.PLAYING event listener. But this event is not working at all. I think it's totally wrong. Any ideas?

player.addEventListener("YT.PlayerState.PLAYING", function() {
    console.log(player.getDuration());
});

Adding or removing an event listener

player.addEventListener(event:String, listener:String):Void Adds a listener function for the specified event. The Events section below identifies the different events that the player might fire. The listener is a string that specifies the function that will execute when the specified event fires.

player.removeEventListener(event:String, listener:String):Void Removes a listener function for the specified event. The listener is a string that identifies the function that will no longer execute when the specified event fires.

Events

onStateChange This event fires whenever the player's state changes. The value 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)
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

errnesto errnesto · Accepted Answer · 2014-09-17T22:25:16

YT.PlayerState.PLAYING is a state not an event the event you can listen for is onStateChange then if the state is playing you can get the information from the player and update the seek bar accordingly.

player.addEventListener("onStateChange", updateBar);

function updateBar () {
    if (YT.PlayerState.PLAYING) {
        console.log(player.getCurrentTime());
        setTimeout(updateBar,200);
    }
}

I answerd this before but badly :-( I still leave the link to the old lazy answer code here: http://jsfiddle.net/nvtsazbr/

Custom progress bar using YouTube API

1 Answers