Skip to content

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

License

Notifications You must be signed in to change notification settings

wangweiwei/video-metadata-thumbnails

Repository files navigation

logo

Video Metadata & Thumbnails

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

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
IE / Edge
Edge
Chrome
Chrome
Safari
Safari
Firefox
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

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 Blob.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published