plyrue

Plyrue

Vue.js plugin for Plyr

About

Plyrue (/pliru/) is a Vue plugin that is actually a wrapper around popular media player, Plyr. It provides a simple API to work with Vue applications.

Installation

npm install plyrue
# or
yarn add plyrue

Initialization

import App from './App.vue';
import Plyrue from 'plyrue';
import Vue from 'vue';

Vue.use(Plyrue);

new Vue({
  render: h => h(App),
}).$mount('#app');

Plyrue component can be used in without plugin initialization:

import { PlyrueComponent as Plyrue } from 'plyrue';
...
export default { 
  ...
  components: { Plyrue }
}

Usage

Plyrue can be used in two ways:

• with slots
• with data (for audio and video)

With slots

<plyrue
  type="video"
  poster="https://example.com/video-HD.jpg"
  src="https://example.com/video-576p.mp4"
  :options="options"
  crossorigin
>
  <source
    src="https://example.com/video-576p.mp4"
    type="video/mp4"
    size="576"
  >
  <track
    kind="captions"
    label="English"
    srclang="en"
    src="https://example.com/video-HD.en.vtt"
    default
  >
</plyrue>

When using slot the video or audio tag is omitted if the type props is set. If type is not set the default component will be used and in that case you must include the video or audio tag. Example:

<plyrue>
  <video
    controls
    src="https://example.com/video-576p.mp4"
  >
    <source
      src="https://example.com/video-1080p.mp4"
      type="video/mp4"
      size="1080"
    >
    <track
      kind="captions"
      label="English"
      srclang="en"
      src="https://example.com/video-HD.en.vtt"
      default
    >
    <a
      href="https://example.com/video-576p.mp4"
      download
    >Download</a>
  </video>
</plyrue>

With data

<template>
  <plyrue
    poster="https://example.com/video-HD.jpg"
    src="https://example.com/video-576p.mp4"
    type="video"
    ref="plyrue"
    :sources="sources"
    :captions="captions"
  />
</template>

<script>
export default {
  data() {
    return {
      sources: [
        {
          src: 'https://example.com/video-576p.mp4',
          type: 'video/mp4',
          size: '576',
        },
      ],
      captions: [
        {
          label: 'Croatian',
          srclang: 'hr',
          src: 'https://example.com/video-HD.hr.vtt',
        },
      ],
    };
  },
};
</script>

Plugin options

Vue.use(Plyrue, pluginOptions)

name

• Type: string
• Default: plyrue.

The plugin name.

Props

type

• Type: string
• Default: default

Type of media you want use

• video for HTML5 video
• audio for HTML5 audio
• embed for Youtube and Vimeo.

If type is unspecified it will default to a default component which only proxies the slot.

For examples and usage please check the examples folder.

options

• Type: Object
• Default: {}

Options for Plyr player. Documentation for Plyr options can be found here.

sources

• Type: Array
• Required: false

Array of objects. For videos:

[
  {
    src: 'https://example.com/video.mp4',
    type: 'video/mp4', // or any other valid type
    size: '576' // example size
  },
  ...
]

For audio:

 [
  {
    src: 'https://example.com/video.m24',
    type: 'audio/mp3', // or any other valid type
  },
  ...
]

captions

• Type: Array
• Required: false

Array of objects. Captions for video type:

[
  {
    label: 'Croatian',
    srclang: 'hr',
    src:'https://example.com/caption.hr.vtt',
  },
],
...

Attributes

All valid attributes for video, audio and iframe are passed down to the corresponding components. Plyrue provides defaults for video and audio.

Check the valid attributes here:

• video
• audio
• iframe

Example:

<plyrue type="audio" :sources="audio" autoplay loop />

Events

Plyrue component supports plyr events. Events are documented here.

<template>
  <plyrue @playing="handlePlaying" ... />
</template>

<script>
export default {
  methods: { 
    handlePlaying(event) {}
  }
};
</script>

Development

# Running examples
npm run serve

# Running tests
npm run test

# Running build
npm run build

TODO

• Rewrite in TS
• Make documentation better
• Check SSR compatibility
• Provide more examples

Contributing

All contributions are welcome.

Credits

Plyrue is inspired by vue-plyr.

License

MIT @ Zdravko Ćurić (zcuric)