A Vue.js component for playing videos on HTML canvas. Useful for achieving autoplay videos in iOS and Safari.
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>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: {
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
}
}Bundle the js to the dist folder:
npm run build