Vue Video Annotation

Vue3 component that allows adding annotations to videos by free drawing or adding shapes like circles, squares, and arrows.

• 💻 Demo

📦 Installation

NPM

npm install --save vue-video-annotation

🚀 Usage in Vue3 Components

<template>
  <VideoAnnotationPlayer :annotations="annotations"
    @annotation-add="onAnnotationAdd">
    <template v-slot:videoContent>
      <source type="video/mp4" src="https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp4?raw=1">

      <source type="video/webm" src="https://www.dropbox.com/s/bmki1sn54o4m3xt/MicrosoftInclusiveHiring.webm?raw=1">

      <track kind="subtitles" label="中文字幕" srclang="zh" src="https://www.dropbox.com/s/ipnbojfe0jtz5n7/MicrosoftInclusiveHiringCHT.vtt?raw=1" default>
    </template>
  </VideoAnnotationPlayer>
</template>
<script>
  import { VideoAnnotationPlayer, Annotation } from 'vue-video-annotation'

  export default defineComponent({
    components: {
        VideoAnnotationPlayer
    },
    setup() {
        let annotations = ref<Annotation[]>([]);

        const onAnnotationAdd = (annotation: Annotation) => {
            annotations.value.push(annotation);
        }

        return {
            annotations
        }
    }
  })
</script>

import { createApp } from 'vue'
import App from './App.vue'

//Import the style
import 'vue-video-annotation/dist/style.css'

const app = createApp(App);
app.mount('#app');

🔧 Properties

Property	Type	Description	Default
src	String	Video url to be used
poster	String	Image url to be used before video start
autoPlay	Boolean	Boolean to enable autoplay	false
showFullscreenButton	Boolean	Show/Hide fullscreen button	true
showLoopButton	Boolean	Show/Hide loop button	true
constrolsTimeout	Number	Value to control the timout of the controls	3000 seconds
strokeWidth	Number	Stroke width for annotations	5
showAnnotationControls	Boolean	Show/Hide annotation controls	true
annotations	Annotation[]	Array of annoataions to be used to add/import	[] required
colors	String[]	Array of colors to be used by the player	['#000000', '#FFFFFF', '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B']

🔧 Events

Event	Description	Example
annotationAdd	Fired after an annotation be drawn	@annotation-add="doSomething"
annotationSelected	Fired after an annotation be selected	@annotation-selected="doSomething"