README.zh.md

Video Metadata & Thumbnails

通过HTML5的Blob获取视频元数据和帧缩略图。

English | 简体中文

浏览器支持

• 微软Edge
• 谷歌Chrome
• Safari(非完美支持)
  • 需要等待视频播放完毕
  • 参数非完美支持
• Firfox(非完美支持)
  • 需要等待视频播放完毕
  • 参数非完美支持

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

安装

npm install --save video-metadata-thumbnails

or

yarn add video-metadata-thumbnails

使用方法

通过getMetadata和getThumbnails方法

​ 将 video-metadata-thumbnails.iife.js添加到你的script标签中，然后通过Promise的 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>

​ 当然你可以通过import（或者reqire)video-metadata-thumbnails 来使用：

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对象

​ 通过导入Video来自行初始化视频对象，然后通过getMetadata和getThumbnails获取元数据和帧缩略图：

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

缩略图选项

• quality
  • 类型: number
  • 默认值: 0.7
  • 描述: 视频缩略图的质量
• interval
  • 类型: number
  • 默认值: 1
  • 描述: 获取帧图片的时间间隔
• scale
  • 类型: number
  • 默认值: 0.7
  • 描述: 帧图片的缩放值
• start
  • 类型: number
  • 默认值: 0
  • 描述: 获取帧图片的起始帧
• end
  • 类型: number
  • 默认值: 0
  • 描述: 获取帧图片的终止帧

例子

⚠️ 注意

​ 需要浏览器支持Blob对象

许可

Copyright (c) 2020-present, Weiwei Wang