diff --git a/docs/docs/README.md b/docs/docs/README.md
index 2b6b9fac7..d2151bbf1 100644
--- a/docs/docs/README.md
+++ b/docs/docs/README.md
@@ -7,6 +7,7 @@ Install with `npm`
 ```
 $ npm install artplayer
 ```
+
 Or install with `yarn`
 
 ```
@@ -35,8 +36,8 @@ Will expose the global variable to `window.Artplayer`.
 
 ```js
 var art = new Artplayer({
-  container: '.artplayer-app',
-  url: 'path/to/video.mp4'
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
 });
 ```
 
@@ -44,9 +45,9 @@ var art = new Artplayer({
 
 ## container
 
-- Type: `String、Element`
-- Default: `#artplayer`
-- Required: `true`
+-   Type: `String、Element`
+-   Default: `#artplayer`
+-   Required: `true`
 
 DOM container of the player
 
@@ -55,9 +56,9 @@ DOM container of the player
 ```js
 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'
+    container: '.artplayer-app',
+    // container: document.querySelector('.artplayer-app'),
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
 });
 ```
 
@@ -65,16 +66,16 @@ You may need to initialize a size for the container element, like:
 
 ```css
 .artplayer-app {
-  width: 400px;
-  height: 300px;
+    width: 400px;
+    height: 300px;
 }
 ```
 
 ## url
 
-- Type: `String`
-- Default: `''`
-- Required: `true`
+-   Type: `String`
+-   Default: `''`
+-   Required: `true`
 
 Video source url, Three video file formats are supported: mp4, ogg, webm
 
@@ -83,17 +84,17 @@ 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'
-  // url: url + '/video/one-more-time-one-more-chance-480p.ogg',
-  // url: url + '/video/one-more-time-one-more-chance-480p.webm',
+    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',
 });
 ```
 
 ## type
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Specify the format for the `url`, use with `customType`
 
@@ -110,8 +111,8 @@ var art = new Artplayer({
 
 ## customType
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 Customize when loading third-party libraries
 
@@ -135,8 +136,8 @@ var art = new Artplayer({
 
 ## poster
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Video poster image url
 
@@ -145,16 +146,16 @@ Video poster image url
 ```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',
-  poster: url + '/image/one-more-time-one-more-chance-poster.jpg'
+    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',
 });
 ```
 
 ## title
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Video title, will be shown in screenshot file name and pip mode
 
@@ -163,16 +164,16 @@ Video title, will be shown in screenshot file name and pip mode
 ```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',
-  title: '【新海诚动画】『秒速5センチメートル』'
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    title: '【新海诚动画】『秒速5センチメートル』',
 });
 ```
 
 ## volume
 
-- Type: `Number`
-- Default: `0.7`
+-   Type: `Number`
+-   Default: `0.7`
 
 Default volume, player will cache the last volume, which may be overwritten
 
@@ -181,16 +182,16 @@ Default volume, player will cache the last volume, which may be overwritten
 ```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',
-  volume: 0.5
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    volume: 0.5,
 });
 ```
 
 ## muted
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to mute by default
 
@@ -199,16 +200,16 @@ Whether to mute by default
 ```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',
-  muted: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    muted: true,
 });
 ```
 
 ## autoplay
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to play automatically, sometimes it doesn't necessarily succeed
 
@@ -219,16 +220,16 @@ More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2
 ```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',
-  autoplay: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    autoplay: true,
 });
 ```
 
 ## autoSize
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Keep the original video aspect ratio and automatically zoom
 
@@ -238,16 +239,16 @@ Keep the original video aspect ratio and automatically zoom
 // Zoom browser window
 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
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    autoSize: true,
 });
 ```
 
 ## loop
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Automatic loop playback
 
@@ -256,16 +257,16 @@ Automatic loop playback
 ```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',
-  loop: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    loop: true,
 });
 ```
 
 ## playbackRate
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show playback rate controller in the contextmenu
 
@@ -274,16 +275,16 @@ Whether to show playback rate controller in the contextmenu
 ```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',
-  playbackRate: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    playbackRate: true,
 });
 ```
 
 ## aspectRatio
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show aspect ratio controller in the contextmenu
 
@@ -292,16 +293,16 @@ Whether to show aspect ratio controller in the contextmenu
 ```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',
-  aspectRatio: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    aspectRatio: true,
 });
 ```
 
 ## screenshot
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show screenshot controller in the bottom
 
@@ -310,16 +311,16 @@ Whether to show screenshot controller in the bottom
 ```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',
-  screenshot: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    screenshot: true,
 });
 ```
 
 ## setting
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show setting controller in the bottom
 
@@ -328,16 +329,16 @@ Whether to show setting controller in the bottom
 ```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',
-  setting: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    setting: true,
 });
 ```
 
 ## pip
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show pip controller in the bottom, it will give priority to the native picture-in-picture feature.
 
@@ -348,16 +349,16 @@ More info: [picture-in-picture](https://developers.google.com/web/updates/2017/0
 ```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',
-  pip: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    pip: true,
 });
 ```
 
 ## fullscreen
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show window fullscreen controller in the bottom
 
@@ -366,16 +367,16 @@ Whether to show window fullscreen controller in the bottom
 ```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',
-  fullscreen: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    fullscreen: true,
 });
 ```
 
 ## fullscreenWeb
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to show web page fullscreen controller in the bottom
 
@@ -384,16 +385,16 @@ Whether to show web page fullscreen controller in the bottom
 ```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',
-  fullscreenWeb: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    fullscreenWeb: true,
 });
 ```
 
 ## mutex
 
-- Type: `Boolean`
-- Default: `true`
+-   Type: `Boolean`
+-   Default: `true`
 
 Player mutually exclusive, only one player can play at a time
 
@@ -402,16 +403,16 @@ Player mutually exclusive, only one player can play at a time
 ```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',
-  mutex: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    mutex: true,
 });
 ```
 
 ## hotkey
 
-- Type: `Boolean`
-- Default: `true`
+-   Type: `Boolean`
+-   Default: `true`
 
 Whether to use hotkey
 
@@ -420,9 +421,9 @@ Whether to use hotkey
 ```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',
-  hotkey: true
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    hotkey: true,
 });
 ```
 
@@ -436,8 +437,8 @@ var art = new Artplayer({
 
 ## lang
 
-- Type: `String`
-- Default: `navigator.language.toLowerCase()`
+-   Type: `String`
+-   Default: `navigator.language.toLowerCase()`
 
 Default display language: en, zh-cn, zh-tw
 
@@ -446,16 +447,16 @@ Default display language: en, zh-cn, zh-tw
 ```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'
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    lang: 'en',
 });
 ```
 
 ## icons
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 Replace the default icon, The currently configurable icons are: `loading`、`playBig`
 
@@ -464,19 +465,19 @@ Replace the default icon, The currently configurable icons are: `loading`、`pla
 ```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',
-  icons: {
-    loading: 'Loading...',
-    playBig: 'PLAY',
-  }
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    icons: {
+        loading: 'Loading...',
+        playBig: 'PLAY',
+    },
 });
 ```
 
 ## theme
 
-- Type: `String`
-- Default: `#f00`
+-   Type: `String`
+-   Default: `#f00`
 
 Default display language: en, zh-cn, zh-tw
 
@@ -485,30 +486,30 @@ Default display language: en, zh-cn, zh-tw
 ```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'
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    theme: '#ffad00',
 });
 ```
 
 ## subtitle
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 Custom subtitle
 
 ### url
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Subtitle url, support vtt and srt format
 
 ### style
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 Subtitle style
 
@@ -517,56 +518,56 @@ Subtitle style
 ```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'
-    }
-  }
+    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: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 Custom thumbnails in the progress bar with lazy load
 
 ### style
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Thumbnails image url
 
 ### number
 
-- Type: `Number`
-- Default: `60`
+-   Type: `Number`
+-   Default: `60`
 
 Thumbnails number
 
 ### width
 
-- Type: `Number`
-- Default: `160`
+-   Type: `Number`
+-   Default: `160`
 
 Thumbnails width
 
 ### height
 
-- Type: `Number`
-- Default: `90`
+-   Type: `Number`
+-   Default: `90`
 
 Thumbnails height
 
 ### column
 
-- Type: `Number`
-- Default: `10`
+-   Type: `Number`
+-   Default: `10`
 
 Thumbnails column
 
@@ -575,20 +576,20 @@ Thumbnails column
 ```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
-  }
+    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'}`
+-   Type: `Object`
+-   Default: `{'controls': false,'preload': 'auto'}`
 
 More video Attributes, these properties will be written directly to the video element
 
@@ -597,40 +598,40 @@ More video Attributes, these properties will be written directly to the video el
 ```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
-  }
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsinline: true,
+    },
 });
 ```
 
 ## quality
 
-- Type: `Array`
-- Default: `[]`
+-   Type: `Array`
+-   Default: `[]`
 
 Custom quality, The type of quality is an object
 
 ### default
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether the default quality, if not specified, the first quality will be taken
 
 ### name
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Quality name
 
 ### url
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 Quality url
 
@@ -639,40 +640,40 @@ Quality url
 ```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'
-    }
-  ]
+    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: `[]`
+-   Type: `Array`
+-   Default: `[]`
 
 Custom highlight, The type of highlight is an object
 
 ### time
 
-- Type: `Number`
-- Default: `0`
+-   Type: `Number`
+-   Default: `0`
 
 highlight seconds
 
 ### text
 
-- Type: `String`
-- Default: `''`
+-   Type: `String`
+-   Default: `''`
 
 highlight text
 
@@ -681,86 +682,86 @@ highlight text
 ```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: '－－终わり－－'
-    }
-  ]
+    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: `[]`
+-   Type: `Array`
+-   Default: `[]`
 
 Custom layer, The type of layer is an object or function
 
 ### disable
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to disable
 
 ### name
 
-- Type: `String`
-- Default: `layer${id}`
+-   Type: `String`
+-   Default: `layer${id}`
 
 The unique name , used for the class name
 
 ### index
 
-- Type: `Number`
-- Default: `${id}`
+-   Type: `Number`
+-   Default: `${id}`
 
 The unique index, used for the priority level
 
 ### html
 
-- Type: `String`、`Element`
-- Default: `''`
+-   Type: `String`、`Element`
+-   Default: `''`
 
 The dom element
 
 ### style
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 The style object
 
 ### click
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Click event
 
 ### mounted
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Callback after mounted
 
@@ -769,75 +770,75 @@ Callback after mounted
 ```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'
-      }
-    }
-  ]
+    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: `[]`
+-   Type: `Array`
+-   Default: `[]`
 
 Custom contextmenu, The type of layer is an object or function
 
 ### disable
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to disable
 
 ### name
 
-- Type: `String`
-- Default: `layer${id}`
+-   Type: `String`
+-   Default: `layer${id}`
 
 The unique name , used for the class name
 
 ### index
 
-- Type: `Number`
-- Default: `${id}`
+-   Type: `Number`
+-   Default: `${id}`
 
 The unique index, used for the priority level
 
 ### html
 
-- Type: `String`、`Element`
-- Default: `''`
+-   Type: `String`、`Element`
+-   Default: `''`
 
 The dom element
 
 ### style
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 The style object
 
 ### click
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Click event
 
 ### mounted
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Callback after mounted
 
@@ -846,80 +847,80 @@ Callback after mounted
 ```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();
-      }
-    }
-  ]
+    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: `[]`
+-   Type: `Array`
+-   Default: `[]`
 
 Custom controls, The type of controls is an object or function
 
 ### disable
 
-- Type: `Boolean`
-- Default: `false`
+-   Type: `Boolean`
+-   Default: `false`
 
 Whether to disable
 
 ### name
 
-- Type: `String`
-- Default: `layer${id}`
+-   Type: `String`
+-   Default: `layer${id}`
 
 The unique name , used for the class name
 
 ### index
 
-- Type: `Number`
-- Default: `${id}`
+-   Type: `Number`
+-   Default: `${id}`
 
 The unique index, used for the priority level
 
 ### html
 
-- Type: `String`、`Element`
-- Default: `''`
+-   Type: `String`、`Element`
+-   Default: `''`
 
 The dom element
 
 ### style
 
-- Type: `Object`
-- Default: `{}`
+-   Type: `Object`
+-   Default: `{}`
 
 The style object
 
 ### click
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Click event
 
 ### mounted
 
-- Type: `Function`
-- Default: `undefined`
+-   Type: `Function`
+-   Default: `undefined`
 
 Callback after mounted
 
 ### position
 
-- Type: `String`
-- Default: `undefined`
+-   Type: `String`
+-   Default: `undefined`
 
 The position where the controller appears: top, left, right
 
@@ -928,31 +929,69 @@ The position where the controller appears: top, left, right
 ```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',
-  controls: [
-    function myController(art) {
-      return {
-        name: 'myController',
-        position: 'right',
-        index: 10,
-        html: 'myController',
-        click: function() {
-          console.log('myController');
-        }
-      }
-    }
-  ]
+    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',
+                click: function() {
+                    console.log('myController');
+                },
+            };
+        },
+    ],
 });
 ```
 
+## plugins
+
+-   Type: `Array`
+-   Default: `[]`
+
+Custom plugins, The type of plugin is a function
+
+[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',
+    plugins: [
+        function myPlugin(art) {
+            return {
+                // This exposes plugin properties or methods for others to use. Like:
+                something: 'something',
+                doSomething: function() {
+                    console.log('Do something here...');
+                },
+            };
+        },
+    ],
+});
+
+art.plugins.myPlugin.doSomething();
+```
+
 # Instance properties
 
 > TODO...
 
 # Class static properties
 
-> TODO...
+All properties are read only
+
+| propertie             | Description               |
+| --------------------- | ------------------------- |
+| `Artplayer.version`   | Version Information       |
+| `Artplayer.config`    | Configuration information |
+| `Artplayer.utils`     | Utils function            |
+| `Artplayer.DEFAULTS`  | Default option            |
+| `Artplayer.instances` | Instance collection       |
 
 # Event
 
@@ -962,7 +1001,7 @@ var art = new Artplayer({
 
 ## flv.js
 
-- HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
+-   HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
 
 [Run Code](/lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js)
 
@@ -986,7 +1025,7 @@ var art = new Artplayer({
 
 ## hls.js
 
-- HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
+-   HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
 
 [Run Code](/lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js)
 
@@ -1006,7 +1045,7 @@ var art = new Artplayer({
 
 ## dash.js
 
-- HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
+-   HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
 
 [Run Code](/lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js)
 
@@ -1025,7 +1064,7 @@ var art = new Artplayer({
 
 ## shaka-player
 
-- HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
+-   HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
 
 [Run Code](/lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js)
 
@@ -1045,25 +1084,26 @@ var art = new Artplayer({
 
 ## webtorrent
 
-- HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
+-   HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
 
 [Run Code](/lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js)
 
 ```js
 var art = new Artplayer({
     container: '.artplayer-app',
-    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',
+    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) {
+        torrent: function(video, url, art) {
             var client = new WebTorrent();
             art.loading.show();
-            client.add(url, function (torrent) {
+            client.add(url, function(torrent) {
                 var file = torrent.files[0];
                 file.renderTo(video, {
-                    autoplay: true
-                })
-            })
+                    autoplay: true,
+                });
+            });
         },
     },
 });