From 12c64e41fb17fbc0e8db24589f5bd47d93fdc684 Mon Sep 17 00:00:00 2001 From: Harvey Date: Thu, 21 Nov 2019 10:31:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/document/README.md | 271 +++++++++++++++++++++-------- packages/artplayer/src/subtitle.js | 2 + 2 files changed, 201 insertions(+), 72 deletions(-) diff --git a/docs/document/README.md b/docs/document/README.md index 847a7bfbb..1e1e1ef43 100644 --- a/docs/document/README.md +++ b/docs/document/README.md @@ -290,7 +290,7 @@ var art = new Artplayer({ - Type: `Boolean` - 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](/) @@ -308,7 +308,7 @@ var art = new Artplayer({ - Type: `Boolean` - 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](/) @@ -485,7 +485,7 @@ var art = new Artplayer({ - Type: `Object` - Default: `{}` -Replace the default icon, The currently configurable icons are: `loading`、`playBig` +Replace the default icon [Run Code](/) @@ -704,6 +704,7 @@ var art = new Artplayer({ url: url + '/subtitle/one-more-time-one-more-chance.srt', style: { color: '#03A9F4', + 'font-size': '30px', }, }, }); @@ -733,8 +734,10 @@ var art = new Artplayer({ url: url + '/video/one-more-time-one-more-chance-480p.mp4', thumbnails: { url: url + '/image/one-more-time-one-more-chance-thumbnails.png', - width: 190, - height: 107, + number: 100, + width: 160, + height: 90, + column: 10, }, }); ``` @@ -742,7 +745,7 @@ var art = new Artplayer({ ## moreVideoAttr - 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 @@ -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: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, +}); +``` + ## contextmenu - 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 - Type: `Array` @@ -941,22 +986,43 @@ var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', controls: [ - function myController(art) { - return { - name: 'myController', - position: 'right', - index: 10, - html: 'myController', - tooltip: 'This is my controller', - click: function() { - console.log('myController'); - }, - }; + { + name: 'myController', + position: 'right', + index: 10, + html: 'myController', + tooltip: 'This is my controller', + click: function() { + 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 - Type: `Array` @@ -973,17 +1039,50 @@ var art = new Artplayer({ url: url + '/video/one-more-time-one-more-chance-480p.mp4', plugins: [ 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.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(); ``` @@ -1009,11 +1108,11 @@ console.log('isFocus', art.isFocus); console.log('isPlaying', art.isPlaying); setTimeout(function() { - // keep dom + // remove dom art.destroy(); - // remove dom - // art.destroy(true); + // keep dom + // art.destroy(false); }, 1000); ``` @@ -1069,7 +1168,7 @@ var art = new Artplayer({ url: url + '/video/one-more-time-one-more-chance-480p.mp4', }); -art.once('video:canplay', () => { +art.on('ready', () => { art.player.seek = 5; 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. -| propertie | type | Description | -| --------- | ---------- | --------------- | -| `get` | `Function` | Get the storage | -| `set` | `Function` | Set the storage | +| propertie | type | Description | +| --------- | ---------- | ----------------- | +| `get` | `Function` | Get a storage | +| `set` | `Function` | Set a storage | +| `del` | `Function` | Delete a storage | +| `clean` | `Function` | Clean all storage | [Run Code](/) @@ -1154,6 +1255,9 @@ 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); ``` ## events @@ -1207,15 +1311,12 @@ var art = new Artplayer({ art.layers.add({ html: ``, style: { - name: 'yourLayer', position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, }); - -art.layers.yourLayer.show = false; ``` ## controls @@ -1238,19 +1339,16 @@ var art = new Artplayer({ url: url + '/video/one-more-time-one-more-chance-480p.mp4', }); -art.controls.add(function yourController(art) { - return { - name: 'yourController', - position: 'right', - index: 10, - html: 'yourController', - click: function() { - console.log('yourController'); - }, - }; +art.controls.add({ + name: 'myController', + position: 'right', + index: 10, + html: 'myController', + tooltip: 'This is my controller', + click: function() { + console.log('myController'); + }, }); - -art.controls.yourController.show = false; ``` ## contextmenu @@ -1274,11 +1372,12 @@ var art = new Artplayer({ }); art.contextmenu.add({ - html: 'Your Contextmenu', - name: 'yourContextmenu', + html: 'Custom menu', + click: function(contextmenu) { + console.info('You clicked on the custom menu'); + contextmenu.show = false; + }, }); - -art.contextmenu.yourContextmenu.show = false; ``` ## subtitle @@ -1303,25 +1402,21 @@ var art = new Artplayer({ url: url + '/subtitle/one-more-time-one-more-chance.srt', }, controls: [ - function subtitle1(art) { - return { - position: 'right', - index: 10, - html: 'subtitle1', - click: function() { - art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name'); - }, - }; + { + position: 'right', + index: 10, + html: 'subtitle 01', + click: function() { + art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name'); + }, }, - function subtitle2(art) { - return { - position: 'right', - index: 20, - html: 'subtitle2', - click: function() { - art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name'); - }, - }; + { + position: 'right', + index: 20, + html: 'subtitle 02', + click: function() { + 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 | +```js +// Show the loading +art.loading.show = true; + +// Hide the loading +art.loading.show = false; +``` + ## mask - Type: `Object` @@ -1343,6 +1446,14 @@ var art = new Artplayer({ | --------- | -------- | ------------ | | `show` | `setter` | Show or hide | +```js +// Show the mask +art.mask.show = true; + +// Hide the mask +art.mask.show = false; +``` + ## setting 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({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', + setting: true, }); art.setting.add({ @@ -1368,7 +1480,11 @@ art.setting.add({ name: 'yourSetting', }); -art.setting.yourSetting.show = false; +// Show the setting +art.setting.show = true; + +// Hide the setting +art.setting.show = false; ``` ## plugins @@ -1391,15 +1507,20 @@ var art = new Artplayer({ }); 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.log('Do something here...'); + console.info('Do something here...'); }, }; }); +// Call plugin from the outside +art.plugins.myPlugin.something === 'something'; art.plugins.myPlugin.doSomething(); ``` @@ -1415,11 +1536,15 @@ All properties are read only | `Artplayer.utils` | `Object` | Utils function | | `Artplayer.option` | `Object` | Default option | | `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 ```js -art.on('ready', function() { +art.on('ready', function(args) { console.log('The player can play'); }); ``` @@ -1478,12 +1603,14 @@ art.on('video:canplay', function(event) { ## Subtitle -| Event | Description | Parameter | -| ----------------- | ------------------------- | --------------------- | -| `subtitle:update` | When the subtitles change | Current subtitle text | -| `subtitle:switch` | When switching subtitles | Current subtitle url | -| `subtitle:show` | When displaying subtitles | `undefined` | -| `subtitle:hide` | When hiding subtitles | `undefined` | +| Event | Description | Parameter | +| ----------------- | ----------------------------- | --------------------- | +| `subtitle:update` | When the subtitles change | Current subtitle text | +| `subtitle:switch` | When switching subtitles | Current subtitle url | +| `subtitle:load` | When the subtitles loaded | Current subtitle url | +| `subtitle:err` | When the subtitles load error | Error object | +| `subtitle:show` | When displaying subtitles | `undefined` | +| `subtitle:hide` | When hiding subtitles | `undefined` | ## Notice diff --git a/packages/artplayer/src/subtitle.js b/packages/artplayer/src/subtitle.js index 6e6a92a4c..81457ef03 100644 --- a/packages/artplayer/src/subtitle.js +++ b/packages/artplayer/src/subtitle.js @@ -63,6 +63,7 @@ export default class Subtitle { return response.text(); }) .then(text => { + this.art.emit('subtitle:load', url); switch (getExt(url)) { case 'srt': return vttToBlob(srtToVtt(text)); @@ -83,6 +84,7 @@ export default class Subtitle { }) .catch(err => { notice.show(err); + this.art.emit('subtitle:err', err); throw err; }); }