Skip to content

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

License

Notifications You must be signed in to change notification settings

adaxiadaxi/video-metadata-thumbnails

 
 

Repository files navigation

Video Metadata & Thumbnails

Latest Version on NPM Issue Software License Contributors Anon Code Size Languages Count Languages Examle Online

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

English | 简体中文

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

Example Online

⚠️ Notice

Blob object is required in browser.

License

Software License

Copyright (c) 2020-present, Weiwei Wang

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 53.1%
  • JavaScript 46.9%