redxtech / vue-plyr Goto Github PK
View Code? Open in Web Editor NEWA Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
License: Other
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
License: Other
Is there any plan on doing this?
I saw in #7 that you plan on upgrading to plyr version 3, so could you take a look at that?
It's basically just checking if window
exists before doing any operations that only the client should do.
Something like if (typeof window !== 'undefined')
should usually do the trick.
If that isn't desired, I can maintain my own fork.
Cheers.
Hi,
Seems the last version is empty : https://d.pr/i/kHH58x
If I use 5.1.0: https://d.pr/i/dqfulS
Please fix the NPM package for 5.1.2 😺.
It looks like the version 2.1.1 that is on npm isn't correct...it doesn't have the emit code. I was trying to use that as I have some custom stuff that still requires plyr 2. Any chance of updating it?
How do I use the .source setter on the vue-plyr? the regular js plyr example for youtube is:
player.source = {
type: 'video',
sources: [
{
src: 'bTqVqk7FSmY',
provider: 'youtube',
},
],
};
Seems like I'm back with another issue 😨
I did get to test the implementation today fully and throughout and noticed some issues that were not happening with v2 but are happening with v3. I'm unsure if this related to SSR only since I can currently not test this on a non-SSR env.
This is very simple to reproduce:
I tested both ways:
// index.js
import VuePlyr from 'vue-plyr';
Vue.use(VuePlyr);
// someView.vue
<template>
<plyr v-if="props.row.snippet">
<audio controls
preload="none">
<source :src="`https://cdn.listen.moe/snippets/${props.row.snippet}`"
type="audio/mpeg"></audio>
</plyr>
</template>
and
// someView.vue
<template>
<plyr v-if="props.row.snippet">
<audio controls
preload="none">
<source :src="`https://cdn.listen.moe/snippets/${props.row.snippet}`"
type="audio/mpeg"></audio>
</plyr>
</template>
<script>
if (process.browser) var { Plyr } = require('vue-plyr');
export default {
components: { plyr: Plyr }
}
</script>
The latter works with v2 flawless, but not with v3 anymore.
"But not anymore" as in it throws those errors, they do not break the site or anything, the plyr instances still get recreated on a new visit to the view and play perfectly fine. The console spam is real though, especially if you display a lot of plyr instances.
Hi,
vue-plyr was previously working fine, after some update I am unable to download this package using npm , Its always prompting for npm install, even after downloading multiple times.
Currently you only have CommonJS bundle which can't be used in browser directly.
Line 4 in 7a7d9f0
poi build --library && poi build --library VuePlyr
would fix it, in this case you should remove removeDist: true
I receive this error when using the youtube "div" variant:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:8080').
more infos regarding this issue:
https://issuetracker.google.com/issues/35174286
It looks like the compiled version is different as when I try to import, It says there is no VuePlyr
and upon looking up the dist files, it is a different version than the one it should be.
I'm using v5
BTW.
Please check the unpkg version to know what I mean.
I'd love any advice on what the best way to monitor events in the player instance that is created by this component from a parent component. I was able to do it by using plyr in the parent component to find any instances...but I don't have access to the unique id to make sure I'm getting the right one. Would it make sense to have the vue-plyr components $emit the unique id? Is there a better way to do this?
Wow! I love these player. I am building an app with Nuxt.js and i require having a player and a playlist.
Please can these plugin work with Nuxt.js?
The plyr documentation states that you can access the player object through 2 ways:
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!
Hi there,
I'm looking to hook into certain buttons and changes rather than the events themselves. The problem with hooking into the play event or the state change for example, is that as far as I can see you can't tell if the play/pause button was pressed. Same goes for volume and seeking.
Is there anyway to differentiate between a button click or an event?
Thanks for the package - it's been a huge help.
Maybe needs a prop for pass an icon component for replace it when is in an offline env (local network without internet access)
Hi,
vue-plyr
is affected with this issue rollup/rollup-plugin-babel#260
This is causing some builds to break, particularly those who use UglifyJS.
You can see untranspiled code at the bottom here: https://unpkg.com/[email protected]/dist/vue-plyr.js
Update plyr version up to 3.5.2
Current version doesn't work in IE 11
I think this is fixed in version 3.5.1: https://github.com/sampotts/plyr/blob/master/changelog.md#v351
I have a cordova F7 project that I'm trying to using your nice components with.
I added
import VuePlyr from 'vue-plyr';
import 'vue-plyr/dist/vue-plyr.css';
Vue.use(VuePlyr)
to the main.js file and have a simple template in which I'm trying to use Plyr:
<template>
<f7-page>
<f7-navbar title="This month's video" back-link="Back"></f7-navbar>
<div class="block">
<plyr>
<video>
<source src="static/videos/video.mp4" type="video/mp4">
</video>
</plyr>
</div>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7BlockTitle,
},
};
</script>
I end up with a plyr player that has the controls stretched off the side of the video frame like so:
Is this an issue with vue-plyr, plyr itself, or am I using these wrong?
That seems like a bug to me, as https://unpkg.com/vue-plyr@latest includes whole lot of Vue code (>8k lines). Same applies to dist/vue-plyr.js
file when I install via yarn
.
I'm new to Vue, but from JS standpoint that seems completely unnecessary and wrong, as this is why you would include Vue.js
before including vue-plyr
.
Because of that I'm getting You are running Vue in development mode.
message twice in console
I'm also getting below, though I'm not quite sure it's related:
Unknown custom element: <vue-plyr> - did you register the component correctly?
I confirmed that the component registration code in vue-plyr.js is executed, but then calling Vue.options.components
does not list it.
If I'm however wrong and it's my fault, then please excuse me - as I mentioned, I'm new to Vue ;)
<vue-plyr ref='plyr' >
<div class="plyr__video-embed" @click='(e)=>e.stopPropagation()'>
<iframe :src="`https://www.youtube.com/embed/${youtube_id}iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1`"
allowfullscreen allowtransparency allow="autoplay">
</iframe>
</div>
</vue-plyr>
computed: {
player () {
return this.$refs.plyr.player
}
}
what am i missing?
Hello,
Is there a changelog? You recently updated from 3 to 4 version. There seem to be some notable changes...
Support live?
I am using VueJs-plyr with electron-vue template using npm
. When I try to register vue-plyr, i get following error:
/Users/kksai/ClientW…lyr/dist/plyr.css:1 Uncaught SyntaxError: Invalid or unexpected token
at createScript (vm.js:80)
at Object.runInThisContext (vm.js:139)
at Module._compile (module.js:606)
at Object.Module._extensions..js (module.js:653)
at Module.load (module.js:561)
at tryModuleLoad (module.js:504)
at Function.Module._load (module.js:496)
at Module.require (module.js:586)
at require (internal/module.js:11)
at Object.<anonymous> (/Users/kksai/ClientW…t/vue-plyr.cjs.js:8)
Can you help to find out what is the problem?
Can we remove this line here:
https://github.com/redxtech/vue-plyr/blob/master/src/VuePlyr.vue#L9
import 'plyr/dist/plyr.css'
I feel its unnecessary in there and you could just mention, like in previous versions to to import:
import 'vue-plyr/dist/plyr.css'
The reason it breaks is simple if you look into the dist/ folder vue-plyr.cjs.js
, the import transpiles down to require('plyr/dist/plyr.css')
which throws a nice error since a css file is sadly not something require can handle.
error in ./node_modules/plyr/dist/plyr.css
Module build failed (from ./node_modules/css-loader/index.js):
Unclosed bracket (1:9591)
@ ./node_modules/plyr/dist/plyr.css 4:14-133 14:3-18:5 15:22-141
@ ./node_modules/vue-plyr/dist/vue-plyr.es.js
@ ./plugins/vue-plyr.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
autoplay options give 'Uncaught (in promise) DOMException' error
How to remove ads of Youtube embed??
In theory, it should initially work. But in the case of returning to the tab back, the component is renders again, and makes GET requests too
Here is fiddle: https://jsfiddle.net/dcyh5jo8/
"vimeo iframe with progressive enhancement" method works, "vimeo div element" not.
Reactivity is broken for controls:
I have an audio player that has 2 states: minimised and full (var fullview), in which some controls are hidden/shown (think of spotify). The problem is that the controls for the players do not update according to the state.
<vue-plyr ref="plyr" id="audioPlayer" :options="{ controls: controls }">
<audio>
<source :src='content' type="audio/mp3">
</audio>
</vue-plyr>
...
computed: {
controls () {
if (this.fullview) {
return `<div class="plyr__controls">
<button type="button" class="plyr__control" data-plyr="rewind">
<svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg>
<span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span>
</button>
<button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
</button>
<button type="button" class="plyr__control" data-plyr="fast-forward">
<svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg>
<span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span>
</button>
<div class="plyr__progress">
<input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
<progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
<span role="tooltip" class="plyr__tooltip">00:00</span>
</div>
<div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
<div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
<button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
</button>
<div class="plyr__volume">
<input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">
</div>
<button type="button" class="plyr__control" data-plyr="captions">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span>
</button>
<button type="button" class="plyr__control" data-plyr="fullscreen">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
</button>
</div>
`
} else {
return `<div class="plyr__controls">
<button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
</button>
</div>
`
}
}
}
I can remedy this by adding :key="fullview" to the vue-plyr element but it has its drawbacks, seeing that refreshing the component that way stops playback. So I am currently doing it through css but I think It would be useful if the component controls were reactive.
Versions: [email protected], plyr@^3.5.2
There are complaints on the build phase with bili:
Using named and default exports together. Consumers of your bundle will have to use bundle['default'] to access the default export, which may not be what you want. Use
output.exports: 'named'
to disable this warning
But also from the user side when importing VuePlyr without braces (I use eslint with vue/recommended plugin)
Using exported name 'VuePlyr' as identifier for default export.eslint(import/no-named-as-default)
index.js:
This is rather confusing. I'm proposing to fix the naming scheme, if the project mantainer would agree, but let's just decide what is the way to go. I do my proposals:
import VuePlyr from './VuePlyr.vue'
VuePlyr.install = function (Vue, options = {}) {
Vue.component(VuePlyr.name, VuePlyr)
}
// ...parts redacted for brevity...
export default VuePlyr
This way we would stop both the complaints from build phase and from eslint on the user side.
We could also export the named component without the install method as VuePlyr as before, but then we should update documentation regarding imports changing them with import { VuePlyrPlugin as VuePlyr } from 'vue-plyr'
to prevent such complaints
Looks like for some reason VuePlyr.vue is not using the plyr.polyfilled.js this is causing the issue that the video player is not working on IE11, is there any way to use without using the polyfill.io suggestion on plyr github, since the server doesn't support cdn requests.
I am using vue-plyr in a nuxt setup, thanks for this wrapper! I am experiencing trouble with getting the events to be fired, my setup within a component (using pug) is:
vue-plyr(@timeupdate="onPlay")
and then mounting a Vimeo player with
div(data-plyr-provider="vimeo" :data-plyr-embed-id="vid")
Am I missing something?
Bug. Hide control volume when use "Poster" Image
To make vue-plyr compatible with IE you may have to load some polyfills
the original plyr has an option https://github.com/sampotts/plyr/blob/master/src/js/plyr.polyfilled.js
not sure how to enable this to your vue-plyr component, but would be great to have this option or on info on readmeme
IE9+ Can't be used normally, is there a solution?
Great package.
I'm a bit confused on how I can control the playback programatically. I'm showing the player in a modal and when it gets closed I need the playback to be paused, if it's reopened then to play.
I'm sure there's a simple way to do that, I'm just not seeing it in your documentation.
Thanks.
I'm having this same issue as the #27 with the latest version on NPM.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:8080').
I'm using the plyr player on a modal and when I show the modal the error occurs.
I'm not sure if it's related but if I close the modal and open a new one with a different video this one doesn't load, and if I go back to the first modal the video doesn't show as well.
For an internal project we tried using this inside a Modal window. Haven't had much time to debug as of yet. When I get more time in the day I'll try to update this issue but I wanted to go ahead and capture it now.
It seems the player ignores responsive styling on iOS devices (all we've checked so far).
iOS 11, Chrome and Safari
On desktop it appears to work fine. I apologize, I know this doesn't give a lot of info for now. I'll update later.
I created a fresh nuxt app (with npx create-nuxt-app my-plyr
), and did npm i vye-plyr plyr
, and added the created ~/plugins/vue-plyr.js
with the two lines you mention:
import 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
and included '~/plugins/vue-plyr.js'
in nuxt.config.js
's plugins array.
I.e. I did everything as I should.
But npm run dev
fails with an error:
ERROR Failed to compile with 1 errors 4:16:54 AM
error in ./node_modules/plyr/dist/plyr.css
Module build failed (from ./node_modules/css-loader/index.js):
Unclosed bracket (1:9688)
Hi,
I'm trying to chance source value dynamic but nothing happens, Am I missing something?
<plyr>
<audio>
<source :src="episode" format="audio/mp3">
</audio>
</plyr>
<button @click="episode = 'https://archive.org/download/testmp3testfile/mpthreetest.mp3' ">x</button>
<button @click="episode = 'https://archive.org/download/DiegomcnamaraPodcast/podcast_64kb.mp3'">y</button>```
Ads for Vue-Plyr ??
Hi, I'm getting this error when using vue-plyr on nuxt 2.2
Does anyone know how to fix it?
Thanks!
ERROR in ./node_modules/plyr/dist/plyr.css (./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/plyr/dist/plyr.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unclosed bracket (1:9591)
As it says in the title. I may open a PR for this if I do it myself.
Would be great if the Sass file was included as an option.
dist/vue-plyr.css includes wrong value --value
.
here is error that shown by postcss-loader
:
variable '--value' is undefined and used without a fallback
@ ./node_modules/vue-plyr/dist/vue-plyr.css 4:14-121
I specify the config in data like
options: {
volume: 0
},
<plyr-video :options="options" :videos="videos" :crossorigin="true" />
can vue-plyr support flv videos?
This section needs to be changed: https://github.com/redxtech/vue-plyr#ssr
The way it is now, causes people (users of nuxt) to think that there is something wrong with them, and they will try for hours to figure out what it is they're doing wrong in the hope of getting vue-plyr working with their site. I think that's not very respectful of other human beings and their time.
Another option is to resolve this issue is by fixing bug #43 (which has been there for two months).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.