Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

audio audio-player component hacktoberfest plyr plyr-plugin video video-player vue

Last synced: 29 days ago
JSON representation

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

Awesome Lists containing this project

README 

        
# vue-plyr

> v7.0.0 - [Changelog](https://github.com/redxtech/vue-plyr/blob/master/changelog.md)



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](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

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



## Installation

```bash

yarn add vue-plyr # or npm i vue-plyr

```



### Module

```js

// 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: {}

})

```



### SSR [(more below)](#ssr)

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](#nuxt) below.



### Browser

In the browser you can include it as you would any other package with unpkg, along with the stylesheet:



```html



  window.Vue.createApp(VuePlyr).mount('#app')



```



## 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)

    }

  }



```



## Examples

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



## 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: {}

})

```



## SSR

### Nuxt (Vue 2.x)

This should support SSR out of the box. For [nuxt](https://nuxtjs.org/), create a file called `vue-plyr.js` in your

plugins folder containing only these three statements:



```js

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:



```js

export default {

  plugins: [{ src: '~/plugins/vue-plyr', mode: 'client' }]

}

```



## Author



**vue-plyr** © [RedXTech](https://github.com/redxtech), Released under the [MIT](./LICENSE.md) License.