Canvas Based HTML5 Video Player For Vue 3

A custom and keyboard-accessible HTML5 video player component based on canvas.

How to use it:

1. Import and register the canvas video player.

import Vue3CanvasVideoPlayer from 'vue3-canvas-video-player';
import 'vue3-canvas-video-player/dist/style.css';

export default {
  components: {
    Vue3CanvasVideoPlayer,
  },
};

2. Add the Vue3CanvasVideoPlayer component to the template and define the path to the HTML5 video.

<template>
  <div>
    <Vue3CanvasVideoPlayer
      :src="'1.mp4'"
    />
  </div>
</template>

3. Available props to customize the canvas video player.

src: { type: String, default: '', required: true },
muted: { type: Boolean, default: false },
autoplay: { type: Boolean, default: false },
range: { type: Array, default() { return [0, 0]; } }, 
fps: { type: Number, default: 0 },
bbox: { type: Object, default() { return { data: {}, borderSize: 1, borderColor: 'rgba(255, 0, 0, 0.5)', fillColor: 'rgba(0, 0, 255, 0.5)' }; } },
type: { type: String, default: 'overlay' },
messageTime: { type: Number, default: 1000 },
preview: { type: Boolean, default: false },
darkMode: { type: Boolean, default: true },

Preview:

Changelog:

02/08/2023

• v1.2.3

Download Details:

Author: GronkOut

Live Demo: https://stackblitz.com/edit/vue3-canvas-video-player?file=src/App.vue

Download Link: https://github.com/GronkOut/vue3-canvas-video-player/archive/refs/heads/main.zip

Official Website: https://github.com/GronkOut/vue3-canvas-video-player

Install & Download: