Accessing player object

[thegeminisociety]

The plyr documentation states that you can access the player object through 2 ways:

1. Setting the return value from your call to the constructor to a variable
2. Accessing the object through any events.

Because I am using vue-plyr I am not directly calling the constructor thus making option 1 not feasible.

I tried option 2 as follows but end up with a null

:emit="['play']" @play="didPlay"

methods: { didPlay(event) { const player = $(event.target); // returns DOM element correctly const playerObj = event.detail.plyr; // null }

Does anyone know how I can access the actual player object? I need to do some manual method calls.

Thanks!

[redxtech]

I might be able to emit the plyr object on initialization, and you can set the state based on that. I'll also look into exposing the component's state so that you can access the plyr state element from outside the component.

[jwjcmw]

Just a note that this was working prior to the update to plyr v3 (I was accessing event.detail.plyr.getCurrentTime() to keep track of progress through a video using the timeupdate event). I just tried updating to the 3.0.0 version, and it returns null.

[thegeminisociety]

Any update on this? Running into a scenario where I have multiple players on the page and want to pause the active player if a user plays a different player. Thanks!

[redxtech]

@thegeminisociety @jwjcmw I unfortunately will not be able to do this for a while, as I am quite backed up with school. If either of you want to make a PR that for each of the components emits the object under emitObject or something like that in the mounted hook I would happily merge the PR

[thegeminisociety]

Found a solution to access the player object that works for now...

<plyr ref="player">

then

mounted() { this.player = this.$refs.player.player; this.player.play(); // works this.player.forward(20); // works }

[jwjcmw]

I was looking into this a bit further to see why the old behavior broke...here are a couple of examples (I stripped these down to bare js...I wanted to make sure vue wasn't the issue). In the first example, plyr is pulled in through the cdn, and the event.detail.object exists: https://codesandbox.io/s/l7z67y53zz

In the next example, the only difference is that plyr is required as a node module (like in vue-plyr), and the event.detail.plyr object does NOT exist: https://codesandbox.io/s/1yn2mkx3vq

Do either of you have an idea what might be happening here? I also tried specifically requiring the plyr.min.js file in dist, which should be the same one that is pulled from the cdn (and a compare shows them to be, except for the source map reference at the end). No difference.

[jwjcmw]

And, weirdly, this does work: https://codesandbox.io/s/887zvvpxl8 where I'm using an ES6 import instead of require. See any issues with changing vue-plyr to use that syntax instead? I can gen up a PR for it.

[jwjcmw]

Also, just noticed the examples only work in chrome...not sure if that is my code or codesandbox, which I just started using.

[jwjcmw]

I figured out the issue with the plyr object not being available on the events. If you use this: const Plyr = require('plyr') then a type check fails in the plyr code that outputs the plyr object along with the event. If you use: const plyr = require('plyr') or just require('plyr') all is good.

[redxtech]

This should be fixed in the new version coming out soon. Additionally, the player is going to be emitted by the player event when the component is mounted, so you can access it directly from that.

[Galvesmash]

Found a solution to access the player object that works for now...

<plyr ref="player">

then

mounted() { this.player = this.$refs.player.player; this.player.play(); // works this.player.forward(20); // works }

I LOVE YOU

[vana-dev]

not working for me :/ this.$refs.player.player returns undefined