@160over90/vue-plyr-video

PlyrVideo

Features

Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.

Examples

The simplest example. Creates a player for the video in the link using all the default settings.

<PlyrVideo videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"/>

An example using an event to trigger a method when the Plyr video is ready.

<PlyrVideo
  videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
  @ready="ready"
/>
...
methods: {
  ready() {
    // Do something
  },
},

Similar to the previous example with access to the DOM event. To get access to the original DOM event, use the special $event variable.

<PlyrVideo
  videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
  @ready="ready($event)"
/>
...
methods: {
  ready(event) {
    console.log('ready', event);
  },
},

Events

All Plyr events have been implemented. For a list of events, reference the Plyr documentation.

Props

All Plyr options can be passed as a prop. For a list of options, reference the Plyr documentation. Below are all props that aren't Plyr options.

videoUrl (String, Required) The URL for a video. Options are a YouTube URL, Vimeo URL, or a self-hosted URL/path.

poster (String, Default: undefined) The URL for the poster image.

type (String, Default: undefined) For videos not hosted using Vimeo or YouTube, this is the type attribute on the video element. If applicable, this option is recommended. Example: 'video/mp4'

background (Boolean, Default: false) A group of presets to easily use a video as a background video. All controls are removed, autoplay is enabled, click to play is disabled, fullscreen functionality is completely disabled, looping is enabled, and the video is muted. Specific settings are below and cannot be overridden.

controls: [],
autoplay: true,
clickToPlay: false,
fullscreen: { enabled: false, fallback: false, iosNative: false },
loop: true,
muted: true,

Methods

Most Plyr methods have been implemented. For a list of methods, reference the Plyr documentation. There are some changes to using the fullscreen method names detailed below. Also, the callback methods have not been implemented. Instead, use the Vue event hooks to achieve the same functionality.

The method fullscreen.enter() can be used with enterFullscreen(). The method fullscreen.exit() can be used with exitFullscreen(). The method fullscreen.toggle() can be used with toggleFullscreen().

Polyfill

Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the 90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use polyfill.io which provides polyfills based on user agent. This is the method the demo uses.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

License

MIT