Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@skjnldsv/vue-plyr
Advanced tools
Readme
This is useful for when you want a nice video player in your Vue app.
A demo of the components (equivalent to the html example include here) can be found at skjnldsv.github.io/vue-plyr.
npm install @skjnldsv/vue-plyr
yarn add @skjnldsv/vue-plyr
Examples of how to use this app can be found here.
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>
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: {}
})
FAQs
A vue component for the plyr video & audio player.
The npm package @skjnldsv/vue-plyr receives a total of 1,518 weekly downloads. As such, @skjnldsv/vue-plyr popularity was classified as popular.
We found that @skjnldsv/vue-plyr demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.