Package Exports
- vue-plyr
- vue-plyr/dist/vue-plyr.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-plyr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 # or npm i vue-plyr --saveBrowser
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';
import 'vue-plyr/dist/vue-plyr.css';
Vue.use(VuePlyr)Or
import { PlyrVideo } from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
export default {
components: {
PlyrVideo
}
}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" :crossorigin="true" />
<plyr-audio :tracks="this.tracks" />
<plyr-youtube :id="this.youtubeID" />
<plyr-vimeo :id="this.vimeoID" />
<!-- You can also just wrap a video, audio, youtube api, or vimeo api block with the <plyr> component -->
<plyr>
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
</plyr>
<plyr>
<audio>
<source src="audio.mp3" type="audio/mp3" />
<source src="audio.ogg" type="audio/ogg" />
</audio>
</plyr>
<plyr>
<div data-type="youtube" data-video-id="bTqVqk7FSmY" />
</plyr>
<plyr>
<div data-type="vimeo" data-video-id="147865858" />
</plyr>
export default {
data () {
return {
// Array of objects with path to video files and format.
videos: [
{ src: 'path/to/video.mp4', format: 'mp4' },
{ src: 'path/to/video.webm', format: 'webm' }
],
// Object with subtitles label, source, and language.
subtitles: {
label: "English Captions",
src: "path/to/captions.vtt",
srclang: "en"
},
// Array of objects with path to audio files and format.
tracks: [
{ src: 'path/to/audio.mp3', format: 'mp3' },
{ src: 'path/to/audio.ogg', format: 'ogg' }
],
// YouTube video ID or video URL.
// https://www.youtube.com/watch?v=bTqVqk7FSmY & https://youtu.be/bTqVqk7FSmY would have the same effect.
youtubeID: 'bTqVqk7FSmY',
// Vimeo video ID or video URL.
// https://vimeo.com/147865858 would have the same effect.
vimeoID: '147865858'
}
}
}In each of the elements you can pass an options prop which is an object that will be passed to the plyr.setup()
function. Info on that here.