Vue Video Annotation

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

? 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

? Events