From b621061417a952b6ca2fe89404bf11490696e91d Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Tue, 20 Nov 2018 17:35:10 +0800 Subject: [PATCH] update docs --- docs/docs/README.md | 529 +++++++++++++++++++++++++++++++++++++++++-- docs/docs/index.html | 2 + 2 files changed, 512 insertions(+), 19 deletions(-) diff --git a/docs/docs/README.md b/docs/docs/README.md index 8b1f332ec..239aa6a87 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -50,7 +50,7 @@ var url = 'https://blog.zhw-island.com/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', + url: url + '/video/one-more-time-one-more-chance-480p.mp4' }); ``` @@ -76,8 +76,8 @@ Video source url, Three video file formats are supported: mp4, ogg, webm ```js var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ - container: '.artplayer-app', - url: url + '/video/one-more-time-one-more-chance-480p.mp4', + 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', }); @@ -97,7 +97,7 @@ var url = 'https://blog.zhw-island.com/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', + poster: url + '/image/one-more-time-one-more-chance-poster.jpg' }); ``` @@ -115,7 +115,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - title: '【新海诚动画】『秒速5センチメートル』', + title: '【新海诚动画】『秒速5センチメートル』' }); ``` @@ -133,7 +133,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - volume: 0.5, + volume: 0.5 }); ``` @@ -151,7 +151,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - autoplay: true, + autoplay: true }); ``` @@ -170,7 +170,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - autoSize: true, + autoSize: true }); ``` @@ -188,7 +188,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - loop: true, + loop: true }); ``` @@ -206,7 +206,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - playbackRate: true, + playbackRate: true }); ``` @@ -224,7 +224,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - aspectRatio: true, + aspectRatio: true }); ``` @@ -242,7 +242,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - screenshot: true, + screenshot: true }); ``` @@ -260,7 +260,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - setting: true, + setting: true }); ``` @@ -278,7 +278,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - pip: true, + pip: true }); ``` @@ -296,7 +296,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - fullscreen: true, + fullscreen: true }); ``` @@ -314,14 +314,14 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - fullscreenWeb: true, + fullscreenWeb: true }); ``` ## mutex - Type: `Boolean` -- Default: `false` +- Default: `true` Player mutually exclusive, only one player can play at a time @@ -332,7 +332,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - mutex: true, + mutex: true }); ``` @@ -350,12 +350,503 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', - hotkey: true, + hotkey: true +}); +``` + +| Key | Description | +| ------- | --------------- | +| `↑` | Increase volume | +| `↓` | Decrease volume | +| `←` | Seek backward | +| `→` | Seek forward | +| `space` | Toggle playback | + +## lang + +- Type: `String` +- Default: `navigator.language.toLowerCase()` + +Default display language: en, zh-cn, zh-tw + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + lang: 'en' +}); +``` + +## theme + +- Type: `String` +- Default: `#f00` + +Default display language: en, zh-cn, zh-tw + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + theme: '#ffad00' +}); +``` + +## subtitle + +- Type: `Object` +- Default: `{}` + +Custom subtitle + +### url + +- Type: `String` +- Default: `` + +Subtitle url, support vtt and srt format + +### style + +- Type: `Object` +- Default: `{}` + +Subtitle style + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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' + } + } +}); +``` + +## thumbnails + +- Type: `Object` +- Default: `{}` + +Custom thumbnails in the progress bar with lazy load + +### style + +- Type: `String` +- Default: `` + +Thumbnails image url + +### number + +- Type: `Number` +- Default: `60` + +Thumbnails number + +### width + +- Type: `Number` +- Default: `160` + +Thumbnails width + +### height + +- Type: `Number` +- Default: `90` + +Thumbnails height + +### column + +- Type: `Number` +- Default: `10` + +Thumbnails column + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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', + width: 190, + height: 107 + } +}); +``` + +## moreVideoAttr + +- Type: `Object` +- Default: `{'controls': false,'preload': 'auto'}` + +More video Attributes, these properties will be written directly to the video element + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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 + } +}); +``` + +## quality + +- Type: `Array` +- Default: `[]` + +Custom quality, The type of quality is an object + +### default + +- Type: `Boolean` +- Default: `false` + +Whether the default quality, if not specified, the first quality will be taken + +### name + +- Type: `String` +- Default: `` + +Quality name + +### url + +- Type: `String` +- Default: `` + +Quality url + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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' + } + ] +}); +``` + +## highlight + +- Type: `Array` +- Default: `[]` + +Custom highlight, The type of highlight is an object + +### time + +- Type: `Number` +- Default: `0` + +highlight seconds + +### text + +- Type: `String` +- Default: `` + +highlight text + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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: '－－终わり－－' + } + ] +}); +``` + +## layers + +- Type: `Array` +- Default: `[]` + +Custom layer, The type of layer is an object or function + +### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +### name + +- Type: `String` +- Default: `layer${id}` + +The unique name , used for the class name + +### index + +- Type: `Number` +- Default: `${id}` + +The unique index, used for the priority level + +### html + +- Type: `String`、`Element` +- Default: `` + +The dom element + +### style + +- Type: `Object` +- Default: `{}` + +The style object + +### click + +- Type: `Function` +- Default: `undefined` + +Click event + +### callback + +- Type: `Function` +- Default: `undefined` + +Callback after mounted + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/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' + } + } + ] +}); +``` + +## contextmenu + +- Type: `Array` +- Default: `[]` + +Custom contextmenu, The type of layer is an object or function + +### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +### name + +- Type: `String` +- Default: `layer${id}` + +The unique name , used for the class name + +### index + +- Type: `Number` +- Default: `${id}` + +The unique index, used for the priority level + +### html + +- Type: `String`、`Element` +- Default: `` + +The dom element + +### style + +- Type: `Object` +- Default: `{}` + +The style object + +### click + +- Type: `Function` +- Default: `undefined` + +Click event + +### callback + +- Type: `Function` +- Default: `undefined` + +Callback after mounted + +[Run Code](/) + +```js +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + contextmenu: [ + { + html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ', + click: function() { + document.querySelector('.video-wrap').classList.toggle('dark'); + this.hide(); + } + } + ] +}); +``` + +## controls + +- Type: `Array` +- Default: `[]` + +Custom controls, The type of controls is an object + +### option + +- Type: `Object` +- Default: `{}` + +Instantiated an object property + +#### disable + +- Type: `Boolean` +- Default: `false` + +Whether to disable + +#### name + +- Type: `String` +- Default: `control${id}` + +The unique name, used for the class name + +#### index + +- Type: `Number` +- Default: `undefined` + +The unique index, used for the priority level + +#### position + +- Type: `String` +- Default: `undefined` + +The position where the controller appears: top, left, right + +[Run Code](/) + +```js +function MyController(option) { + this.option = option; +} + +MyController.prototype.apply = function(art, dom) { + dom.innerHTML = this.option.name; +}; + +var url = 'https://blog.zhw-island.com/assets-cdn'; +var art = new Artplayer({ + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + controls: [ + new MyController({ + name: 'myControllerLeft', + position: 'left', + index: 40 + }), + new MyController({ + name: 'myControllerRight', + position: 'right', + index: 10 + }) + ] }); ``` # API +## Instance properties + +> TODO... + +## Class static properties + > TODO... # Event diff --git a/docs/docs/index.html b/docs/docs/index.html index 116c8647a..65f3a765b 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -15,6 +15,8 @@ window.$docsify = { name: 'ArtPlayer', repo: 'zhw2590582/ArtPlayer', + maxLevel: 4, + subMaxLevel: 2, plugins: [window.runCode] }