A component that creates snapshots from video. Only video src is required.
A lot of props for customize, slot for custom snapshot rendering.
Can create multiple snapshots.
I hope it will be helpful for you ;)
Demo: https://joost-dm.github.io/vue-video-thumbnail/
npm install vue-video-thumbnail
import VueVideoThumbnail from 'vue-video-thumbnail'
...
components: { VueVideoThumbnail },
...
<VueVideoThumbnail
video-src="your source"
show-play-button
:snapshot-at-duration-percent="70"
:width="500"
:height="300"
:chunks-quantity="10"
@snapshotCreated=" ***place for handler of single snapshot*** "
@snapshotsArrayCreated=" ***place for handler of array of snapshots*** "
>
<template #snapshot="{snapshot}">
<img
v-if="snapshot"
:src="snapshot"
alt="snapshot"
>
</template>
</VueVideoThumbnail>
<template #snapshot="{snapshot}">
<img
v-if="snapshot"
:src="snapshot"
alt="snapshot"
>
</template>
Returns a single snapshot when its ready
Returns an array of snapshots when they are ready.
Don't forget to send percentagesArray or chunksQuantity props.
type: String
required
type: Boolean
default: true
Number
default: 250
type: Number
default: 250
type: Number
default: 50
type: Number
default: 2
type: String
default: 'contain'
type: String
default: '#000000'
A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
type: Number
default: 0.8
snapshot format. Have the same restrictions as HTMLCanvasElement.toDataURL() method https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
type: String
default: 'image/jpeg'
type: Boolean,
default: false,
type: Array of numbers
default: null
example: [10, 25, 95]
type: Number
default: null
if set to true, the component destroys video and canvas elements to clear the DOM after creating first snapshot or snapshotsArray, if its required, so the creation of new snapshots become impossible after that.
type: Boolean
default: false
type: Boolean
default: false