Video Metadata & Thumbnails

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

English | 简体中文

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

or

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
}))

Thumbnails' Options

• quality
  • type: number
  • default: 0.7
  • description: video thumbnails' quality
• interval
  • type: number
  • default: 1
  • description: time interval
• scale
  • type: number
  • default: 0.7
  • description: video thumbnails' scale
• start
  • type: number
  • default: 0
  • description: start frame
• end
  • type: number
  • default: 0
  • description: the end of frame

Example

⚠️ Notice

​ Blob object is required in browser.

License

Copyright (c) 2020-present, Weiwei Wang