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" |