Video-metadata-thumbnails NPM

Convenience method(or Video object) to get metadata and thumbnails of HTML5 video Blob.

Environment Support

Microsoft Edge
Google Chrome
Safari(Not perfect)
- need to wait for the video to finish playing
- can't use all parameters
Firfox(Not perfect)
- need to wait for the video to finish playing
- can't use all parameters

Edge	Chrome	Safari	Firefox
last 2 versions	last 2 versions	last 2 versions	last 2 versions

Installation

npm install --save video-metadata-thumbnails

yarn add video-metadata-thumbnails

Usage

getMetadata method & getThumbnails method

Add video-metadata-thumbnails.iife.js to your document and get the metadata or thumbnails value of the promise returned by then:

<input type="file" onchange="onChange(this.files)" />
<script src="https://cdn.jsdelivr.net/npm/video-metadata-thumbnails/lib/video-metadata-thumbnails.iife.js"></script>
<script>
function onChange(files) {
  __video_metadata_thumbnails__.getMetadata(files[0]).then(function(metadata) {
    console.log('Metadata: ', metadata);
  })
  __video_metadata_thumbnails__.getThumbnails(files[0]).then(function(thumbnails) {
    console.log('Thumbnails: ', thumbnails);
  })
}
</script>

Alternatively, you can import(or require) video-metadata-thumbnails by getting it from npm :

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';
  
const metadata = await getMetadata(blob);
const thumbnails = await getThumbnails(blob, {
  quality: 0.6
});
console.log('Metadata: ', metadata);
console.log('Thumbnails: ', thumbnails);

Video Object

Import(or require) video-metadata-thumbnails by getting it from npm

import { Video } from 'video-metadata-thumbnails';

const video = new Video(blob);
console.log('Metadata:', await video.getMetadata());
console.log('Thumbnails:', await video.getThumbnails({
  quality: 0.6
}))