vue-plyr

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

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.

Author

plyr-vue © RedXTech, Released under the MIT License.