Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-plyr
Advanced tools
A vue component for the plyr video & audio player.
Weekly downloads
Changelog
7.0.0
emit
option.<div>
wrapper for components.Readme
v7.0.0 - Changelog
A vue component for the plyr video & audio player.
This is useful for when you want a nice video player in your Vue app.
It uses plyr by sampotts for the players.
Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.
A demo of the components (equivalent to the html example include here) can be found at redxtech.github.io/vue-plyr.
yarn add vue-plyr # or npm i vue-plyr
// In your main vue file - the one where you create the initial vue instance.
import Vue from 'vue'
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
// Vue 3.x
// The second argument is optional and sets the default config values for every player.
createApp(App)
.use(VuePlyr, {
plyr: {}
})
.mount('#app')
// Vue 2.x
// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
plyr: {}
})
For SSR, you can import the SSR optimized module, found at dist/vue-plyr.ssr.js
. There is a more in depth description
on how to use it with nuxt below.
In the browser you can include it as you would any other package with unpkg, along with the stylesheet:
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/vue-plyr"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css" />
<!-- You will also need to install the component during app creation -->
<script>
window.Vue.createApp(VuePlyr).mount('#app')
</script>
Once installed, it can be used in a template as simply as:
<!-- video element -->
<vue-plyr :options="options">
<video
controls
crossorigin
playsinline
data-poster="poster.jpg"
>
<source
size="720"
src="/path/to/video-720p.mp4"
type="video/mp4"
/>
<source
size="1080"
src="/path/to/video-1080p.mp4"
type="video/mp4"
/>
<track
default
kind="captions"
label="English captions"
src="/path/to/english.vtt"
srclang="en"
/>
</video>
</vue-plyr>
<!-- audio element -->
<vue-plyr>
<audio controls crossorigin playsinline>
<source
src="/path/to/audio.mp3"
type="audio/mp3"
/>
<source
src="/path/to/audio.ogg"
type="audio/ogg"
/>
</audio>
</vue-plyr>
<!-- youtube iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
<div class="plyr__video-embed">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
</vue-plyr>
<!-- youtube div element -->
<vue-plyr>
<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</vue-plyr>
<!-- vimeo iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
<div class="plyr__video-embed">
<iframe
src="https://player.vimeo.com/video/143418951?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
</vue-plyr>
<!-- vimeo div element -->
<vue-plyr>
<div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
</vue-plyr>
To access the player instance, you can use the player
property from the refs
attribute.
<template>
<vue-plyr ref="plyr">...</vue-plyr>
</template>
<script>
export default {
name: 'Component',
mounted () {
console.log(this.$refs.plyr.player)
}
}
</script>
Examples of how to use this app can be found here.
If you want to capture events from the plyr instance, you can do so by accessing the player instance through the ref
attribute and using that object for events, as you would with a vanilla plyr instance.
Valid events are here.
<template>
<vue-plyr ref="plyr">...</vue-plyr>
</template>
<script>
export default {
name: 'Component',
mounted () {
this.$refs.plyr.player.on('event', () => console.log('event fired'))
}
</script>
For custom options you can pass an options
prop which is an object that will be passed to the new Plyr()
creation.
Available options
here. I have added a new option (hideYouTubeDOMError
) that hides the error
that is always logged when destroying a YouTube player. It defaults to true
, and you can disable it and see the error
by setting it to false.
You can also specify the default options when registering the plugin (these will be ignored if you specify a player-specific options object via props):
createApp(App).use(VuePlyr, {
plyr: {}
})
This should support SSR out of the box. For nuxt, create a file called vue-plyr.js
in your
plugins folder containing only these three statements:
import Vue from 'vue'
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'
import 'vue-plyr/dist/vue-plyr.css'
// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
plyr: {}
})
Then, in your nuxt.config.js
file add { src: '~/plugins/vue-plyr', mode: 'client' }
to the plugins array. The
vue-plyr
element should be globally registered now.
The nuxt.config.js
file should at minimum include this:
export default {
plugins: [{ src: '~/plugins/vue-plyr', mode: 'client' }]
}
FAQs
A vue component for the plyr video & audio player.
The npm package vue-plyr receives a total of 6,447 weekly downloads. As such, vue-plyr popularity was classified as popular.
We found that vue-plyr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.