update docs

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'
 });
 ```
 
@@ -77,7 +77,7 @@ Video source url, Three video file formats are supported: mp4, ogg, webm
 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',
+  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: `<img style="width: 100px" src="${url}/image/your-name.png">`,
+      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

docs/docs/index.html

@@ -15,6 +15,8 @@
     window.$docsify = {
       name: 'ArtPlayer',
       repo: 'zhw2590582/ArtPlayer',
+      maxLevel: 4,
+      subMaxLevel: 2,
       plugins: [window.runCode]
     }
   </script>