v6.0.1 - Changelog
A vue component for the plyr video & audio player.
Plyr.io This modern video player implements subtitles in both SRT and WebVTT file formats. Playr This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats. Flowplayer HTML5 player supporting WebVTT. Jwplayer This video player is very extensive and does a lot more than simply support video captions. A comparison of the top Vue Audio Player Libraries: vue-aplayer, vue-plyr-simple, vue-audio-recorder, vue-audio-visual, vue-audio, vue-music, and more. I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the source, so essentially you can have a CSS-styled YouTube video. Specify the id prefix for the icons used in the default controls (e.g. Download graphicconverter 10 5 5. 'plyr-play' would be 'plyr'). This is to prevent clashes if you're using your own SVG sprite but with.
This is useful for when you want a nice video player in your Vue app.
It uses plyr by sampotts v3 for the players.
Supported player types: HTML5 video, HTML5 audio, YouTube (div & progressiveenhancement), and Vimeo (div & progressive enhancement).
Installation
Module
SSR (more below)
For SSR you can import the SSR optimized module, found at ./dist/vue-plyr.ssr.js
.There is a more in depth description on how to use it with nuxt below.
Browser
In the browser you can include it as you would any other package: with unpkg.
Usage
Once installed, it can be used in a template as simply as:
Player Instance
To access the player instance, you can use the refs
attribute.
Events
Photogrids for instagram view images & videos 1 5 6. If you want to capture events from the plyr instance, there are a fewoptions:
The preferred method is accessing the player instance through the ref
attribute and using that object for events, as you would with a vanillaplyr instance.
Valid events are here.
Options
For custom options you can pass an options
prop which is an objectthat will be passed to the new Plyr()
creation. Available optionshere. I added an additionaloption (hideYouTubeDOMError
) that hides the error that is alwayslogged when destroying a YouTube player. It defaults to true
, and youcan disable it and see the error by setting it to false.
SSR
Nuxt
This should support SSR out of the box. For nuxt, create a file called vue-plyr.js
in your plugins folder containingonly these three statements:
Then, in your nuxt.config.js
file add '~/plugins/vue-plyr'
to the plugins array. The vue-plyr
element should be globally registered now.
You will also want to add plyr/dist/plyr.css
to your css array in the same file.
The nuxt.config.js
file should at minimum include this:
Alternatively, you can use the provided plugin file (contents are exactly as above) like this:
Vue Plyr Wireless
Author
Vue Plyr Pro
vue-plyr © RedXTech, Released under the MIT License.