优化文档

This commit is contained in:
Harvey committed 2019-11-28 11:26:19 +08:00
1 parent 0cf455ced3
commit 54e9fb9ae2
10 files changed
+163 -287

No files matched your search

+88 -157
View File
@@ -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)
+5 -4
View File
@@ -656,7 +656,6 @@
miniProgressBar: 'boolean',
localVideo: 'boolean',
localSubtitle: 'boolean',
autoPip: 'boolean',
networkMonitor: 'boolean',
plugins: ['function'],
whitelist: ['string|function|regexp'],
@@ -997,9 +996,11 @@
var typeCallback = customType[typeName];
if (typeName && typeCallback) {
art.loading.show = true;
typeCallback.call(art, $video, url, art);
art.emit('customType', typeName);
sleep().then(function () {
art.loading.show = true;
typeCallback.call(art, $video, url, art);
art.emit('customType', typeName);
});
} else {
$video.src = url;
art.option.url = url;
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.Line truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.Line truncated