https://github.com/zcuric/plyrue
Vue.js plugin for Plyr.io
https://github.com/zcuric/plyrue
audio js plyr video vue
Last synced: 10 months ago
JSON representation
Vue.js plugin for Plyr.io
- Host: GitHub
- URL: https://github.com/zcuric/plyrue
- Owner: zcuric
- License: mit
- Created: 2019-03-15T11:20:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:07:45.000Z (over 3 years ago)
- Last Synced: 2025-05-26T10:26:32.802Z (about 1 year ago)
- Topics: audio, js, plyr, video, vue
- Language: JavaScript
- Homepage:
- Size: 2.67 MB
- Stars: 31
- Watchers: 2
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Plyrue
Vue.js plugin for Plyr
## About
Plyrue (/pliru/) is a Vue plugin that is actually a wrapper around popular media player, [Plyr](https://plyr.io). It provides a simple API to work with Vue applications.
## Installation
```
npm install plyrue
# or
yarn add plyrue
```
## Initialization
```js
import App from './App.vue';
import Plyrue from 'plyrue';
import Vue from 'vue';
Vue.use(Plyrue);
new Vue({
render: h => h(App),
}).$mount('#app');
```
Plyrue component can be used in without plugin initialization:
```js
import { PlyrueComponent as Plyrue } from 'plyrue';
...
export default {
...
components: { Plyrue }
}
```
## Usage
Plyrue can be used in two ways:
- with slots
- with data (for audio and video)
### With slots
```vue
```
When using slot the `video` or `audio` tag is omitted if the `type` props is set. If `type` is not set the `default` component will be used and in that case you must include the `video` or `audio` tag. Example:
```vue
```
### With data
```vue
export default {
data() {
return {
sources: [
{
src: 'https://example.com/video-576p.mp4',
type: 'video/mp4',
size: '576',
},
],
captions: [
{
label: 'Croatian',
srclang: 'hr',
src: 'https://example.com/video-HD.hr.vtt',
},
],
};
},
};
```
## Plugin options
```
Vue.use(Plyrue, pluginOptions)
```
### name
- **Type**: `string`
- **Default**: `plyrue`.
The plugin name.
## Props
### type
- **Type**: `string`
- **Default**: `default`
Type of media you want use
- `video` for HTML5 video
- `audio` for HTML5 audio
- `embed` for Youtube and Vimeo.
If type is unspecified it will default to a `default` component which only proxies the slot.
For examples and usage please check the [examples folder](https://github.com/zcuric/plyrue/tree/master/example).
### options
- **Type**: `Object`
- **Default**: `{}`
Options for Plyr player. Documentation for Plyr options can be found [here](https://github.com/sampotts/plyr#options).
### sources
- **Type**: `Array`
- **Required**: false
Array of objects. For videos:
```js
[
{
src: 'https://example.com/video.mp4',
type: 'video/mp4', // or any other valid type
size: '576' // example size
},
...
]
```
For audio:
```js
[
{
src: 'https://example.com/video.m24',
type: 'audio/mp3', // or any other valid type
},
...
]
```
### captions
- **Type**: `Array`
- **Required**: false
Array of objects. Captions for video type:
```js
[
{
label: 'Croatian',
srclang: 'hr',
src:'https://example.com/caption.hr.vtt',
},
],
...
```
## Attributes
All valid attributes for `video`, `audio` and `iframe` are passed down to the corresponding components. `Plyrue` provides defaults for `video` and `audio`.
Check the valid attributes here:
- [video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes)
- [audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes)
- [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
Example:
```vue
```
## Events
`Plyrue` component supports `plyr` events.
Events are documented [here](https://github.com/sampotts/plyr#events).
```vue
export default {
methods: {
handlePlaying(event) {}
}
};
```
## Development
```
# Running examples
npm run serve
# Running tests
npm run test
# Running build
npm run build
```
## TODO
- Rewrite in TS
- Make documentation better
- Check SSR compatibility
- Provide more examples
## Contributing
All contributions are welcome.
## Credits
`Plyrue` is inspired by [`vue-plyr`](https://github.com/redxtech/vue-plyr).
## License
MIT @ Zdravko Ćurić [(zcuric)](https://github.com/zcuric)