=0;)i =0;)i .")}return t}(t);if(!je[n]){je[n]=!0;var r="";e&&e._owner&&e._owner!==V.current&&(r=" It was passed a child from "+N(e._owner.type)+"."),B(e),X(!1,'Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',n,r),B(null)}}}function Se(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n ".concat(e," .")}return t}(t);if(!ke[n]){ke[n]=!0;var r="";e&&e._owner&&e._owner!==F.current&&(r=" It was passed a child from "+N(e._owner.type)+"."),B(e),Z(!1,'Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',n,r),B(null)}}}function Pe(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n ".concat(e," ".concat(t," ".concat(t," ".concat(t," ".concat(t," ${item} ${item} =0;)i =0;)i .")}return t}(t);if(!je[n]){je[n]=!0;var r="";e&&e._owner&&e._owner!==V.current&&(r=" It was passed a child from "+N(e._owner.type)+"."),B(e),X(!1,'Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',n,r),B(null)}}}function Se(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n ".concat(e," .")}return t}(t);if(!ke[n]){ke[n]=!0;var r="";e&&e._owner&&e._owner!==F.current&&(r=" It was passed a child from "+N(e._owner.type)+"."),B(e),Z(!1,'Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',n,r),B(null)}}}function Pe(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n ".concat(e," ".concat(t," ".concat(t," ".concat(t," ".concat(t,"1){for(var d=Array(p),h=0;h1){for(var d=Array(p),h=0;h
`,
- style: {
- position: 'absolute',
- top: '20px',
- right: '20px',
- opacity: '.9',
- },
-});
-```
-
## contextmenu
- Type: `Array`
@@ -939,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`
@@ -1000,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`
@@ -1057,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)
@@ -1105,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
@@ -1132,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 |
@@ -1152,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 |
@@ -1232,14 +1119,39 @@ art.i18n.update({
console.log(art.i18n.get('Language'));
```
+## hotkey
+
+| propertie | type | Description |
+| --------- | ---------- | ------------ |
+| `add` | `function` | Add a hotkey |
+
+```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',
+});
+
+// Add a hotkey
+art.hotkey.add(27, function(event) {
+ console.log('You pressed esc button');
+});
+```
+
+## whitelist
+
+| propertie | type | Description |
+| ---------- | --------- | --------------------- |
+| `ua` | `string` | The userAgent |
+| `isMobile` | `boolean` | Whether mobile access |
+
## notice
- Type: `Object`
-| propertie | type | Description |
-| --------- | ---------- | -------------- |
-| `show` | `Function` | Show a message |
-| `hide` | `Function` | Hide message |
+| propertie | type | Description |
+| --------- | -------- | -------------- |
+| `show` | `setter` | Show a message |
[Run Code](/Properties.notice)
@@ -1251,13 +1163,7 @@ var art = new Artplayer({
});
// auto hide
-art.notice.show('some message');
-
-// not auto hide
-art.notice.show('some message', false);
-
-// Set hidden delay time
-art.notice.show('some message', true, 1000);
+art.notice.show = 'some message';
```
## events
@@ -1430,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
@@ -1446,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
@@ -1475,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
@@ -1551,43 +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` |
-| `beforeCustomType` | Before triggering CustomType | Type name |
-| `afterCustomType` | After triggering CustomType | Type name |
-| `beforeAttachUrl` | Before the video url change | Video url |
-| `afterAttachUrl` | 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)
diff --git a/docs/index.html b/docs/index.html
index 0b14a4be9..855b2b9e5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,9 +37,6 @@
1){for(var d=Array(p),h=0;h1){for(var d=Array(p),h=0;h
`,
- style: {
- position: 'absolute',
- top: '20px',
- right: '20px',
- opacity: '.9',
- },
-});
-
- });
-
-
it(`Configuration.contextmenu`, function() {
var url = 'https://zhw2590582.github.io/assets-cdn';
@@ -591,25 +558,6 @@ var art = new Artplayer({
});
- it(`Configuration.contextmenu`, function() {
-
-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;
- },
-});
-
- });
-
-
it(`Configuration.controls`, function() {
var url = 'https://zhw2590582.github.io/assets-cdn';
@@ -633,28 +581,6 @@ var art = new Artplayer({
});
- it(`Configuration.controls`, function() {
-
-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');
- },
-});
-
- });
-
-
it(`Configuration.plugins`, function() {
var url = 'https://zhw2590582.github.io/assets-cdn';
@@ -683,34 +609,6 @@ art.plugins.myPlugin.doSomething();
});
- it(`Configuration.plugins`, function() {
-
-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();
-
- });
-
-
it(`Properties.instance`, function() {
var url = 'https://zhw2590582.github.io/assets-cdn';
@@ -720,7 +618,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
@@ -798,13 +697,7 @@ var art = new Artplayer({
});
// auto hide
-art.notice.show('some message');
-
-// not auto hide
-art.notice.show('some message', false);
-
-// Set hidden delay time
-art.notice.show('some message', true, 1000);
+art.notice.show = 'some message';
});
@@ -919,6 +812,46 @@ var art = new Artplayer({
});
+ it(`Properties.loading`, function() {
+
+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);
+});
+
+ });
+
+
+ it(`Properties.mask`, function() {
+
+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);
+});
+
+ });
+
+
it(`Properties.setting`, function() {
var url = 'https://zhw2590582.github.io/assets-cdn';
@@ -928,17 +861,21 @@ 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;
-
});
diff --git a/test/option.test.js b/test/option.test.js
index 7b2c5f7ab..4830306b7 100644
--- a/test/option.test.js
+++ b/test/option.test.js
@@ -22,11 +22,4 @@ describe('Option', function() {
});
}).to.throw(/option.container require \'string\' or \'Element\' type/);
});
-
- it('The url can return a promise', function() {
- new Artplayer({
- container: '.sample1',
- url: () => Promise.resolve(url),
- });
- });
});