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-canvasvideo
Setup
Bundler (Webpack, Rollup)
import Vue from 'vue'
import CanvasVideo from 'vue-canvasvideo'
import 'vue-canvasvideo/dist/vuecanvasvideo.min.css'
Vue.use(CanvasVideo)
Usage
Required Markup
<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: {
type: String,
required: true
},
fps: {
type: Number,
default: () => 25
},
showVideo: {
type: Boolean,
default: () => false
},
autoplay: {
type: Boolean,
default: () => false
},
loop: {
type: Boolean,
default: () => false
},
playPauseOnClick: {
type: Boolean,
default: () => false
},
resetOnLast: {
type: Boolean,
default: () => false
},
cover: {
type: Boolean,
default: () => false
},
square: {
type: Boolean,
default: () => false
},
controls: {
type: Boolean,
default: () => false
}
}
Development
Build
Bundle the js to the dist
folder:
npm run build
Acknowledgements
Based on https://stanko.github.io/html-canvas-video-player/
License
MIT