Comments (12)
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 }
from vue-plyr.
not working for me :/ this.$refs.player.player returns undefined
from vue-plyr.
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
from vue-plyr.
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.
from vue-plyr.
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.
from vue-plyr.
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!
from vue-plyr.
@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
from vue-plyr.
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.
from vue-plyr.
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.
from vue-plyr.
Also, just noticed the examples only work in chrome...not sure if that is my code or codesandbox, which I just started using.
from vue-plyr.
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.
from vue-plyr.
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.
from vue-plyr.
Related Issues (20)
- Help me
- 'npm install vue-plyr' error? HOT 3
- sampotts/plyr.git develop Permission denied HOT 3
- Not working with HLS mp4s
- Add subtitles to a Youtube iframe
- default controls shown in the demo page its not coming
- Vue Plyr 7.0.0 causes npm ci in Docker fail with error 401 HOT 3
- Any maintenance status update for this (lovely) package? HOT 3
- Installation of dependency sampotts/plyr extremely slow
- Quality settings closes
- Cannot change vimeo source dynamically - error: Unknown player. Probably unloaded
- reload componentn when language changed
- `v-if` not working with plyr.
- Controls disappears in full screen HOT 1
- Fails to compile if importing css as in the example
- How can I use it Nuxt3 app HOT 3
- Customizing player
- Nuxt 3 SSR HOT 2
- Cannot load videos using Hls.js on Vite
- Vue3 update starting time
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-plyr.