https://github.com/skjnldsv/vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player. https://npmjs.org/@skjnldsv/vue-plyr
https://github.com/skjnldsv/vue-plyr

nextcloud npm plyr vue vue2 vue3 vuejs

Last synced: 3 months ago
JSON representation

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player. https://npmjs.org/@skjnldsv/vue-plyr

• Host: GitHub
• URL: https://github.com/skjnldsv/vue-plyr
• Owner: skjnldsv
• License: other
• Fork: true (redxtech/vue-plyr)
• Created: 2021-03-29T09:20:13.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-24T05:00:07.000Z (3 months ago)
• Last Synced: 2024-09-25T20:43:26.231Z (3 months ago)
• Topics: nextcloud, npm, plyr, vue, vue2, vue3, vuejs
• Language: TypeScript
• Homepage: https://skjnldsv.github.io/vue-plyr/
• Size: 42.2 MB
• Stars: 42
• Watchers: 4
• Forks: 6
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-plyr - A vue component for the plyr video & audio player

![github_actions](https://img.shields.io/github/checks-status/skjnldsv/vue-plyr/master?style=flat-square)

[![npm last version](https://img.shields.io/npm/v/@skjnldsv/vue-plyr.svg?style=flat-square)](https://www.npmjs.com/package/@skjnldsv/vue-plyr)

![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)

This is useful for when you want a nice video player in your Vue app.

- It uses [plyr](https://plyr.io) by [sampotts](https://github.com/sampotts) for the players.

- Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.

### Demo

A demo of the components (equivalent to the html example include here) can be found at

[skjnldsv.github.io/vue-plyr](https://skjnldsv.github.io/vue-plyr/).

## Installation

### NPM

```bash

npm install @skjnldsv/vue-plyr

```

### Yarn

```bash

yarn add @skjnldsv/vue-plyr

```

## Examples

Examples of how to use this app can be found [here](https://github.com/skjnldsv/vue-plyr/tree/master/examples).

## Usage

Once installed, it can be used in a template as simply as:

```vue

  

    

    

    

  

  

    

    

  

  


    

  


  


  


    

  


  


```

## Player Instance

To access the player instance, you can use the `player` property from the `refs` attribute.

```html

  ...

  export default {

    name: 'Component',

    mounted () {

      console.log(this.$refs.plyr.player)

    }

  }

```

## Events

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](https://github.com/sampotts/plyr#events).

```html

  ...

  export default {

    name: 'Component',

    mounted () {

      this.$refs.plyr.player.on('event', () => console.log('event fired'))

    }

```

## Options

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](https://github.com/sampotts/plyr#options). 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):

```js

createApp(App).use(VuePlyr, {

  plyr: {}

})

```

## Author & Contributors

  - [RedXTech](https://github.com/redxtech), released under the [MIT](./LICENSE.md) License.

  - [Skjnldsv](https://github.com/skjnldsv)