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 --save

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" :crossorigin="true" />
<plyr-audio :tracks="this.tracks" />
<plyr-youtube :id="this.youtubeID" />
<plyr-vimeo :id="this.vimeoID" />

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'
        }
    }
}