mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-14 08:26:16 -08:00
123 lines
2.3 KiB
Markdown
123 lines
2.3 KiB
Markdown
# artplayer-tool-thumbnail
|
|
|
|
thumbnail tool for ArtPlayer
|
|
|
|
## Demo
|
|
|
|
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) from Github Pages
|
|
|
|
## Install
|
|
|
|
Install with `npm`
|
|
|
|
```bash
|
|
$ npm install artplayer-tool-thumbnail
|
|
```
|
|
|
|
Or install with `yarn`
|
|
|
|
```bash
|
|
$ yarn add artplayer-tool-thumbnail
|
|
```
|
|
|
|
```js
|
|
import ArtplayerToolThumbnail from 'artplayer-tool-thumbnail';
|
|
```
|
|
|
|
Or umd builds are also available
|
|
|
|
```html
|
|
<script src="artplayer-tool-thumbnail"></script>
|
|
```
|
|
|
|
Will expose the global variable to `window.ArtplayerToolThumbnail`.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<input class="file" type="file" />
|
|
```
|
|
|
|
```js
|
|
var thumbnail = new ArtplayerToolThumbnail({
|
|
fileInput: document.querySelector('.file'),
|
|
delay: 300,
|
|
number: 60,
|
|
width: 160,
|
|
height: 90,
|
|
column: 10,
|
|
});
|
|
|
|
// Dynamic configuration parameters, return the instance itself
|
|
thumbnail.setup({
|
|
delay: 500,
|
|
number: 100,
|
|
width: 200,
|
|
height: 10,
|
|
column: 10,
|
|
});
|
|
|
|
// Start creating a preview, return the promise when the task completed
|
|
thumbnail.start();
|
|
|
|
// Start download preview, return the instance itself
|
|
thumbnail.download();
|
|
|
|
// Events
|
|
thumbnail.on('file', file => {
|
|
console.log('The video file has been read successfully');
|
|
});
|
|
|
|
thumbnail.on('video', video => {
|
|
console.log('Building a video player successfully');
|
|
console.log('Now you can call the thumbnail.start()');
|
|
});
|
|
|
|
thumbnail.on('canvas', canvas => {
|
|
console.log('Building a canvas successfully');
|
|
});
|
|
|
|
thumbnail.on('update', (url, percentage) => {
|
|
console.log('Generating preview image, returning preview url and percentage');
|
|
});
|
|
|
|
thumbnail.on('done', () => {
|
|
console.log('One task processing completed');
|
|
});
|
|
|
|
thumbnail.on('download', name => {
|
|
console.log('Download the preview');
|
|
});
|
|
```
|
|
|
|
## Example
|
|
|
|
```html
|
|
<input class="file" type="file" />
|
|
```
|
|
|
|
```js
|
|
var thumbnail = new ArtplayerToolThumbnail({
|
|
fileInput: document.querySelector('.file'),
|
|
});
|
|
|
|
thumbnail.on('video', () => {
|
|
thumbnail
|
|
.setup({
|
|
delay: 500,
|
|
number: 100,
|
|
width: 200,
|
|
height: 10,
|
|
column: 10,
|
|
})
|
|
.start()
|
|
.then(() => {
|
|
thumbnail.download();
|
|
});
|
|
});
|
|
```
|
|
|
|
## License
|
|
|
|
MIT © [Harvey Zack](https://sleepy.im/)
|