vue-canvasvideo
A Vue.js component for playing videos on HTML canvas. Useful for achieving autoplay videos in iOS and Safari.
Overview
Installation
npm install --save vue-canvasvideoSetup
Bundler (Webpack, Rollup)
// in your entrypoint
import Vue from 'vue'
import CanvasVideo from 'vue-canvasvideo'
import 'vue-canvasvideo/dist/vuecanvasvideo.min.css'
Vue.use(CanvasVideo)Usage
Required Markup
// load the video and start playing automatically
<Canvas-video
:src="https://example.com/some_video.mp4"
:autoplay="true"
></Canvas-video>Practical Use Cases
vue-canvasvideo is useful for achieving autoplay video on iOS, which is especially useful for video backgrounds. As of iOS 10, autoplay video is supported so vue-canvasvideo is intended as a fallback for older iOS/Safari versions.
Although not the intended use case, vue-canvasvideo can also be used as a regular video player and optionally includes controls.
vue-canvasvideo can switch seamlessly between HTML video and canvas as needed and includes an option to "cover" the element it's placed in, similar to background-size: cover in css.
Props
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
}
}Development
Build
Bundle the js to the dist folder:
npm run buildAcknowledgements
Based on https://stanko.github.io/html-canvas-video-player/