x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-26 17:01:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

完善文档

Browse Source
This commit is contained in:
Harvey committed 2019-11-21 10:31:49 +08:00
1 parent 20f3488830
commit 12c64e41fb
2 files changed
+201 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/document/README.md
+199 -72
View File
@@ -290,7 +290,7 @@ var art = new Artplayer({
- Type: `Boolean` - Type: `Boolean`
- Default: `false` - Default: `false`
Whether to show playback rate controller in the contextmenu Whether to show playback rate controller in the contextmenu and setting panel
[Run Code](/) [Run Code](/)
@@ -308,7 +308,7 @@ var art = new Artplayer({
- Type: `Boolean` - Type: `Boolean`
- Default: `false` - Default: `false`
Whether to show aspect ratio controller in the contextmenu Whether to show aspect ratio controller in the contextmenu and setting panel
[Run Code](/) [Run Code](/)
@@ -485,7 +485,7 @@ var art = new Artplayer({
- Type: `Object` - Type: `Object`
- Default: `{}` - Default: `{}`
Replace the default icon, The currently configurable icons are: `loading`、`playBig` Replace the default icon
[Run Code](/) [Run Code](/)
@@ -704,6 +704,7 @@ var art = new Artplayer({
url: url + '/subtitle/one-more-time-one-more-chance.srt', url: url + '/subtitle/one-more-time-one-more-chance.srt',
style: { style: {
color: '#03A9F4', color: '#03A9F4',
'font-size': '30px',
}, },
}, },
}); });
@@ -733,8 +734,10 @@ var art = new Artplayer({
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
thumbnails: { thumbnails: {
url: url + '/image/one-more-time-one-more-chance-thumbnails.png', url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
width: 190, number: 100,
height: 107, width: 160,
height: 90,
column: 10,
}, },
}); });
``` ```
@@ -742,7 +745,7 @@ var art = new Artplayer({
## moreVideoAttr ## moreVideoAttr
- Type: `Object` - Type: `Object`
- Default: `{'controls': false,'preload': 'auto'}` - Default: `{'controls': false,'preload': 'metadata'}`
More video Attributes, these properties will be written directly to the video element More video Attributes, these properties will be written directly to the video element
@@ -877,6 +880,28 @@ var art = new Artplayer({
}); });
``` ```
Or you can add it dynamically after instantiation:
[Run Code](/)
```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 ## contextmenu
- Type: `Array` - Type: `Array`
@@ -914,6 +939,26 @@ var art = new Artplayer({
}); });
``` ```
Or you can add it dynamically after instantiation:
[Run Code](/)
```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 ## controls
- Type: `Array` - Type: `Array`
@@ -941,22 +986,43 @@ var art = new Artplayer({
container: '.artplayer-app', container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
controls: [ controls: [
function myController(art) { {
return { name: 'myController',
name: 'myController', position: 'right',
position: 'right', index: 10,
index: 10, html: 'myController',
html: 'myController', tooltip: 'This is my controller',
tooltip: 'This is my controller', click: function() {
click: function() { console.log('myController');
console.log('myController'); },
},
};
}, },
], ],
}); });
``` ```
Or you can add it dynamically after instantiation:
[Run Code](/)
```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 ## plugins
- Type: `Array` - Type: `Array`
@@ -973,17 +1039,50 @@ var art = new Artplayer({
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
plugins: [ plugins: [
function myPlugin(art) { function myPlugin(art) {
// Do something you like here.
// You can also return an object for external calls.
console.info('myPlugin running...');
return { return {
// This exposes plugin properties or methods for others to use. Like: // This exposes plugin properties or methods for others to use. Like:
something: 'something', something: 'something',
doSomething: function() { doSomething: function() {
console.log('Do something here...'); console.info('Do something here...');
}, },
}; };
}, },
], ],
}); });
// Call plugin from the outside
art.plugins.myPlugin.doSomething();
```
Or you can add it dynamically after instantiation:
[Run Code](/)
```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(); art.plugins.myPlugin.doSomething();
``` ```
@@ -1009,11 +1108,11 @@ console.log('isFocus', art.isFocus);
console.log('isPlaying', art.isPlaying); console.log('isPlaying', art.isPlaying);
setTimeout(function() { setTimeout(function() {
// keep dom // remove dom
art.destroy(); art.destroy();
// remove dom // keep dom
// art.destroy(true); // art.destroy(false);
}, 1000); }, 1000);
``` ```
@@ -1069,7 +1168,7 @@ var art = new Artplayer({
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
}); });
art.once('video:canplay', () => { art.on('ready', () => {
art.player.seek = 5; art.player.seek = 5;
art.player.screenshot(); art.player.screenshot();
}); });
@@ -1079,10 +1178,12 @@ art.once('video:canplay', () => {
The player will automatically add a `localStorage` object named `artplayer_settings`, Now the player will only set and read the `volume` value. The player will automatically add a `localStorage` object named `artplayer_settings`, Now the player will only set and read the `volume` value.
| propertie | type | Description | | propertie | type | Description |
| --------- | ---------- | --------------- | | --------- | ---------- | ----------------- |
| `get` | `Function` | Get the storage | | `get` | `Function` | Get a storage |
| `set` | `Function` | Set the storage | | `set` | `Function` | Set a storage |
| `del` | `Function` | Delete a storage |
| `clean` | `Function` | Clean all storage |
[Run Code](/) [Run Code](/)
@@ -1154,6 +1255,9 @@ art.notice.show('some message');
// not auto hide // not auto hide
art.notice.show('some message', false); art.notice.show('some message', false);
// Set hidden delay time
art.notice.show('some message', true, 1000);
``` ```
## events ## events
@@ -1207,15 +1311,12 @@ var art = new Artplayer({
art.layers.add({ art.layers.add({
html: `<img style="width: 100px" src="${url}/image/your-name.png">`, html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
style: { style: {
name: 'yourLayer',
position: 'absolute', position: 'absolute',
top: '20px', top: '20px',
right: '20px', right: '20px',
opacity: '.9', opacity: '.9',
}, },
}); });
art.layers.yourLayer.show = false;
``` ```
## controls ## controls
@@ -1238,19 +1339,16 @@ var art = new Artplayer({
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
}); });
art.controls.add(function yourController(art) { art.controls.add({
return { name: 'myController',
name: 'yourController', position: 'right',
position: 'right', index: 10,
index: 10, html: 'myController',
html: 'yourController', tooltip: 'This is my controller',
click: function() { click: function() {
console.log('yourController'); console.log('myController');
}, },
};
}); });
art.controls.yourController.show = false;
``` ```
## contextmenu ## contextmenu
@@ -1274,11 +1372,12 @@ var art = new Artplayer({
}); });
art.contextmenu.add({ art.contextmenu.add({
html: 'Your Contextmenu', html: 'Custom menu',
name: 'yourContextmenu', click: function(contextmenu) {
console.info('You clicked on the custom menu');
contextmenu.show = false;
},
}); });
art.contextmenu.yourContextmenu.show = false;
``` ```
## subtitle ## subtitle
@@ -1303,25 +1402,21 @@ var art = new Artplayer({
url: url + '/subtitle/one-more-time-one-more-chance.srt', url: url + '/subtitle/one-more-time-one-more-chance.srt',
}, },
controls: [ controls: [
function subtitle1(art) { {
return { position: 'right',
position: 'right', index: 10,
index: 10, html: 'subtitle 01',
html: 'subtitle1', click: function() {
click: function() { art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name');
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name'); },
},
};
}, },
function subtitle2(art) { {
return { position: 'right',
position: 'right', index: 20,
index: 20, html: 'subtitle 02',
html: 'subtitle2', click: function() {
click: function() { art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name');
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name'); },
},
};
}, },
], ],
}); });
@@ -1335,6 +1430,14 @@ var art = new Artplayer({
| --------- | -------- | ------------ | | --------- | -------- | ------------ |
| `show` | `setter` | Show or hide | | `show` | `setter` | Show or hide |
```js
// Show the loading
art.loading.show = true;
// Hide the loading
art.loading.show = false;
```
## mask ## mask
- Type: `Object` - Type: `Object`
@@ -1343,6 +1446,14 @@ var art = new Artplayer({
| --------- | -------- | ------------ | | --------- | -------- | ------------ |
| `show` | `setter` | Show or hide | | `show` | `setter` | Show or hide |
```js
// Show the mask
art.mask.show = true;
// Hide the mask
art.mask.show = false;
```
## setting ## setting
Setting manager, and every setting has `show` and `hide` funciton Setting manager, and every setting has `show` and `hide` funciton
@@ -1361,6 +1472,7 @@ var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({ var art = new Artplayer({
container: '.artplayer-app', container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4', url: url + '/video/one-more-time-one-more-chance-480p.mp4',
setting: true,
}); });
art.setting.add({ art.setting.add({
@@ -1368,7 +1480,11 @@ art.setting.add({
name: 'yourSetting', name: 'yourSetting',
}); });
art.setting.yourSetting.show = false; // Show the setting
art.setting.show = true;
// Hide the setting
art.setting.show = false;
``` ```
## plugins ## plugins
@@ -1391,15 +1507,20 @@ var art = new Artplayer({
}); });
art.plugins.add(function myPlugin(art) { 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 { return {
// This exposes plugin properties or methods for others to use. Like: // This exposes plugin properties or methods for others to use. Like:
something: 'something', something: 'something',
doSomething: function() { doSomething: function() {
console.log('Do something here...'); console.info('Do something here...');
}, },
}; };
}); });
// Call plugin from the outside
art.plugins.myPlugin.something === 'something';
art.plugins.myPlugin.doSomething(); art.plugins.myPlugin.doSomething();
``` ```
@@ -1415,11 +1536,15 @@ All properties are read only
| `Artplayer.utils` | `Object` | Utils function | | `Artplayer.utils` | `Object` | Utils function |
| `Artplayer.option` | `Object` | Default option | | `Artplayer.option` | `Object` | Default option |
| `Artplayer.instances` | `Array` | Instance collection | | `Artplayer.instances` | `Array` | Instance collection |
| `Artplayer.scheme` | `Array` | Option scheme |
| `Artplayer.Emitter` | `Array` | Emitter constructor |
| `Artplayer.validator` | `Array` | Option validator |
| `Artplayer.kindOf` | `Array` | Data type detection tool |
# Event # Event
```js ```js
art.on('ready', function() { art.on('ready', function(args) {
console.log('The player can play'); console.log('The player can play');
}); });
``` ```
@@ -1478,12 +1603,14 @@ art.on('video:canplay', function(event) {
## Subtitle ## Subtitle
| Event | Description | Parameter | | Event | Description | Parameter |
| ----------------- | ------------------------- | --------------------- | | ----------------- | ----------------------------- | --------------------- |
| `subtitle:update` | When the subtitles change | Current subtitle text | | `subtitle:update` | When the subtitles change | Current subtitle text |
| `subtitle:switch` | When switching subtitles | Current subtitle url | | `subtitle:switch` | When switching subtitles | Current subtitle url |
| `subtitle:show` | When displaying subtitles | `undefined` | | `subtitle:load` | When the subtitles loaded | Current subtitle url |
| `subtitle:hide` | When hiding subtitles | `undefined` | | `subtitle:err` | When the subtitles load error | Error object |
| `subtitle:show` | When displaying subtitles | `undefined` |
| `subtitle:hide` | When hiding subtitles | `undefined` |
## Notice ## Notice
packages/artplayer/src/subtitle.js
+2
View File
@@ -63,6 +63,7 @@ export default class Subtitle {
return response.text(); return response.text();
}) })
.then(text => { .then(text => {
this.art.emit('subtitle:load', url);
switch (getExt(url)) { switch (getExt(url)) {
case 'srt': case 'srt':
return vttToBlob(srtToVtt(text)); return vttToBlob(srtToVtt(text));
@@ -83,6 +84,7 @@ export default class Subtitle {
}) })
.catch(err => { .catch(err => {
notice.show(err); notice.show(err);
this.art.emit('subtitle:err', err);
throw err; throw err;
}); });
} }