mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-14 00:06:17 -08:00
优化文档
This commit is contained in:
Harvey committed
1 parent
0cf455ced3
commit
54e9fb9ae2
10 files changed
+163
-287
No files matched your search
+88
-157
@@ -300,6 +300,7 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
playbackRate: true,
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -318,6 +319,7 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
aspectRatio: true,
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -507,8 +509,6 @@ var art = new Artplayer({
|
||||
fullscreen: '',
|
||||
fullscreenWeb: '',
|
||||
pip: '',
|
||||
prev: '',
|
||||
next: '',
|
||||
},
|
||||
});
|
||||
```
|
||||
@@ -858,28 +858,6 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
Or you can add it dynamically after instantiation:
|
||||
|
||||
[Run Code](/Configuration.layers)
|
||||
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## contextmenu
|
||||
|
||||
- Type: `Array`
|
||||
@@ -917,26 +895,6 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
Or you can add it dynamically after instantiation:
|
||||
|
||||
[Run Code](/Configuration.contextmenu)
|
||||
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
html: 'Custom menu',
|
||||
click: function(contextmenu) {
|
||||
console.info('You clicked on the custom menu');
|
||||
contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## controls
|
||||
|
||||
- Type: `Array`
|
||||
@@ -978,29 +936,6 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
Or you can add it dynamically after instantiation:
|
||||
|
||||
[Run Code](/Configuration.controls)
|
||||
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'myController',
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'myController',
|
||||
tooltip: 'This is my controller',
|
||||
click: function() {
|
||||
console.log('myController');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- Type: `Array`
|
||||
@@ -1035,43 +970,16 @@ var art = new Artplayer({
|
||||
art.plugins.myPlugin.doSomething();
|
||||
```
|
||||
|
||||
Or you can add it dynamically after instantiation:
|
||||
|
||||
[Run Code](/Configuration.plugins)
|
||||
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.plugins.add(function myPlugin(art) {
|
||||
// Do something you like here.
|
||||
// You can also return an object for external calls.
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
// This exposes plugin properties or methods for others to use. Like:
|
||||
something: 'something',
|
||||
doSomething: function() {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Call plugin from the outside
|
||||
art.plugins.myPlugin.something === 'something';
|
||||
art.plugins.myPlugin.doSomething();
|
||||
```
|
||||
|
||||
# Instance properties
|
||||
|
||||
## Instance
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------------------------------ |
|
||||
| `isFocus` | `Boolean` | Return to focus state |
|
||||
| `destroy` | `Function` | Destroy instance, will not remove dom by default |
|
||||
| propertie | type | Description |
|
||||
| ----------- | ---------- | ------------------------------------------------ |
|
||||
| `isFocus` | `Boolean` | Return the focus state |
|
||||
| `isDestroy` | `Boolean` | Return the destroy state |
|
||||
| `option` | `Object` | Return the merge option |
|
||||
| `destroy` | `Function` | Destroy instance, will not remove dom by default |
|
||||
|
||||
[Run Code](/Properties.instance)
|
||||
|
||||
@@ -1083,7 +991,8 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
console.log('isFocus', art.isFocus);
|
||||
console.log('isPlaying', art.isPlaying);
|
||||
console.log('isDestroy', art.isDestroy);
|
||||
console.log('option', art.option);
|
||||
|
||||
setTimeout(function() {
|
||||
// remove dom
|
||||
@@ -1110,7 +1019,7 @@ art.seek === art.player.seek;
|
||||
| --------------------- | ---------- | ------------------------------------------------------------------------------------------------- |
|
||||
| `aspectRatio` | `String` | Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` and `false` |
|
||||
| `aspectRatioReset` | `Boolean` | Recalculate the aspect ratio |
|
||||
| `attachUrl` | `Function` | Replace play address |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `autoSize` | `Boolean` | Set auto size |
|
||||
| `currentTime` | `Number` | `Getter` and `Setter` of the current time |
|
||||
| `duration` | `Number` | `Getter` of the duration |
|
||||
@@ -1130,7 +1039,7 @@ art.seek === art.player.seek;
|
||||
| `play` | `Boolean` | Start playback |
|
||||
| `screenshot` | `Function` | Download a screenshot of current time |
|
||||
| `seek` | `Number` | Set the current time |
|
||||
| `switchQuality` | `Function` | Switch quality |
|
||||
| `switchQuality` | `Function` | Switch video quality |
|
||||
| `switchUrl` | `Function` | Switch video url |
|
||||
| `toggle` | `Boolean` | Toggle play and pause |
|
||||
| `volume` | `Number` | `Getter` and `Setter` of the current volume |
|
||||
@@ -1427,12 +1336,23 @@ var art = new Artplayer({
|
||||
| --------- | -------- | ------------ |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
```js
|
||||
// Show the loading
|
||||
art.loading.show = true;
|
||||
[Run Code](/Properties.loading)
|
||||
|
||||
// Hide the loading
|
||||
art.loading.show = false;
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', function() {
|
||||
// Show the loading
|
||||
art.loading.show = true;
|
||||
setTimeout(function() {
|
||||
// Hide the loading
|
||||
art.loading.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
## mask
|
||||
@@ -1443,12 +1363,23 @@ art.loading.show = false;
|
||||
| --------- | -------- | ------------ |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
```js
|
||||
// Show the mask
|
||||
art.mask.show = true;
|
||||
[Run Code](/Properties.mask)
|
||||
|
||||
// Hide the mask
|
||||
art.mask.show = false;
|
||||
```js
|
||||
var url = 'https://zhw2590582.github.io/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', function() {
|
||||
// Show the mask
|
||||
art.mask.show = true;
|
||||
setTimeout(function() {
|
||||
// Hide the mask
|
||||
art.mask.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
## setting
|
||||
@@ -1472,16 +1403,20 @@ var art = new Artplayer({
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.setting.add({
|
||||
html: 'Your Setting',
|
||||
name: 'yourSetting',
|
||||
art.on('ready', function() {
|
||||
// Add a setting
|
||||
art.setting.add({
|
||||
html: 'Your Setting',
|
||||
name: 'yourSetting',
|
||||
});
|
||||
|
||||
// Show the setting
|
||||
art.setting.show = true;
|
||||
setTimeout(function() {
|
||||
// Hide the setting
|
||||
art.setting.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
// Show the setting
|
||||
art.setting.show = true;
|
||||
|
||||
// Hide the setting
|
||||
art.setting.show = false;
|
||||
```
|
||||
|
||||
## plugins
|
||||
@@ -1548,41 +1483,37 @@ art.on('ready', function(args) {
|
||||
|
||||
## Instance
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ---------------------- | --------------------------------------- | ------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the instance is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hoverenter` | When the mouse is moved into the player | `undefined` |
|
||||
| `hoverleave` | When the mouse is moved out the player | `undefined` |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
|
||||
| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
|
||||
| `aspectRatioReset` | When aspect ratio reset | `undefined` |
|
||||
| `customType` | After triggering CustomType | Type name |
|
||||
| `attachUrl` | After the video url change | Video url |
|
||||
| `autoSizeChange` | When the player auto size change | Player size |
|
||||
| `autoSizeRemove` | When the player auto size remove | `undefined` |
|
||||
| `flipChange` | When the player flip change | Flip name |
|
||||
| `flipRemove` | When the player flip remove | `undefined` |
|
||||
| `fullscreenChange` | When the full screen status change | Whether full screen |
|
||||
| `fullscreenEnabled` | When entering full screen | `undefined` |
|
||||
| `fullscreenExit` | When exiting full screen | `undefined` |
|
||||
| `fullscreenWebEnabled` | When entering web full screen | `undefined` |
|
||||
| `fullscreenWebExit` | When exiting web full screen | `undefined` |
|
||||
| `pipEnabled` | When entering picture in picture | `undefined` |
|
||||
| `pipExit` | When exiting picture in picture | `undefined` |
|
||||
| `playbackRateChange` | When playback rate change | Playback rate |
|
||||
| `playbackRateRemove` | When playback rate remove | `undefined` |
|
||||
| `playbackRateReset` | When playback rate reset | `undefined` |
|
||||
| `screenshot` | When a screenshot occurs | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
| Event | Description | Parameter |
|
||||
| --------------------- | --------------------------------------- | ----------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the instance is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hoverenter` | When the mouse is moved into the player | `undefined` |
|
||||
| `hoverleave` | When the mouse is moved out the player | `undefined` |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
|
||||
| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
|
||||
| `aspectRatioReset` | When aspect ratio reset | `undefined` |
|
||||
| `customType` | After triggering CustomType | Type name |
|
||||
| `urlChange` | After the video url change | Video url |
|
||||
| `autoSizeChange` | When the player auto size change | Player size |
|
||||
| `autoSizeRemove` | When the player auto size remove | `undefined` |
|
||||
| `flipChange` | When the player flip change | Flip name |
|
||||
| `flipRemove` | When the player flip remove | `undefined` |
|
||||
| `fullscreenChange` | When the full screen status change | Whether full screen |
|
||||
| `fullscreenWebChange` | When entering web full screen | Whether web full screen |
|
||||
| `pipChange` | When entering picture in picture | Whether in pip |
|
||||
| `playbackRateChange` | When playback rate change | Playback rate |
|
||||
| `playbackRateRemove` | When playback rate remove | `undefined` |
|
||||
| `playbackRateReset` | When playback rate reset | `undefined` |
|
||||
| `screenshot` | When a screenshot occurs | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
|
||||
## Video (Native event)
|
||||
|
||||
|
||||
Reference in new issue
Block a user