mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 11:11:20 -08:00
update readme
This commit is contained in:
1 parent
544eaa0ecc
commit
4dcdda0089
3 files changed
+18
-193
No files matched your search
@@ -1,122 +1,11 @@
|
||||
# artplayer-tool-thumbnail
|
||||
|
||||
thumbnail tool for ArtPlayer
|
||||
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();
|
||||
});
|
||||
});
|
||||
```
|
||||
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Harvey Zack](https://sleepy.im/)
|
||||
MIT © Harvey Zack
|
||||
Reference in new issue
Block a user