Access to onPlaybackRateChange event

[jonvitale]

Hi, first of all, thank you for this great project.

I apologize if I just missed something in the docs about how to do this, but it seems that some of the events from the youtube api are not accessible directly through vue-youtube with an @Event binding in the template. As the subject of this email imples, I'm specifically interested in onPlaybackChange - although onStateChange would be nice too.

I do see that you have access to the addEventListener method of the player, which allows you to add the name of function to call. So, something like, this.player.addEventListener('onPlaybackChange', 'myFunction'). But, as far as I can tell the 'myFunction" needs to live on the global window. Maybe there is a better way to do this, but for now I'm putting a function on "window", which is not ideal.

Once again thanks.

[TitanFighter]

I do not know why in your case the myFuntion should live on the global window.

Here is the example how it works in my project:

export default {
  ...

  computed: {
    player () {
      return this.$refs.youtube.player
    }
  },

  mounted () {
    // Listen Youtube player state changes (buffering, user's play/pause clicks)
    // https://stackoverflow.com/a/17087006/4992248
    this.player.addEventListener('onStateChange', this.youtubeControl)
  },

  methods: {
    youtubeControl (youtubeState) {
      /**
         * Youtube States:
         *  -1 - unstarted
         *  0 - ended
         *  1 - playing
         *  2 - paused
         *  3 - buffering
         *  5 - video cued
         */

      // Current Track stopped\finished playing (reached the end of time)
      if (youtubeState === 0) {

      } else if (youtubeState === 1) {

      } else if (youtubeState === ....) {

      }
    }
  }
}

Also I did not find onPlaybackChange event from this.player.addEventListener('onPlaybackChange', 'myFunction') but onPlaybackRateChange indeed exists.

Youtube Events.

[jonvitale]

Yeah, you're right, this definitely works. I was taking the youtube api docs too literally. They ask for a string representation of a listener function, not the function itself. I should have just tried it - and yes, I meant onPlaybackRateChange. Thanks, feel free to close... but maybe in the long term you could support more events at the vue template level.