mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 02:51:20 -08:00
update readme
This commit is contained in:
Harvey Zack committed
1 parent
544eaa0ecc
commit
4dcdda0089
3 files changed
+18
-193
No files matched your search
@@ -4,87 +4,12 @@ Danmuku plugin for ArtPlayer
|
|||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) from Github Pages
|
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
Install with `npm`
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ npm install artplayer-plugin-danmuku
|
|
||||||
```
|
|
||||||
|
|
||||||
Or install with `yarn`
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ yarn add artplayer-plugin-danmuku
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
|
||||||
```
|
|
||||||
|
|
||||||
Or umd builds are also available
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="artplayer-plugin-danmuku.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
Will expose the global variable to `window.artplayerPluginDanmuku`.
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```js
|
[https://artplayer.org/document/en/Plugins/danmuku](https://artplayer.org/document/en/Plugins/danmuku)
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: 'path/to/video.mp4',
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: [
|
|
||||||
{
|
|
||||||
text: '666', // Danmu text
|
|
||||||
time: 5, // Video time
|
|
||||||
color: '#fff', // Danmu color
|
|
||||||
border: false, // Danmu border
|
|
||||||
mode: 0, // Danmu mode: 0-scroll or 1-static
|
|
||||||
},
|
|
||||||
], // Can be an array or return the promised function or danmuku xml url
|
|
||||||
speed: 5, // Animation time
|
|
||||||
opacity: 1, // Opacity
|
|
||||||
color: '#fff', // Font color
|
|
||||||
size: 25, // Font size
|
|
||||||
maxlength: 50, // The maximum number of words in the danmu
|
|
||||||
margin: [10, 20], // Margin top and margin bottom
|
|
||||||
synchronousPlayback: false, // Synchronous playback speed
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Send a new danmu
|
|
||||||
art.plugins.artplayerPluginDanmuku.emit({
|
|
||||||
text: '666', // Danmu text
|
|
||||||
time: 5, // Video time
|
|
||||||
color: '#fff', // Danmu color
|
|
||||||
size: 25, // Danmu size
|
|
||||||
border: false, // Danmu border
|
|
||||||
mode: 0, // Danmu mode: 0-scroll or 1-static
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hide the danmu
|
|
||||||
art.plugins.artplayerPluginDanmuku.hide();
|
|
||||||
|
|
||||||
// Show the danmu
|
|
||||||
art.plugins.artplayerPluginDanmuku.show();
|
|
||||||
|
|
||||||
// Returns whether to hide the danmu
|
|
||||||
art.plugins.artplayerPluginDanmuku.isHide;
|
|
||||||
|
|
||||||
// Config danmu dynamically
|
|
||||||
art.plugins.artplayerPluginDanmuku.config({
|
|
||||||
// option
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
MIT © [Harvey Zack](https://sleepy.im/)
|
MIT © Harvey Zack
|
||||||
@@ -1,122 +1,11 @@
|
|||||||
# artplayer-tool-thumbnail
|
# artplayer-tool-thumbnail
|
||||||
|
|
||||||
thumbnail tool for ArtPlayer
|
Thumbnail tool for ArtPlayer
|
||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) from Github Pages
|
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
|
||||||
|
|
||||||
## 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
|
## License
|
||||||
|
|
||||||
MIT © [Harvey Zack](https://sleepy.im/)
|
MIT © Harvey Zack
|
||||||
@@ -1,3 +1,14 @@
|
|||||||
# ArtPlayer
|
# ArtPlayer
|
||||||
[README.md](https://github.com/zhw2590582/ArtPlayer)
|
|
||||||
|
|
||||||
|
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
|
||||||
|
|
||||||
|
## Github
|
||||||
|
[https://github.com/zhw2590582/ArtPlayer](https://github.com/zhw2590582/ArtPlayer)
|
||||||
|
|
||||||
|
## Home Page
|
||||||
|
|
||||||
|
[https://artplayer.org](https://artplayer.org)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT © Harvey Zack
|
||||||
Reference in new issue
Block a user