Git Product home page Git Product logo

vue-plyr's Introduction

vue-plyr - A vue component for the plyr video & audio player

github_actions npm last version Dependabot status

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 skjnldsv.github.io/vue-plyr.

Installation

NPM

npm install @skjnldsv/vue-plyr

Yarn

yarn add @skjnldsv/vue-plyr

Examples

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

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>

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: {}
})

Author & Contributors

vue-plyr's People

Contributors

achendrick avatar alexey-pd avatar alexstewartja avatar dappiu avatar dependabot-preview[bot] avatar dependabot[bot] avatar dib258 avatar irazasyed avatar jwjcmw avatar mkody avatar mvaneijgen avatar nathakits avatar redxtech avatar set-killer avatar skjnldsv avatar vangog avatar zcuric avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.