Simple and rich customizable vue js library for parsing and rendereing video snapshots, Only video src is required.

Overview

vue-video-thumbnail

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/

Project setup

npm install vue-video-thumbnail

Usage

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>

Slots

#snapshot - slot for custom snapshot rendering
    <template #snapshot="{snapshot}"> 
        <img
          v-if="snapshot"
          :src="snapshot"
          alt="snapshot"
        >
    </template>

Events

@snapshotCreated
Returns a single snapshot when its ready
@snapshotsArrayCreated
Returns an array of snapshots when they are ready.
Don't forget to send percentagesArray or chunksQuantity props.

Props

videoSrc:
video source
type: String
required
renderThumbnail:
if true component renders thumbnail
type: Boolean
default: true
width:
width of snapshot in px
Number
default: 250
height:
height of snapshot in px
type: Number
default: 250
snapshotAtDurationPercent:
create a snapshot at percent of the video duration.
type: Number
default: 50
snapshotAtTime:
create a snapshot at fixed time, have a less priority than snapshotAtDurationPercent prop.
type: Number
default: 2
snapshotScaleType:
scale type ov snapshot. Avialable values are: 'contain' and 'cover'
type: String
default: 'contain'
backgroundFillColor:
background snapshot color at 'contain' scale-type
type: String
default: '#000000'
snapshotQuality:
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
snapshotFormat:
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'
cors:
if false add the 'crossOrigin': 'Anonymous' attribute to video el.
type: Boolean,
default: false,
percentagesArray:
you can send an array with percentages, to recive snapshots at these percentages timestamps.
type: Array of numbers
default: null
example: [10, 25, 95]
chunksQuantity:
number of snapshots, that will be created, evenly distributing through the video duration.
type: Number
default: null
once:
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
showPlayButton:
if set to true, shows the "play" button at the snapshot center.
type: Boolean
default: false
A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player!

vue3-player-video A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player! If you have a pro

Enzo Esteves ⚡ 26 Sep 22, 2021
A vue hls video player plugin using video.js 7

vue-videojs7 A vue video.js7 plugin, so you can play hls video(m3u8 format) within html5 easily

Walter Hu 69 Jan 5, 2022
Search, listen to YouTube videos (Audio Only), No YouTube Api

Trooveo is a project which can let you search, listen to youtube videos. No YouTube Api. Player Channel Playlist History Search This is the front-end

Joe Kaikaty 8 Dec 25, 2021
A simple customizable web music player powered by vue & HTMLAudioElement

xns-audio-player A persistent audio player powered by vue and some visuals from tailwindcss, v-tooltip, v-progress, vue-ionicons & xns-seek-bar Demo A

James Sinkala 50 Dec 17, 2021
Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

vue-playlist Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player This is

misha. 26 Oct 8, 2021
Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Seerat Awan 22 Jan 19, 2022
A Vue.js based video player with good look and custom user config

Awesome-Video-Player A Vue.js based video player with good look and custom user config ✅ good-looking & support custom config ✅ Vue 2 & Vue 3 Support

Ziwen Mei 102 Dec 20, 2021
Open-source Voice & Video Calling and Text Chat App for Vue (JavaScript/Web)

Open-source Voice & Video Calling and Text Chat App for Vue (JavaScript/Web)

CometChat Pro 16 Jan 14, 2022
📹 A Vue 2.x video player component based on DPlayer

Vue-DPlayer A Vue 2.x video player component based on DPlayer. Live Demo Install npm install vue-dplayer -S Usage CDN: https://unpkg.com/[email protected]

MoePlayer 589 Jan 13, 2022
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr v7.0.0 - Changelog A vue component for the plyr video & audio player. This is useful for when you want a nice video player in your Vue app. I

Gabe Dunn 630 Jan 19, 2022
🍟 A Lightweight Video Player For Vue.js.

vue-core-video-player A Lightweight Video Player For Vue.js. Get Started Npm $ npm install vue-core-video-player --save Yarn $ yarn add vue-core-video

core-player 284 Jan 13, 2022
A hml5 video player vue component

vue-player author - Artur Sena license - MIT Intro This is a html5 video component made in VueJS with to quickly add videos with placeholders and intr

Artur Sena 22 Jan 9, 2022
Video Background component for Vue.js

Video Background Install via NPM Available through npm as vue-videobg. npm install --save vue-videobg Usage import VideoBg from 'vue-videobg' Vue.co

Pantelis Peslis 245 Jan 19, 2022
Subscription-based Video sharing platform for content creators. Python + Vue

A new era of subscription-based Video sharing for content creators. Upload videos and share them with people subscribed to you. (Note: Payment is a future prospect, Subscribing is free as of now).

Neelansh Mathur 7 Oct 29, 2021
Conversor de moedas com Vue JS . Projeto desenvolvido acompanhando vídeo do canal Programador BR.

conversor Conversor de moedas com Vue JS . Projeto desenvolvido acompanhando vídeo do canal Programador BR. LINK: https://www.youtube.com/watch?v=tIEa

Leandro Cesario Torres 1 Nov 23, 2021
A Vue2 plugin to make video play easier

v-playback A Vue2 plugin to make video play easier Examples、Documentation and Changelog Explorer on English site 国内站点 Installation npm i -S v-playback

Terry Zeng 19 Nov 17, 2020
Vega is a open source web based video editor.

Vega is a open source web based video editor. This is an experimental project.

toshusai 38 Jan 19, 2022
Youtube video playback controller

y2pilot.com Smart YouTube playlist manager app. Live app I decided to share this as open source even though it's far from a solid and clean codebase.

Luka Vidaković 2 Oct 24, 2021
MegSpot is an efficient, professional, cross-platform image & video comparison application.

MegSpot is an efficient, professional, cross-platform image & video comparison application.

旷视天元 MegEngine 165 Jan 11, 2022