• Stars
    star
    764
  • Rank 59,449 (Top 2 %)
  • Language
    JavaScript
  • License
    Other
  • Created almost 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr

v7.0.0 - Changelog

A vue component for the plyr video & audio player.

This is useful for when you want a nice video player in your Vue app.

It uses plyr by sampotts for the players.

Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.

Demo

A demo of the components (equivalent to the html example include here) can be found at redxtech.github.io/vue-plyr.

Installation

yarn add vue-plyr # or npm i vue-plyr

Module

// In your main vue file - the one where you create the initial vue instance.
import Vue from 'vue'
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

// Vue 3.x
// The second argument is optional and sets the default config values for every player.
createApp(App)
  .use(VuePlyr, {
    plyr: {}
  })
  .mount('#app')

// Vue 2.x
// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
  plyr: {}
})

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, along with the stylesheet:

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/vue-plyr"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css" />

<!-- You will also need to install the component during app creation -->
<script>
  window.Vue.createApp(VuePlyr).mount('#app')
</script>

Usage

Once installed, it can be used in a template as simply as:

<!-- video element -->
<vue-plyr :options="options">
  <video
    controls
    crossorigin
    playsinline
    data-poster="poster.jpg"
  >
    <source
      size="720"
      src="/path/to/video-720p.mp4"
      type="video/mp4"
    />
    <source
      size="1080"
      src="/path/to/video-1080p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="captions"
      label="English captions"
      src="/path/to/english.vtt"
      srclang="en"
    />
  </video>
</vue-plyr>

<!-- audio element -->
<vue-plyr>
  <audio controls crossorigin playsinline>
    <source
        src="/path/to/audio.mp3"
        type="audio/mp3"
    />
    <source
        src="/path/to/audio.ogg"
        type="audio/ogg"
    />
  </audio>
</vue-plyr>

<!-- youtube iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
  <div class="plyr__video-embed">
    <iframe
      src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
  </div>
</vue-plyr>

<!-- youtube div element -->
<vue-plyr>
  <div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</vue-plyr>

<!-- vimeo iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
  <div class="plyr__video-embed">
    <iframe
      src="https://player.vimeo.com/video/143418951?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
  </div>
</vue-plyr>

<!-- vimeo div element -->
<vue-plyr>
  <div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
</vue-plyr>

Player Instance

To access the player instance, you can use the player property from the refs attribute.

<template>
  <vue-plyr ref="plyr">...</vue-plyr>
</template>

<script>
  export default {
    name: 'Component',
    mounted () {
      console.log(this.$refs.plyr.player)
    }
  }
</script>

Examples

Examples of how to use this app can be found here.

Events

If you want to capture events from the plyr instance, you can do so by accessing the player instance through the ref attribute and using that object for events, as you would with a vanilla plyr instance.

Valid events are here.

<template>
  <vue-plyr ref="plyr">...</vue-plyr>
</template>
<script>
  export default {
    name: 'Component',
    mounted () {
      this.$refs.plyr.player.on('event', () => console.log('event fired'))
    }
</script>

Options

For custom options you can pass an options prop which is an object that will be passed to the new Plyr() creation. Available options here. I have added a new option (hideYouTubeDOMError) that hides the error that is always logged when destroying a YouTube player. It defaults to true, and you can disable it and see the error by setting it to false.

You can also specify the default options when registering the plugin (these will be ignored if you specify a player-specific options object via props):

createApp(App).use(VuePlyr, {
  plyr: {}
})

SSR

Nuxt (Vue 2.x)

This should support SSR out of the box. For nuxt, create a file called vue-plyr.js in your plugins folder containing only these three statements:

import Vue from 'vue'
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'
import 'vue-plyr/dist/vue-plyr.css'

// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
  plyr: {}
})

Then, in your nuxt.config.js file add { src: '~/plugins/vue-plyr', mode: 'client' } to the plugins array. The vue-plyr element should be globally registered now.

The nuxt.config.js file should at minimum include this:

export default {
  plugins: [{ src: '~/plugins/vue-plyr', mode: 'client' }]
}

Author

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

More Repositories

1

dotfiles

Where I store my dotfiles. Manged with YADM. `sh <(curl -Ls dot.gabedunn.dev)`
Nix
14
star
2

zsh-asdf-direnv

A zsh plugin that loads asdf & asdf-direnv.
Shell
11
star
3

devmod

A discord bot for moderating servers.
TypeScript
6
star
4

zsh-kitty

A zsh plugin that provides completions for the kitty terminal emulator.
Shell
5
star
5

zsh-containers

ZSH plugin to handle podman and docker aliases
Shell
4
star
6

zsh-not-vim

A zsh plugin to shame the user for forgetting they weren't in vim.
Shell
4
star
7

short.af

simple, self-hosted url shortener
TypeScript
4
star
8

nixfiles

Personal nixos and home-manager configurations.
Nix
4
star
9

zsh-show-path

A zsh plugin to show $PATH line by line.
Shell
3
star
10

hudstart

a stream overlay for game tournaments using start.gg
Vue
3
star
11

pingbot-old

A bot for the sole purpose of doing nothing useful.
JavaScript
2
star
12

bankerbot

simple economy and gambling bot
TypeScript
2
star
13

sharing.nvim

a neovim plugin to quickly toggle features that make it easier for an observer to understand what you are doing.
Lua
2
star
14

when

A website that tells you when tv shows are coming out - to the second.
Vue
2
star
15

obsidiclip

An obsidian web clipper that actually works!
Vue
1
star
16

tu

yipeeeeeeeeeeeeeeee
Lua
1
star
17

zshred

A simple theme for zsh
Shell
1
star
18

zsh-aur-install

A zsh plugin that provides a function to install a package from the AUR.
Shell
1
star
19

nix-reaver.nvim

Auto populate rev attributes for fetchFromGitHub
Lua
1
star
20

logo-generator

A website to generate an SVG of my logo.
Vue
1
star
21

zsh-fzf-utils

A zsh plugin that provides functions which use fzf to do cool things.
Shell
1
star
22

eslint-config

My eslint configuration.
JavaScript
1
star
23

reginald

A website that lets you know if Reginald is current visiting
Vue
1
star
24

fish-unix-simple

simple plugin that provide a function that shows a graphic about unix
Shell
1
star
25

redxtech

About me!
1
star
26

tacklebox

box o' tools for working with containers in fish
Shell
1
star
27

fyshtemd

fish plugin for systemctl aliases
Shell
1
star
28

indigo

TypeScript
1
star
29

tweeter

Bot to tweet a bunch of times.
JavaScript
1
star
30

nixfiles-old

My NixOS config files.
Nix
1
star
31

blog

my blog
Vue
1
star
32

pingbot

the embotiment of a shitpost
TypeScript
1
star
33

switchup

switchup is a command line tool for downloading and preparing SD cards for modded switches
Shell
1
star