Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@160over90/vue-plyr-video
Advanced tools
Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.
Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.
If you do not have
yarn
you can download it here.
yarn add @160over90/vue-plyr-video
Include in main.js (app entry point)
import PlyrVideo from '@160over90/vue-plyr-video';
Vue.use(PlyrVideo);
yarn install
yarn run serve
The simplest example. Creates a player for the video in the link using all the default settings.
<PlyrVideo videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"/>
An example using an event to trigger a method when the Plyr video is ready.
<PlyrVideo
videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
@ready="ready"
/>
...
methods: {
ready() {
// Do something
},
},
Similar to the previous example with access to the DOM event. To get access to the original DOM event, use the special $event
variable.
<PlyrVideo
videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
@ready="ready($event)"
/>
...
methods: {
ready(event) {
console.log('ready', event);
},
},
All Plyr events have been implemented. For a list of events, reference the Plyr documentation.
All Plyr options can be passed as a prop. For a list of options, reference the Plyr documentation. Below are all props that aren't Plyr options.
videoUrl (String, Required) The URL for a video. Options are a YouTube URL, Vimeo URL, or a self-hosted URL/path.
poster (String, Default: undefined) The URL for the poster image.
type (String, Default: undefined) For videos not hosted using Vimeo or YouTube, this is the type attribute on the video element. If applicable, this option is recommended. Example: 'video/mp4'
background (Boolean, Default: false) A group of presets to easily use a video as a background video. All controls are removed, autoplay is enabled, click to play is disabled, fullscreen functionality is completely disabled, looping is enabled, and the video is muted. Specific settings are below and cannot be overridden.
controls: [],
autoplay: true,
clickToPlay: false,
fullscreen: { enabled: false, fallback: false, iosNative: false },
loop: true,
muted: true,
Most Plyr methods have been implemented. For a list of methods, reference the Plyr documentation. There are some changes to using the fullscreen method names detailed below. Also, the callback methods have not been implemented. Instead, use the Vue event hooks to achieve the same functionality.
The method fullscreen.enter()
can be used with enterFullscreen()
.
The method fullscreen.exit()
can be used with exitFullscreen()
.
The method fullscreen.toggle()
can be used with toggleFullscreen()
.
Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the 90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use polyfill.io which provides polyfills based on user agent. This is the method the demo uses.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
FAQs
Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.
The npm package @160over90/vue-plyr-video receives a total of 0 weekly downloads. As such, @160over90/vue-plyr-video popularity was classified as not popular.
We found that @160over90/vue-plyr-video demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.