A Vue.js component for playing videos on HTML canvas

npm install --save vue-canvasvideo

// in your entrypoint
import Vue from 'vue'
import CanvasVideo from 'vue-canvasvideo'
import 'vue-canvasvideo/dist/vuecanvasvideo.min.css'

Vue.use(CanvasVideo)

  // load the video and start playing automatically
  <Canvas-video
    :src="https://example.com/some_video.mp4"
    :autoplay="true"
  ></Canvas-video>

props: {
  src: { // the video source
    type: String,
    required: true
  },
  fps: { // frames per second, the playback speed
    type: Number,
    default: () => 25
  },
  showVideo: { // switch between playback on video or canvas
    type: Boolean,
    default: () => false
  },
  autoplay: { // automatically play the video
    type: Boolean,
    default: () => false
  },
  loop: { // loop the video infinitely
    type: Boolean,
    default: () => false
  },
  playPauseOnClick: { // toggle play/pause on click of video
    type: Boolean,
    default: () => false
  },
  resetOnLast: { // reset start after complete
    type: Boolean,
    default: () => false
  },
  cover: { // should the video cover within it's container (useful for backgrounds; cannot be used with 'square' prop)
    type: Boolean,
    default: () => false
  },
  square: { // should the video be centered vertically in a square container (cannot be used with 'cover' prop)
    type: Boolean,
    default: () => false
  },
  controls: { // show video playback controls
    type: Boolean,
    default: () => false
  }
}

npm run build