Video Metadata & Thumbnails
通过HTML5的Blob获取视频元数据和帧缩略图。
[English](https://github.com/wangweiwei/video-metadata-thumbnails/blob/master/README.md) | 简体中文
## 浏览器支持
- 微软Edge
- 谷歌Chrome
- Safari(非完美支持)
- 需要等待视频播放完毕
- 参数非完美支持
- Firfox(非完美支持)
- 需要等待视频播放完毕
- 参数非完美支持
| [
](http://godban.github.io/browsers-support-badges/)
Edge | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Firefox |
| --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## **安装**
```shell
npm install --save video-metadata-thumbnails
```
or
```
yarn add video-metadata-thumbnails
```
## **使用方法**
### 通过getMetadata和getThumbnails方法
将 `video-metadata-thumbnails.iife.js`添加到你的`script`标签中，然后通过`Promise`的 `then`获取 元数据或者视频缩略图：
```html
```
当然你可以通过`import`（或者`reqire`)`video-metadata-thumbnails` 来使用：
```javascript
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`获取元数据和帧缩略图：
``` javascript
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
* 描述: 获取帧图片的终止帧
## **例子**
[](https://www.ellow.cn/examples/video-metadata-thumbnails/index.html)
## **⚠️ 注意**
需要浏览器支持`Blob`对象
## **许可**
[](https://github.com/wangweiwei/video-metadata-thumbnails/blob/master/LICENSE)
Copyright (c) 2020-present, Weiwei Wang