Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xwellingtonx/vue-video-annotation
🔥 Vue3 component that allows adding annotations to your videos by free drawing or adding shapes like circles, squares, and arrows.
https://github.com/xwellingtonx/vue-video-annotation
Last synced: 3 months ago
JSON representation
🔥 Vue3 component that allows adding annotations to your videos by free drawing or adding shapes like circles, squares, and arrows.
- Host: GitHub
- URL: https://github.com/xwellingtonx/vue-video-annotation
- Owner: xwellingtonx
- License: mit
- Created: 2022-05-23T20:41:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-13T09:34:15.000Z (about 2 years ago)
- Last Synced: 2024-07-16T15:09:41.785Z (4 months ago)
- Language: Vue
- Homepage:
- Size: 413 KB
- Stars: 12
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue-3 - vue-video-annotation - Vue3 component that allows adding annotations to videos by free drawing or adding shapes like circles, squares, and arrows. (Packages)
README
# Vue Video Annotation
Vue3 component that allows adding annotations to videos by free drawing or adding shapes like circles, squares, and arrows.
- 💻 [Demo](https://xwellingtonx.github.io/vue-video-annotation/)
## 📦 Installation
### NPM
`npm install --save vue-video-annotation`
# 🚀 Usage in Vue3 Components
```vue
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
}
}
})
```
```ts
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"` |