video-metadata-thumbnails
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.22 • Public • Published

    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

    Install

    npm i video-metadata-thumbnails

    DownloadsWeekly Downloads

    1,124

    Version

    1.0.22

    License

    MIT

    Unpacked Size

    180 kB

    Total Files

    19

    Last publish

    Collaborators

    • dengfengwang