diff --git a/docs/document/README.md b/docs/document/README.md index 1e1e1ef43..3beea4b9d 100644 --- a/docs/document/README.md +++ b/docs/document/README.md @@ -51,7 +51,7 @@ var art = new Artplayer({ DOM container of the player -[Run Code](/) +[Run Code](/Configuration.container) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -79,7 +79,7 @@ You may need to initialize a size for the container element, like: Video source url, Three video file formats are supported: `mp4`, `ogg`, `webm` -[Run Code](/) +[Run Code](/Configuration.url) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -98,7 +98,7 @@ var art = new Artplayer({ Specify the format for the `url`, use with `customType` -[Run Code](/) +[Run Code](/Configuration.type) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -116,13 +116,13 @@ var art = new Artplayer({ Customize when loading third-party libraries -[Run Code](/) +[Run Code](/Configuration.customType) ```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.flv' + url: url + '/video/one-more-time-one-more-chance-480p.flv', type: 'flv', customType: { flv: function(video, url, art) { @@ -163,7 +163,7 @@ var art = new Artplayer({ Video poster image url -[Run Code](/) +[Run Code](/Configuration.poster) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -181,7 +181,7 @@ var art = new Artplayer({ Video title, will be shown in `screenshot` file name and `pip` mode -[Run Code](/) +[Run Code](/Configuration.title) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -199,7 +199,7 @@ var art = new Artplayer({ Default volume, player will cache the last volume, which may be overwritten -[Run Code](/) +[Run Code](/Configuration.volume) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -217,7 +217,7 @@ var art = new Artplayer({ Whether to mute by default -[Run Code](/) +[Run Code](/Configuration.muted) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -237,7 +237,7 @@ Whether to play automatically, sometimes it doesn't necessarily succeed More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) -[Run Code](/) +[Run Code](/Configuration.autoplay) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -255,7 +255,7 @@ var art = new Artplayer({ Keep the original video aspect ratio and automatically zoom -[Run Code](/) +[Run Code](/Configuration.autoSize) ```js // Zoom browser window @@ -274,7 +274,7 @@ var art = new Artplayer({ Automatic loop playback -[Run Code](/) +[Run Code](/Configuration.loop) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -292,7 +292,7 @@ var art = new Artplayer({ Whether to show playback rate controller in the contextmenu and setting panel -[Run Code](/) +[Run Code](/Configuration.playbackRate) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -310,7 +310,7 @@ var art = new Artplayer({ Whether to show aspect ratio controller in the contextmenu and setting panel -[Run Code](/) +[Run Code](/Configuration.aspectRatio) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -328,7 +328,7 @@ var art = new Artplayer({ Whether to show screenshot controller in the bottom, If the video resource exists cross-domain, the screenshot may fail. Unless serves this url with the correct `Access-Control-Allow-Origin`, and Set the video's `crossOrigin` property to `anonymous` -[Run Code](/) +[Run Code](/Configuration.screenshot) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -351,7 +351,7 @@ var art = new Artplayer({ Whether to show setting controller in the bottom -[Run Code](/) +[Run Code](/Configuration.setting) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -371,7 +371,7 @@ Whether to show pip controller in the bottom, it will give priority to the nativ More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture) -[Run Code](/) +[Run Code](/Configuration.pip) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -389,7 +389,7 @@ var art = new Artplayer({ Whether to show window fullscreen controller in the bottom -[Run Code](/) +[Run Code](/Configuration.fullscreen) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -407,7 +407,7 @@ var art = new Artplayer({ Whether to show web page fullscreen controller in the bottom -[Run Code](/) +[Run Code](/Configuration.fullscreenWeb) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -425,7 +425,7 @@ var art = new Artplayer({ Player mutually exclusive, only one player can play at a time -[Run Code](/) +[Run Code](/Configuration.mutex) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -443,10 +443,10 @@ var art = new Artplayer({ Whether to use hotkey -[Run Code](/) +[Run Code](/Configuration.hotkey) ```js -var url = 'https://zhw2590582.github.io/assets-cdn; +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', @@ -469,7 +469,7 @@ var art = new Artplayer({ Default display language: en, zh-cn, zh-tw -[Run Code](/) +[Run Code](/Configuration.lang) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -487,7 +487,7 @@ var art = new Artplayer({ Replace the default icon -[Run Code](/) +[Run Code](/Configuration.icons) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -520,7 +520,7 @@ var art = new Artplayer({ Default theme color -[Run Code](/) +[Run Code](/Configuration.theme) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -538,7 +538,7 @@ var art = new Artplayer({ Subtitle time offset plugin -[Run Code](/) +[Run Code](/Configuration.subtitleOffset) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -560,7 +560,7 @@ var art = new Artplayer({ Mini progress bar plugin -[Run Code](/) +[Run Code](/Configuration.miniProgressBar) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -578,7 +578,7 @@ var art = new Artplayer({ Local video preview plugin -[Run Code](/) +[Run Code](/Configuration.localVideo) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -606,7 +606,7 @@ var art = new Artplayer({ Local subtitle preview plugin -[Run Code](/) +[Run Code](/Configuration.localSubtitle) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -638,7 +638,7 @@ In chrome, you must use gestures on the page to use this feature, otherwise you More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture) -[Run Code](/) +[Run Code](/Configuration.autoPip) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -656,7 +656,7 @@ var art = new Artplayer({ A network monitor is used to monitor the blocking of the video. -[Run Code](/) +[Run Code](/Configuration.networkMonitor) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -693,7 +693,7 @@ Custom subtitle | `url` | `String` | Subtitle url, support vtt and srt format | | `style` | `Object` | Subtitle style | -[Run Code](/) +[Run Code](/Configuration.subtitle) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -725,7 +725,7 @@ Custom thumbnails in the progress bar with lazy load | `height` | `Number` | Thumbnails height | | `column` | `Number` | Thumbnails column | -[Run Code](/) +[Run Code](/Configuration.thumbnails) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -749,7 +749,7 @@ var art = new Artplayer({ More video Attributes, these properties will be written directly to the video element -[Run Code](/) +[Run Code](/Configuration.moreVideoAttr) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -776,7 +776,7 @@ Custom quality, The type of quality is an object | `name` | `String` | Quality name to show | | `url` | `String` | Video url | -[Run Code](/) +[Run Code](/Configuration.quality) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -809,7 +809,7 @@ Custom highlight, The type of highlight is an object | `time` | `Number` | highlight second | | `text` | `String` | highlight text | -[Run Code](/) +[Run Code](/Configuration.highlight) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -859,7 +859,7 @@ Custom layer, The type of layer is an object or function | `mounted` | `Function` | Callback after mounted | | `tooltip` | `String` | Tooltip text | -[Run Code](/) +[Run Code](/Configuration.layers) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -882,7 +882,7 @@ var art = new Artplayer({ Or you can add it dynamically after instantiation: -[Run Code](/) +[Run Code](/Configuration.layers) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -920,7 +920,7 @@ Custom contextmenu, The type of layer is an object or function | `mounted` | `Function` | Callback after mounted | | `tooltip` | `String` | Tooltip text | -[Run Code](/) +[Run Code](/Configuration.contextmenu) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -941,7 +941,7 @@ var art = new Artplayer({ Or you can add it dynamically after instantiation: -[Run Code](/) +[Run Code](/Configuration.contextmenu) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -978,7 +978,7 @@ Custom controls, The type of controls is an object or function | `position` | `String` | The position where the controller appears: `top`, `left`, `right` | | `tooltip` | `String` | Tooltip text | -[Run Code](/) +[Run Code](/Configuration.controls) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1002,7 +1002,7 @@ var art = new Artplayer({ Or you can add it dynamically after instantiation: -[Run Code](/) +[Run Code](/Configuration.controls) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1030,7 +1030,7 @@ art.controls.add({ Custom plugins, The type of plugin is a function -[Run Code](/) +[Run Code](/Configuration.plugins) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1059,7 +1059,7 @@ art.plugins.myPlugin.doSomething(); Or you can add it dynamically after instantiation: -[Run Code](/) +[Run Code](/Configuration.plugins) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1095,7 +1095,7 @@ art.plugins.myPlugin.doSomething(); | `isFocus` | `Boolean` | Return to focus state | | `destroy` | `Function` | Destroy instance, will not remove dom by default | -[Run Code](/) +[Run Code](/Properties.instance) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1159,7 +1159,7 @@ art.seek === art.player.seek; | `muted` | `Boolean` | `Getter` and `Setter` of the muted | | `url` | `String` | `Getter` of the video url | -[Run Code](/) +[Run Code](/Properties.player) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1185,7 +1185,7 @@ The player will automatically add a `localStorage` object named `artplayer_setti | `del` | `Function` | Delete a storage | | `clean` | `Function` | Clean all storage | -[Run Code](/) +[Run Code](/Properties.storage) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1207,7 +1207,7 @@ The current support i18n has: `en`, `zh-cn`, `zh-tw` | `get` | `Function` | Get the a i18n value | | `update` | `Function` | Pass in a parameter for merging | -[Run Code](/) +[Run Code](/Properties.i18n) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1241,7 +1241,7 @@ console.log(art.i18n.get('Language')); | `show` | `Function` | Show a message | | `hide` | `Function` | Hide message | -[Run Code](/) +[Run Code](/Properties.notice) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1273,7 +1273,7 @@ Agent for managing native events | `loadImg` | `Function` | Determine whether to finish the picture | | `destroy` | `Function` | Destroy all events | -[Run Code](/) +[Run Code](/Properties.events) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1299,7 +1299,7 @@ Layer manager, and every layer has `show` and `hide` funciton | `add` | `Function` | Dynamically add a layer | | `show` | `setter` | Show or hide | -[Run Code](/) +[Run Code](/Properties.layers) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1330,7 +1330,7 @@ Controls manager, and every control has `show` setter | `add` | `Function` | Dynamically add a control | | `show` | `setter` | Show or hide | -[Run Code](/) +[Run Code](/Properties.controls) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1362,7 +1362,7 @@ Contextmenu manager, and every contextmenu has `show` setter | `add` | `Function` | Dynamically add a contextmenu | | `show` | `setter` | Show or hide | -[Run Code](/) +[Run Code](/Properties.contextmenu) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1391,7 +1391,7 @@ art.contextmenu.add({ | `switch` | `Function` | Switch subtitle | | `url` | `getter` | get subtitle url | -[Run Code](/) +[Run Code](/Properties.subtitle) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1465,7 +1465,7 @@ Setting manager, and every setting has `show` and `hide` funciton | `add` | `Function` | Dynamically add a setting | | `show` | `setter` | Show or hide | -[Run Code](/) +[Run Code](/Properties.setting) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; @@ -1497,7 +1497,7 @@ Plugins manager | --------- | ---------- | ------------------------ | | `add` | `Function` | Dynamically add a plugin | -[Run Code](/) +[Run Code](/Properties.plugins) ```js var url = 'https://zhw2590582.github.io/assets-cdn'; diff --git a/package.json b/package.json index 07d9a41aa..8be3d9163 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "start": "npx cross-env NODE_ENV=development && npx servor docs index.html 8080 5000", "build": "npx cross-env NODE_ENV=production node ./scripts/build.js", "build:all": "npm run build all && git add . && git commit -m \"build all packages\" -n ", - "test": "npx mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'", + "test": "node ./scripts/creatTestFromDoc.js && npx mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'", "lint": "npx eslint packages/*/src", "sizereport": "npx sizereport --config" }, diff --git a/scripts/creatTestFromDoc.js b/scripts/creatTestFromDoc.js new file mode 100644 index 000000000..68204109e --- /dev/null +++ b/scripts/creatTestFromDoc.js @@ -0,0 +1,40 @@ +const fs = require('fs'); +const path = require('path'); +const logger = require('./logger'); + +try { + const documentText = fs.readFileSync(path.resolve(__dirname, '../docs/document/README.md'), 'utf-8'); + const jsTests = documentText.match(/\[Run Code\]\(\/([\s\S]*?)\)\n\n\`{3}js([\s\S]*?)\`{3}/g); + const jsBlocks = jsTests.map(item => { + const result = item.match(/\[Run Code\]\(\/([\s\S]*)\)\n\n\`{3}js([\s\S]*?)\`{3}/); + return { + name: result[1], + code: result[2], + }; + }); + + fs.writeFileSync( + path.resolve(__dirname, '../test/document.test.js'), + ` +describe('Option', function() { + afterEach(function() { + [...Artplayer.instances].forEach(art => { + art.destroy(true); + }); + }); + + ${jsBlocks + .map(item => { + return ` + it(\`${item.name}\`, function() { + ${item.code} + }); + `; + }) + .join('\n')}; +}); + `, + ); +} catch (error) { + logger.fatal(error); +} diff --git a/test/document.test.js b/test/document.test.js new file mode 100644 index 000000000..c3252156e --- /dev/null +++ b/test/document.test.js @@ -0,0 +1,1073 @@ + +describe('Option', function() { + afterEach(function() { + [...Artplayer.instances].forEach(art => { + art.destroy(true); + }); + }); + + + it(`Configuration.container`, function() { + +var url = 'https://zhw2590582.github.io/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + // container: document.querySelector('.artplayer-app'), + url: url + '/video/one-more-time-one-more-chance-480p.mp4', +}); + + }); + + + it(`Configuration.url`, 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', + // url: url + '/video/one-more-time-one-more-chance-480p.ogg', + // url: url + '/video/one-more-time-one-more-chance-480p.webm', +}); + + }); + + + it(`Configuration.type`, 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.flv', + type: 'flv', +}); + + }); + + + it(`Configuration.customType`, 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.flv', + type: 'flv', + customType: { + flv: function(video, url, art) { + // video: The video element + // url: The video url + // art: The Artplayer instance + } + } +}); + + }); + + + it(`Configuration.poster`, 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', + poster: url + '/image/one-more-time-one-more-chance-poster.jpg', +}); + + }); + + + it(`Configuration.title`, 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', + title: '【新海诚动画】『秒速5センチメートル』', +}); + + }); + + + it(`Configuration.volume`, 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', + volume: 0.5, +}); + + }); + + + it(`Configuration.muted`, 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', + muted: true, +}); + + }); + + + it(`Configuration.autoplay`, 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', + autoplay: true, +}); + + }); + + + it(`Configuration.autoSize`, function() { + +// Zoom browser window +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', + autoSize: true, +}); + + }); + + + it(`Configuration.loop`, 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', + loop: true, +}); + + }); + + + it(`Configuration.playbackRate`, 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', + playbackRate: true, +}); + + }); + + + it(`Configuration.aspectRatio`, 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', + aspectRatio: true, +}); + + }); + + + it(`Configuration.screenshot`, 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', + screenshot: true, + + // Optional + moreVideoAttr: { + crossOrigin: 'anonymous', + }, +}); + + }); + + + it(`Configuration.setting`, 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', + setting: true, +}); + + }); + + + it(`Configuration.pip`, 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', + pip: true, +}); + + }); + + + it(`Configuration.fullscreen`, 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', + fullscreen: true, +}); + + }); + + + it(`Configuration.fullscreenWeb`, 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', + fullscreenWeb: true, +}); + + }); + + + it(`Configuration.mutex`, 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', + mutex: true, +}); + + }); + + + it(`Configuration.hotkey`, 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', + hotkey: true, +}); + + }); + + + it(`Configuration.lang`, 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', + lang: 'en', +}); + + }); + + + it(`Configuration.icons`, 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', + icons: { + loading: '', + state: '', + play: '', + pause: '', + volume: '', + volumeClose: '', + subtitle: '', + screenshot: '', + setting: '', + fullscreen: '', + fullscreenWeb: '', + pip: '', + prev: '', + next: '', + }, +}); + + }); + + + it(`Configuration.theme`, 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', + theme: '#ffad00', +}); + + }); + + + it(`Configuration.subtitleOffset`, 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', + subtitle: { + url: url + '/subtitle/one-more-time-one-more-chance.srt', + }, + setting: true, + subtitleOffset: true, +}); + + }); + + + it(`Configuration.miniProgressBar`, 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', + miniProgressBar: true, +}); + + }); + + + it(`Configuration.localVideo`, 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', + localVideo: true, + controls: [ + { + name: 'preview', + position: 'right', + html: 'OPEN VIDEO', + mounted: $preview => { + art.plugins.localVideo.attach($preview); + }, + }, + ], +}); + + }); + + + it(`Configuration.localSubtitle`, 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', + localSubtitle: true, + controls: [ + { + name: 'preview', + position: 'right', + html: 'OPEN SUBTITLE', + mounted: $preview => { + art.plugins.localSubtitle.attach($preview); + }, + }, + ], +}); + + }); + + + it(`Configuration.autoPip`, 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', + autoPip: true, +}); + + }); + + + it(`Configuration.networkMonitor`, 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', + networkMonitor: true, +}); + +// Is the ratio of the time the video is blocked to the time the video has been played. +// For example, when the ratio is equal to 0.3, it means that every 10 seconds of sampling time, it is blocked for three seconds. + +let notice = false; +art.on('networkMonitor', ratio => { + if (ratio >= 0.5 && !notice) { + notice = true; + console.log('Current network condition is not good'); + } +}); + +// Modify sampling time, the unit is milliseconds, default 10 seconds. +art.plugins.networkMonitor.sample(30000); + + }); + + + it(`Configuration.subtitle`, 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', + subtitle: { + url: url + '/subtitle/one-more-time-one-more-chance.srt', + style: { + color: '#03A9F4', + 'font-size': '30px', + }, + }, +}); + + }); + + + it(`Configuration.thumbnails`, 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', + thumbnails: { + url: url + '/image/one-more-time-one-more-chance-thumbnails.png', + number: 100, + width: 160, + height: 90, + column: 10, + }, +}); + + }); + + + it(`Configuration.moreVideoAttr`, 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', + moreVideoAttr: { + 'webkit-playsinline': true, + playsinline: true, + }, +}); + + }); + + + it(`Configuration.quality`, 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', + quality: [ + { + default: true, + name: 'SD 480P', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + }, + { + name: 'HD 720P', + url: url + '/video/one-more-time-one-more-chance-720p.mp4', + }, + ], +}); + + }); + + + it(`Configuration.highlight`, 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', + highlight: [ + { + time: 60, + text: 'One more chance', + }, + { + time: 120, + text: '谁でもいいはずなのに', + }, + { + time: 180, + text: '夏の想い出がまわる', + }, + { + time: 240, + text: 'こんなとこにあるはずもないのに', + }, + { + time: 300, + text: '－－终わり－－', + }, + ], +}); + + }); + + + it(`Configuration.layers`, 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', + layers: [ + { + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + }, + ], +}); + + }); + + + it(`Configuration.layers`, 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.layers.add({ + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, +}); + + }); + + + 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', + contextmenu: [ + { + html: 'Custom menu', + click: function(contextmenu) { + console.info('You clicked on the custom menu'); + contextmenu.show = false; + }, + }, + ], +}); + + }); + + + 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'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + controls: [ + { + name: 'myController', + position: 'right', + index: 10, + html: 'myController', + tooltip: 'This is my controller', + click: function() { + console.log('myController'); + }, + }, + ], +}); + + }); + + + 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'; +var art = new Artplayer({ + container: '.artplayer-app', + 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.info('Do something here...'); + }, + }; + }, + ], +}); + +// Call plugin from the outside +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'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', +}); + +console.log('isFocus', art.isFocus); +console.log('isPlaying', art.isPlaying); + +setTimeout(function() { + // remove dom + art.destroy(); + + // keep dom + // art.destroy(false); +}, 1000); + + }); + + + it(`Properties.player`, 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', () => { + art.player.seek = 5; + art.player.screenshot(); +}); + + }); + + + it(`Properties.storage`, 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.storage.set('your-key', 'your-value'); +console.log(art.storage.get('your-key')); + + }); + + + it(`Properties.i18n`, 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', + lang: 'jp', +}); + +console.log(art.i18n.get('Play')); +art.i18n.update({ + 'zh-cn': { + Language: '简体', + }, + 'zh-tw': { + Language: '繁體', + }, + jp: { + Language: '日文', + }, +}); +console.log(art.i18n.get('Language')); + + }); + + + it(`Properties.notice`, 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', +}); + +// 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); + + }); + + + it(`Properties.events`, 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', +}); + +var target = document.querySelector('body'); +art.events.proxy(target, 'click', function(e) { + console.log('body click'); +}); + + }); + + + it(`Properties.layers`, 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.layers.add({ + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, +}); + + }); + + + it(`Properties.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(`Properties.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(`Properties.subtitle`, 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', + subtitle: { + url: url + '/subtitle/one-more-time-one-more-chance.srt', + }, + controls: [ + { + position: 'right', + index: 10, + html: 'subtitle 01', + click: function() { + art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt 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'); + }, + }, + ], +}); + + }); + + + it(`Properties.setting`, 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', + setting: true, +}); + +art.setting.add({ + html: 'Your Setting', + name: 'yourSetting', +}); + +// Show the setting +art.setting.show = true; + +// Hide the setting +art.setting.show = false; + + }); + + + it(`Properties.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(`lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js`, function() { + +var url = 'https://zhw2590582.github.io/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: url + '/video/one-more-time-one-more-chance-480p.flv', + customType: { + flv: function(video, url) { + const flvPlayer = flvjs.createPlayer({ + type: 'flv', + url: url, + }); + flvPlayer.attachMediaElement(video); + flvPlayer.load(); + }, + }, +}); + + }); + + + it(`lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js`, function() { + +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', + customType: { + m3u8: function(video, url) { + var hls = new Hls(); + hls.loadSource(url); + hls.attachMedia(video); + }, + }, +}); + + }); + + + it(`lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js`, function() { + +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd', + customType: { + mpd: function(video, url) { + var player = dashjs.MediaPlayer().create(); + player.initialize(video, url, true); + }, + }, +}); + + }); + + + it(`lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js`, function() { + +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', + customType: { + mpd: function(video, url) { + shaka.polyfill.installAll(); + var player = new shaka.Player(video); + player.load(url); + }, + }, +}); + + }); + + + it(`lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js`, function() { + +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: + 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4', + type: 'torrent', + customType: { + torrent: function(video, url, art) { + var client = new WebTorrent(); + art.loading.show = true; + client.add(url, function(torrent) { + var file = torrent.files[0]; + file.renderTo(video, { + autoplay: true, + }); + }); + }, + }, +}); + + }); + ; +}); + \ No newline at end of file diff --git a/test/index.html b/test/index.html index b4b2abe17..cfc97d862 100644 --- a/test/index.html +++ b/test/index.html @@ -40,6 +40,7 @@ +