vue-plyr
A set of Vue components for the plyr video & audio player.
This is useful for when you want a nice video player in your Vue app.
Installation
yarn add vue-plyr
Browser
Include the script file, then use it in the app; e.g.:
<script type="text/javascript" src="https://unpkg.com/vue@latest"></script>
<script type="text/javascript" src="https://unpkg.com/vue-plyr@latest"></script>
<script type="text/javascript" src="https://unpkg.com/vue-plyr@latest/dist/vue-plyr.css"></script>
Vue.use(VuePlyr)
Module
import VuePlyr from 'vue-plyr';
Vue.use(VuePlyr)
Usage
Once installed, it can be used in a template as simply as:
<plyr-video poster="path/to/poster.png" :videos="this.videos" :subtitles="this.subtitles" />
<plyr-audio :tracks="this.tracks" />
<plyr-youtube :id="this.youtubeID" />
<plyr-vimeo :id="this.vimeoID" />
export default {
data () {
return {
videos: [
{ src: 'path/to/video.mp4', format: 'mp4' },
{ src: 'path/to/video.webm', format: 'webm' }
]
subtitles: {
label: "English Captions",
src: "path/to/captions.vtt",
srclang: "en"
},
tracks: [
{ src: 'path/to/audio.mp3', format: 'mp3' },
{ src: 'path/to/audio.ogg', format: 'ogg' }
],
youtubeID: 'bTqVqk7FSmY'
vimeoID: '147865858'
}
}
}