rexhin rexhin - 1 month ago 8x
Javascript Question

Custom progress bar using YouTube API

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

event listener.
But this event is not working at all. I think it's totally wrong. Any ideas?

player.addEventListener("YT.PlayerState.PLAYING", function() {

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.



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

I answerd this before but badly :-( I still leave the link to the old lazy answer code here: