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

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

• javascript
• youtube
• youtube-api

Share Improve this question Follow edited Aug 22, 2016 at 18:06 SurvivalMachine 8,3661515 gold badges6262 silver badges9191 bronze badges asked Sep 17, 2014 at 22:03 M1XM1X 5,3741313 gold badges6565 silver badges129129 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/nvtsazbr/