@derplicity/vue-video v1.0.0

vue-video

A video component for Vue applications

Installation

Using Yarn:

yarn add @derplicity/vue-video

Using NPM:

npm install --save @derplicity/vue-video

Basic Usage

<template>
  <VueVideo :sources="sources" />
</template>

<script>
  import VueVideo from '@derplicity/vue-video'

  export default {
    components: {
      VueVideo,
    },

    data() {
      return {
        sources: [
          { src: 'path/to/video.mp4', type: 'video/mp4' },
          { src: 'path/to/video.webm', type: 'video/webm' },
        ],
      }
    },

    /* ... */
  }
</script>

Props

• sources
  • Required: true
  • Type: Array
  • Format: [ { src: String, type: String } ]
• preload
  • Type: String
  • Values: "none" | "metadata" | "auto"
  • Default: "metadata"
• poster
  • Type: String
  • Default: First frame of video (placeholder for fallback)
• All <video> attributes and their values
  • \ attributes

CSS Override

Default CSS styles can be overridden by using id="vue-video"

For example, to change the color of the button icons:

<!-- Make sure styles are not scoped -->
<style>
  #vue-video .button-icon {
    color: red;
  }
</style>