Artplayer vitepress (#446)

* init * init * update * update * update * update * update * update * add i18n option * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update
2026-10-29 11:11:20 -08:00 · 2023-01-11 20:45:01 +08:00
1 parent 6a866f88c3
commit fa7954de0d
@@ -0,0 +1,41 @@
+// node_modules/vitepress/dist/client/theme-default/index.js
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/base.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
+import "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
+import VPBadge from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
+import Layout from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/Layout.vue";
+import NotFound from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/NotFound.vue";
+import { default as default2 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
+import { default as default3 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
+import { default as default4 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
+import { default as default5 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
+import { default as default6 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
+import { default as default7 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
+import { default as default8 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
+import { default as default9 } from "C:/Users/laozh/Desktop/github/ArtPlayer/packages/artplayer-vitepress/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
+var theme = {
+  Layout,
+  NotFound,
+  enhanceApp: ({ app }) => {
+    app.component("Badge", VPBadge);
+  }
+};
+var theme_default_default = theme;
+export {
+  default5 as VPDocAsideSponsors,
+  default3 as VPHomeFeatures,
+  default2 as VPHomeHero,
+  default4 as VPHomeSponsors,
+  default9 as VPTeamMembers,
+  default6 as VPTeamPage,
+  default8 as VPTeamPageSection,
+  default7 as VPTeamPageTitle,
+  theme_default_default as default
+};
+//# sourceMappingURL=@theme_index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../node_modules/vitepress/dist/client/theme-default/index.js"],
+  "sourcesContent": ["import './styles/fonts.css';\r\nimport './styles/vars.css';\r\nimport './styles/base.css';\r\nimport './styles/utils.css';\r\nimport './styles/components/custom-block.css';\r\nimport './styles/components/vp-code.css';\r\nimport './styles/components/vp-code-group.css';\r\nimport './styles/components/vp-doc.css';\r\nimport './styles/components/vp-sponsor.css';\r\nimport VPBadge from './components/VPBadge.vue';\r\nimport Layout from './Layout.vue';\r\nimport NotFound from './NotFound.vue';\r\nexport { default as VPHomeHero } from './components/VPHomeHero.vue';\r\nexport { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\r\nexport { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\r\nexport { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\r\nexport { default as VPTeamPage } from './components/VPTeamPage.vue';\r\nexport { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\r\nexport { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\r\nexport { default as VPTeamMembers } from './components/VPTeamMembers.vue';\r\nconst theme = {\r\n    Layout,\r\n    NotFound,\r\n    enhanceApp: ({ app }) => {\r\n        app.component('Badge', VPBadge);\r\n    }\r\n};\r\nexport default theme;\r\n"],
+  "mappings": ";AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgC;AACzC,IAAM,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY,CAAC,EAAE,IAAI,MAAM;AACrB,QAAI,UAAU,SAAS,OAAO;AAAA,EAClC;AACJ;AACA,IAAO,wBAAQ;",
+  "names": ["default"]
+}
@@ -0,0 +1,19 @@
+{
+  "hash": "7a49d08d",
+  "browserHash": "4df1cc4c",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "9fa186ee",
+      "needsInterop": false
+    },
+    "@theme/index": {
+      "src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
+      "file": "@theme_index.js",
+      "fileHash": "b4ca0e88",
+      "needsInterop": false
+    }
+  },
+  "chunks": {}
+}
@@ -0,0 +1 @@
+{"type":"module"}
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../node_modules/@vue/shared/dist/shared.esm-bundler.js", "../../../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js", "../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js", "../../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js", "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js"],
+  "sourcesContent": ["/**\n * Make a map and return a function for checking if a key\n * is in that map.\n * IMPORTANT: all calls of this function must be prefixed with\n * \\/\\*#\\_\\_PURE\\_\\_\\*\\/\n * So that rollup can tree-shake them if necessary.\n */\nfunction makeMap(str, expectsLowerCase) {\n    const map = Object.create(null);\n    const list = str.split(',');\n    for (let i = 0; i < list.length; i++) {\n        map[list[i]] = true;\n    }\n    return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];\n}\n\n/**\n * dev only flag -> name mapping\n */\nconst PatchFlagNames = {\n    [1 /* PatchFlags.TEXT */]: `TEXT`,\n    [2 /* PatchFlags.CLASS */]: `CLASS`,\n    [4 /* PatchFlags.STYLE */]: `STYLE`,\n    [8 /* PatchFlags.PROPS */]: `PROPS`,\n    [16 /* PatchFlags.FULL_PROPS */]: `FULL_PROPS`,\n    [32 /* PatchFlags.HYDRATE_EVENTS */]: `HYDRATE_EVENTS`,\n    [64 /* PatchFlags.STABLE_FRAGMENT */]: `STABLE_FRAGMENT`,\n    [128 /* PatchFlags.KEYED_FRAGMENT */]: `KEYED_FRAGMENT`,\n    [256 /* PatchFlags.UNKEYED_FRAGMENT */]: `UNKEYED_FRAGMENT`,\n    [512 /* PatchFlags.NEED_PATCH */]: `NEED_PATCH`,\n    [1024 /* PatchFlags.DYNAMIC_SLOTS */]: `DYNAMIC_SLOTS`,\n    [2048 /* PatchFlags.DEV_ROOT_FRAGMENT */]: `DEV_ROOT_FRAGMENT`,\n    [-1 /* PatchFlags.HOISTED */]: `HOISTED`,\n    [-2 /* PatchFlags.BAIL */]: `BAIL`\n};\n\n/**\n * Dev only\n */\nconst slotFlagsText = {\n    [1 /* SlotFlags.STABLE */]: 'STABLE',\n    [2 /* SlotFlags.DYNAMIC */]: 'DYNAMIC',\n    [3 /* SlotFlags.FORWARDED */]: 'FORWARDED'\n};\n\nconst GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +\n    'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +\n    'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt';\nconst isGloballyWhitelisted = /*#__PURE__*/ makeMap(GLOBALS_WHITE_LISTED);\n\nconst range = 2;\nfunction generateCodeFrame(source, start = 0, end = source.length) {\n    // Split the content into individual lines but capture the newline sequence\n    // that separated each line. This is important because the actual sequence is\n    // needed to properly take into account the full line length for offset\n    // comparison\n    let lines = source.split(/(\\r?\\n)/);\n    // Separate the lines and newline sequences into separate arrays for easier referencing\n    const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);\n    lines = lines.filter((_, idx) => idx % 2 === 0);\n    let count = 0;\n    const res = [];\n    for (let i = 0; i < lines.length; i++) {\n        count +=\n            lines[i].length +\n                ((newlineSequences[i] && newlineSequences[i].length) || 0);\n        if (count >= start) {\n            for (let j = i - range; j <= i + range || end > count; j++) {\n                if (j < 0 || j >= lines.length)\n                    continue;\n                const line = j + 1;\n                res.push(`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}|  ${lines[j]}`);\n                const lineLength = lines[j].length;\n                const newLineSeqLength = (newlineSequences[j] && newlineSequences[j].length) || 0;\n                if (j === i) {\n                    // push underline\n                    const pad = start - (count - (lineLength + newLineSeqLength));\n                    const length = Math.max(1, end > count ? lineLength - pad : end - start);\n                    res.push(`   |  ` + ' '.repeat(pad) + '^'.repeat(length));\n                }\n                else if (j > i) {\n                    if (end > count) {\n                        const length = Math.max(Math.min(end - count, lineLength), 1);\n                        res.push(`   |  ` + '^'.repeat(length));\n                    }\n                    count += lineLength + newLineSeqLength;\n                }\n            }\n            break;\n        }\n    }\n    return res.join('\\n');\n}\n\nfunction normalizeStyle(value) {\n    if (isArray(value)) {\n        const res = {};\n        for (let i = 0; i < value.length; i++) {\n            const item = value[i];\n            const normalized = isString(item)\n                ? parseStringStyle(item)\n                : normalizeStyle(item);\n            if (normalized) {\n                for (const key in normalized) {\n                    res[key] = normalized[key];\n                }\n            }\n        }\n        return res;\n    }\n    else if (isString(value)) {\n        return value;\n    }\n    else if (isObject(value)) {\n        return value;\n    }\n}\nconst listDelimiterRE = /;(?![^(]*\\))/g;\nconst propertyDelimiterRE = /:([^]+)/;\nconst styleCommentRE = /\\/\\*.*?\\*\\//gs;\nfunction parseStringStyle(cssText) {\n    const ret = {};\n    cssText\n        .replace(styleCommentRE, '')\n        .split(listDelimiterRE)\n        .forEach(item => {\n        if (item) {\n            const tmp = item.split(propertyDelimiterRE);\n            tmp.length > 1 && (ret[tmpLine truncated
+  "mappings": "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 truncated
+  "names": ["map", "val", "effect", "shouldTrack", "key", "effect", "isReadonly", "get", "set", "isShallow", "has", "mutableInstrumentations", "shallowInstrumentations", "readonlyInstrumentations", "shallowReadonlyInstrumentations", "ref", "self", "warn", "p", "_a", "version", "isModelListener", "raw", "emit", "render", "remove", "vnode", "parentComponent", "container", "anchor", "parent", "isSVG", "effect", "callHook", "hook", "key", "resolve", "ref", "instance", "has", "get", "set", "computed", "h", "hydrate", "createApp", "patchProp", "hasWarned", "next", "isShallow", "warn", "isBoolean", "e", "hydrate", "resolve", "def", "callHook", "h", "compile", "warn"]
+}
@@ -0,0 +1,140 @@
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+const config = {
+  base: '/document/',
+  outDir: '../../../docs/document',
+  title: 'Artplayer.js',
+  appearance: 'dark',
+  lastUpdated: true,
+  description: 'ArtPlayer.js is a modern and full featured HTML5 video player',
+  themeConfig: {
+    siteTitle: 'Artplayer.js',
+    logo: '/logo.png',
+    nav: [
+      { text: '中文版', link: '/' },
+      { text: 'English', link: '/en/', activeMatch: '/en/' },
+      { text: 'Online Editor', link: 'https://artplayer.org' },
+      { text: 'QQ群: 320881312', link: '#' },
+      {
+        text: '4.6.x',
+        items: [
+          { text: 'Changelog', link: 'https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md' },
+        ]
+      }
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/zhw2590582/ArtPlayer' },
+    ],
+    sidebar: {
+      '/': [
+        {
+          text: '开始',
+          collapsible: true,
+          items: [
+            { text: '安装使用', link: '/' },
+            { text: '基础选项', link: '/start/option' },
+            { text: '组件配置', link: '/start/component' },
+            { text: '设置面板', link: '/start/setting' },
+          ]
+        },
+        {
+          text: '高级',
+          collapsible: true,
+          items: [
+            { text: '实例属性', link: '/advanced/property' },
+            { text: '高级属性', link: '/advanced/built-in' },
+            { text: '静态属性', link: '/advanced/class' },
+            { text: '实例事件', link: '/advanced/event' },
+            { text: '编写插件', link: '/advanced/plugin' },
+          ]
+        },
+        {
+          text: '插件',
+          collapsible: true,
+          items: [
+            { text: '弹幕库', link: '/plugin/danmuku' },
+            { text: '视频广告', link: '/plugin/ads' },
+            { text: 'Iframe 控制', link: '/plugin/iframe' },
+            { text: 'HLS 画质', link: '/plugin/hls-quality' },
+            { text: '控制器皮肤', link: '/plugin/control-ui' },
+          ]
+        },
+        {
+          text: '第三方库',
+          collapsible: true,
+          items: [
+            { text: 'hls.js', link: '/library/hls' },
+            { text: 'flv.js', link: '/library/flv' },
+            { text: 'dash.js', link: '/library/dash' },
+          ]
+        },
+      ],
+      '/en/': [
+        {
+          text: 'Quick start',
+          collapsible: true,
+          items: [
+            { text: 'Install', link: '/en/' },
+            { text: 'Option', link: '/en/start/option' },
+            { text: 'Component', link: '/en/start/component' },
+            { text: 'Setting', link: '/en/start/setting' },
+          ]
+        },
+        {
+          text: 'Advanced',
+          collapsible: true,
+          items: [
+            { text: 'Instance Property', link: '/en/advanced/property' },
+            { text: 'Advanced Property', link: '/en/advanced/built-in' },
+            { text: 'Static Property', link: '/en/advanced/class' },
+            { text: 'Instance Event', link: '/en/advanced/event' },
+            { text: 'Writing Plugin', link: '/en/advanced/plugin' },
+          ]
+        },
+        {
+          text: 'Plugins',
+          collapsible: true,
+          items: [
+            { text: 'Video Ads', link: '/en/plugin/ads' },
+            { text: 'Iframe Control', link: '/en/plugin/iframe' },
+            { text: 'HLS Quality', link: '/en/plugin/hls-quality' },
+            { text: 'Control UI', link: '/en/plugin/control-ui' },
+          ]
+        },
+        {
+          text: 'Libraries',
+          collapsible: true,
+          items: [
+            { text: 'hls.js', link: '/en/library/hls' },
+            { text: 'flv.js', link: '/en/library/flv' },
+            { text: 'dash.js', link: '/en/library/dash' },
+          ]
+        },
+      ],
+    },
+    editLink: {
+      pattern: 'https://github.com/zhw2590582/ArtPlayer/packages/artplayer-vitepress/docs/:path',
+      text: 'Edit this page on GitHub'
+    },
+  },
+  markdown: {
+    lineNumbers: true
+  },
+  head: [
+    [
+      'script',
+      { src: "/main.js" }
+    ],
+    [
+      'link',
+      { rel: "stylesheet", href: "/style.css" }
+    ],
+    [
+      'link',
+      { rel: "shortcut icon", href: "/favicon.ico" }
+    ]
+  ]
+}
+
+export default config
@@ -0,0 +1,498 @@
+# 高级属性
+
+这里的 `高级属性` 是指挂载在 `实例` 的 `二级属性`，比较少用
+
+## `option`
+
+播放器的选项
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.option);
+```
+
+:::warning 提示
+
+假如直接修改这个 `option` 对象，播放器不会马上做出响应
+
+:::
+
+## `whitelist`
+
+管理移动设备的白名单功能，只有一个属性 `state` 返回是否启用播放器功能
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    whitelist: [(ua) => /iPhone/gi.test(ua)],
+});
+
+console.info(art.whitelist.state);
+```
+
+:::warning 提示
+
+在上面这个例子中，当使用 `iPhone` 访问播放器时，`art.whitelist.state` 会返回 `false`，即使用原生的播放器，而不是 `Artplayer` 播放器
+
+:::
+
+
+## `template`
+
+管理播放器所有的 `DOM` 元素
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.template);
+console.info(art.template.$video);
+```
+
+:::warning 提示
+
+为了方便区别 `DOM` 元素和普通对象，播放器里的所有 `DOM` 元素都是以 `$` 开头命名的
+
+这是所有 `DOM` 元素的定义：[artplayer/types/template.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts)
+
+:::
+
+## `events`
+
+管理播放器所有的 `DOM` 事件，实质上是代理了 `addEventListener` 和 `removeEventListener`, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
+
+- `proxy` 方法用于代理 `DOM` 事件
+- `hover` 方法用于代理自定义的 `hover` 事件
+- `loadImg` 方法用于监听图片的 `load` 加载事件
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
+
+art.events.proxy(container, 'click', event => {
+	console.info('click', event);
+});
+
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
+
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});
+```
+
+:::warning 提示
+
+假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
+
+:::
+
+## `storage`
+
+管理播放器的本地存储
+
+- `name` 属性用于设置缓存的 `key`
+- `set` 方法用于设置缓存
+- `get` 方法用于获取缓存
+- `del` 方法用于删除缓存
+- `clear` 方法用于清空缓存
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();
+```
+
+:::warning 提示
+
+默认所有播放器实例都是共享同一个 `localStorage` 的，而且默认的 `key` 是 `artplayer_settings`
+
+如果你想不同的播放器使用不同的 `localStorage`，你可以修改 `art.storage.name` 即可
+
+:::
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });
+```
+
+## `icons`
+
+管理播放器所有的 `svg` 图标
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.icons.loading);
+```
+
+:::warning 这是所有图标的定义：
+
+[artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
+
+:::
+
+## `i18n`
+
+管理播放器的 `i18n`
+
+- `get` 方法用于获取 `i18n` 的值
+- `update` 方法用于更新 `i18n` 对象
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.i18n.get('Play'));
+
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});
+```
+
+:::warning
+
+使用 `art.i18n.update` 只能更新实例化之后的 `i18n`，假如想在实例化之前更新 `i18n`，请使用基础选项的 `i18n` 来更新
+
+:::
+
+
+## `notice`
+
+管理播放器的提示语，只有一个 `show` 属性用于显示提示语
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})
+```
+
+:::warning
+
+如果想马上隐藏 `notice` 的显示：`art.notice.show = '';`
+
+:::
+
+## `layers`
+
+管理播放器的层
+
+- `add` 方法用于动态添加层
+- `show` 属性用于设置是否显示全部层
+- `toggle` 属性用于切换是否显示全部层
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
+
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});
+```
+
+:::warning `组件配置` 请参考以下地址：
+
+[/start/component.html](/start/component.html)
+
+:::
+
+## `controls`
+
+管理播放器的控制器
+
+- `add` 方法用于动态添加控制器
+- `show` 属性用于设置是否显示全部控制器
+- `toggle` 属性用于切换是否显示全部控制器
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
+
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});
+```
+
+:::warning `组件配置` 请参考以下地址：
+
+[/start/component.html](/start/component.html)
+
+:::
+
+## `contextmenu`
+
+管理播放器的右键菜单
+
+- `add` 方法用于动态添加菜单
+- `show` 属性用于设置是否显示全部菜单
+- `toggle` 属性用于切换是否显示全部菜单
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
+
+    art.contextmenu.show = true;
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
+});
+```
+
+:::warning `组件配置` 请参考以下地址：
+
+[/start/component.html](/start/component.html)
+
+:::
+
+## `subtitle`
+
+管理播放器的字幕功能
+
+- `url` 属性设置和返回当前字幕地址
+- `style` 方法设置当前字幕的样式
+- `switch` 方法设置当前字幕地址和选项
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});
+```
+
+## `loading`
+
+管理播放器的加载层
+
+- `show` 属性用于设置是否显示加载层
+- `toggle` 属性用于切换是否显示加载层
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});
+```
+
+## `hotkey`
+
+管理播放器的快捷键功能
+
+- `add` 方法用于添加快捷键
+- `remove` 方法用于删除快捷键
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
+
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});
+```
+
+:::warning 提示
+
+只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
+
+:::
+
+## `mask`
+
+管理播放器的遮罩层
+
+- `show` 属性用于设置是否显示遮罩层
+- `toggle` 属性用于切换是否显示遮罩层
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mask.show = false;
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
+});
+```
+
+## `setting`
+
+管理播放器的设置面板
+
+- `add` 方法用于动态添加设置项
+- `show` 属性用于设置是否显示全部设置项
+- `toggle` 属性用于切换是否显示全部设置项
+- `update` 方法动态更新设置项
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});
+```
+
+:::warning `设置面板` 请参考以下地址
+
+[/start/setting.html](/start/setting.html)
+
+:::
+
+## `plugins`
+
+管理播放器的插件功能，只有一个方法 `add` 用于动态添加插件
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
+```
@@ -0,0 +1,212 @@
+# 静态属性
+
+这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
+
+:::warning 提示
+
+有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改
+
+:::
+
+## `instances`
+
+返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info([...Artplayer.instances]);
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info([...Artplayer.instances]);
+```
+
+## `version`
+
+返回播放器的版本信息
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.version);
+```
+
+## `env`
+
+返回播放器的环境变量
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.env);
+```
+
+## `build`
+
+返回播放器的打包时间
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.build);
+```
+
+## `config`
+
+返回视频的默认配置
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.config);
+```
+
+## `utils`
+
+返回播放器的工具函数集合
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.utils);
+```
+
+:::warning 全部工具函数请参考以下地址：
+
+[artplayer/types/utils.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts)
+
+:::
+
+## `scheme`
+
+返回播放器选项的校验方案
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.scheme);
+```
+
+## `Emitter`
+
+返回事件分发器的构造函数
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.Emitter);
+```
+
+## `validator`
+
+返回选项的校验函数
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.validator);
+```
+
+## `kindOf`
+
+返回类型检测的函数工具
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.kindOf);
+```
+
+## `html`
+
+返回播放器所需的 `html` 字符串
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.html);
+```
+
+## `option`
+
+返回播放器的默认选项
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+console.info(Artplayer.option);
+```
+
+## `DEBUG`
+
+## `CONTEXTMENU`
+
+## `NOTICE_TIME`
+
+## `SETTING_WIDTH`
+
+## `SETTING_ITEM_WIDTH`
+
+## `SETTING_ITEM_HEIGHT`
+
+## `INDICATOR_SIZE`
+
+## `INDICATOR_SIZE_ICON`
+
+## `INDICATOR_SIZE_MOBILE`
+
+## `INDICATOR_SIZE_MOBILE_ICON`
+
+## `VOLUME_PANEL_WIDTH`
+
+## `VOLUME_HANDLE_WIDTH`
+
+## `RESIZE_TIME`
+
+## `SCROLL_TIME`
+
+## `SCROLL_GAP`
+
+## `AUTO_PLAYBACK_MAX`
+
+## `AUTO_PLAYBACK_MIN`
+
+## `AUTO_PLAYBACK_TIMEOUT`
+
+## `RECONNECT_TIME_MAX`
+
+## `RECONNECT_SLEEP_TIME`
+
+## `CONTROL_HIDE_TIME`
+
+## `DB_CLICE_TIME`
+
+## `MOBILE_AUTO_PLAYBACKRATE`
+
+## `MOBILE_AUTO_PLAYBACKRATE_TIME`
+
+## `MOBILE_AUTO_ORIENTATION_TIME`
+
+## `INFO_LOOP_TIME`
+
+## `FAST_FORWARD_VALUE`
+
+## `FAST_FORWARD_TIME`
+
+## `TOUCH_MOVE_RATIO`
+
+## `VOLUME_STEP`
+
+## `SEEK_STEP`
+
+## `PROGRESS_HEIGHT`
+
+## `PLAYBACK_RATE`
+
+## `ASPECT_RATIO`
+
+## `FLIP`
@@ -0,0 +1,712 @@
+# 实例事件
+
+播放器的事件分为两种，一种视频的 `原生事件` (前缀 `video:`)，另外一种是 `自定义事件`
+
+监听事件：
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});
+```
+
+只监听一次事件：
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});
+```
+
+手动触发事件：
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.emit('focus');
+```
+
+移除事件：
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
+
+art.on('ready', onReady);
+```
+
+:::warning 全部事件请参考以下地址：
+
+[artplayer/types/events.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts)
+
+:::
+
+## `ready`
+
+当播放器首次可以播放器时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info('ready');
+});
+```
+
+## `restart`
+
+当播放器切换地址后并可以播放时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
+
+art.on('restart', () => {
+    console.info('restart');
+});
+```
+
+## `pause`
+
+当播放器暂停时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('pause', () => {
+    console.info('pause');
+});
+```
+
+## `play`
+
+当播放器播放时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('play', () => {
+    console.info('play');
+});
+```
+
+## `hotkey`
+
+当播放器热键被按下时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});
+```
+
+## `destroy`
+
+当播放器销毁时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+
+art.on('destroy', () => {
+    console.info('destroy');
+});
+```
+
+## `url`
+
+当视频地址变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0'
+});
+
+art.on('url', (url) => {
+    console.info('url', url);
+});
+```
+
+## `focus`
+
+当播放器获得焦点时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('focus', () => {
+    console.info('focus');
+});
+```
+
+## `blur`
+
+当播放器失去焦点时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('blur', () => {
+    console.info('blur');
+});
+```
+
+## `dblclick`
+
+当播放器被双击时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', () => {
+    console.info('dblclick');
+});
+```
+
+## `click`
+
+当播放器被单击时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('click', () => {
+    console.info('click');
+});
+```
+
+## `error`
+
+当播放器加载视频发生错误时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
+
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});
+```
+
+## `hover`
+
+当播放器被鼠标移出或者移入时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hover', (state) => {
+    console.info('hover', state);
+});
+```
+
+## `mousemove`
+
+当播放器被鼠标经过时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});
+```
+
+## `resize`
+
+当播放器尺寸变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.info('resize');
+});
+```
+
+## `view`
+
+当播放器出现在视口时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('view', (state) => {
+    console.info('view', state);
+});
+```
+
+## `aspectRatio`
+
+当播放器长宽比变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
+
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});
+```
+
+## `autoHeight`
+
+当播放器自动设置高度时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight = true;
+});
+
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});
+```
+
+## `autoSize`
+
+当播放器自动设置尺寸时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
+
+art.on('autoSize', () => {
+    console.info('autoSize');
+});
+```
+
+## `flip`
+
+当播放器发生翻转时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
+
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});
+```
+
+## `fullscreen`
+
+当播放器发生窗口全屏时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});
+```
+
+## `fullscreenWeb`
+
+当播放器发生网页全屏时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});
+```
+
+## `mini`
+
+当播放器进入迷你模式时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+
+art.on('mini', (state) => {
+    console.info('mini', state);
+});
+```
+
+## `pip`
+
+当播放器进入画中画时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
+
+art.on('pip', (state) => {
+    console.info('pip', state);
+});
+```
+
+## `screenshot`
+
+当播放器被截图时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
+
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
+```
+
+## `seek`
+
+当播放器发生时间跳转时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});
+```
+
+## `subtitleOffset`
+
+当播放器发生字幕偏移时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{11}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
+
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});
+```
+
+## `subtitleUpdate`
+
+当字幕更新时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});
+```
+
+## `subtitleLoad`
+
+当字幕加载时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});
+```
+
+## `subtitleSwitch`
+
+当字幕切换时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{13}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
+
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});
+```
+
+## `video:canplay`
+
+浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
+
+## `video:canplaythrough`
+
+浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
+
+## `video:complete`
+
+OfflineAudioContext 渲染完成
+
+## `video:durationchange`
+
+duration 属性的值改变时触发
+
+## `video:emptied`
+
+媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
+
+## `video:ended`
+
+视频停止播放，因为 media 已经到达结束点
+
+## `video:error`
+
+获取媒体数据时出错，或者资源类型不是受支持的媒体格式
+
+## `video:loadeddata`
+
+media 中的首帧已经完成加载
+
+## `video:loadedmetadata`
+
+已加载元数据
+
+## `video:pause`
+
+播放已暂停
+
+## `video:play`
+
+播放已开始
+
+## `video:playing`
+
+由于缺乏数据而暂停或延迟后，播放准备开始
+
+## `video:progress`
+
+在浏览器加载资源时周期性触发
+
+## `video:ratechange`
+
+播放速率发生变化
+
+## `video:seeked`
+
+跳帧（seek）操作完成
+
+## `video:seeking`
+
+跳帧（seek）操作开始
+
+## `video:stalled`
+
+用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
+
+## `video:suspend`
+
+媒体数据加载已暂停
+
+## `video:timeupdate`
+
+currentTime 属性指定的时间发生变化
+
+## `video:volumechange`
+
+音量发生变化
+
+## `video:waiting`
+
+由于暂时缺少数据，播放已停止
+
@@ -0,0 +1,125 @@
+# 编写插件
+
+但你已经知道播放器的`属性`, `方法`和`事件`后，再编写插件是非常简单的事
+
+可以在实例化的时候加载插件的函数
+
+<div className="run-code">▶ Run Code</div>
+
+```js{15}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
+```
+
+可以在实例化之后再加载插件的函数
+
+<div className="run-code">▶ Run Code</div>
+
+```js{17}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.plugins.add(myPlugin);
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
+```
+
+例如我想写一个在视频暂停后，显示一个图片广告的插件
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: `<img style="width: 100px" src="${option.url}">`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
+
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
+
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
+
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
+
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
+
+        art.on('play', hide);
+        art.on('pause', show);
+
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
+```
@@ -0,0 +1,910 @@
+# 实例属性
+
+这里的 `实例属性` 是指挂载在 `实例` 的 `一级属性`，比较常用
+
+## `play`
+
+-   Type: `Function`
+
+播放视频
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});
+```
+
+## `pause`
+
+-   Type: `Function`
+
+暂停视频
+
+<div className="run-code">▶ Run Code</div>
+
+```js{11}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});
+```
+
+## `toggle`
+
+-   Type: `Function`
+
+切换视频的播放和暂停
+
+<div className="run-code">▶ Run Code</div>
+
+```js{11}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.toggle();
+
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});
+```
+
+## `destroy`
+
+-   Type: `Function`
+-   Parameter: `Boolean`
+
+销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+```
+
+## `seek`
+
+-   Type: `Setter`
+-   Parameter: `Number`
+
+视频时间跳转，单位秒
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+});
+```
+
+## `forward`
+
+-   Type: `Setter`
+-   Parameter: `Number`
+
+视频时间快进，单位秒
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.forward = 5;
+});
+```
+
+## `backward`
+
+-   Type: `Setter`
+-   Parameter: `Number`
+
+视频时间快退，单位秒
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});
+```
+
+## `volume`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Number`
+
+设置和获取视频音量，范围在：`[0, 1]`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});
+```
+
+## `url`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+设置和获取视频地址
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});
+```
+
+## `switchUrl`
+
+-   Type: `Function`
+-   Parameter: `String`
+
+设置视频地址，设置时和 `url` 类似，但会执行一些优化操作
+
+函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0', '新视频名字');
+    }, 3000);
+});
+```
+
+## `switchQuality`
+
+-   Type: `Function`
+-   Parameter: `String`
+
+设置视频画质地址，和 `switchUrl` 类似，但会带上之前的播放进度
+
+函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0', '新视频地址');
+    }, 3000);
+});
+```
+
+## `muted`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置和获取视频是否静音
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});
+```
+
+## `currentTime`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Number`
+
+设置和获取视频当前时间，设置时间时和 `seek` 类似，但它不会触发额外的事件
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});
+```
+
+## `duration`
+
+-   Type: `Getter`
+
+获取视频时长
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.duration);
+});
+```
+
+:::warning 提示
+
+有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0`
+
+:::
+
+## `screenshot`
+
+-   Type: `Function`
+
+下载当前视频帧的截图
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.screenshot();
+});
+```
+
+## `getDataURL`
+
+-   Type: `Function`
+
+获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+	console.info(url)
+});
+```
+
+## `getBlobUrl`
+
+-   Type: `Function`
+
+获取当前视频帧的截图的`blob`地址，返回的是一个 `Promise`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});
+```
+
+## `fullscreen`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置和获取播放器窗口全屏
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: '全屏开关',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});
+```
+
+:::warning 提示
+
+由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
+
+:::
+
+## `fullscreenWeb`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置和获取播放器网页全屏
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8,11}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('ready', () => {
+    art.fullscreenWeb = true;
+
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});
+```
+
+## `pip`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置和获取播放器画中画模式
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});
+```
+
+:::warning 提示
+
+由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
+
+:::
+
+## `poster`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+设置和获取视频海报，只有在视频播放前才能看到海报效果
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
+
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});
+```
+
+## `mini`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置和获取播放器迷你模式
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+```
+
+## `playing`
+
+-   Type: `Getter`
+-   Parameter: `Boolean`
+
+获取视频是否正在播放中
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    console.info(art.playing);
+});
+```
+
+## `autoSize`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+设置视频是否自适应尺寸，设置为 `true` 之后它会只执行一次
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.autoSize);
+    art.autoSize = true;
+    console.info(art.autoSize);
+});
+```
+
+## `rect`
+
+-   Type: `Getter`
+
+获取播放器的尺寸和坐标信息
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});
+```
+
+:::warning 提示
+
+尺寸和坐标信息是通过 `getBoundingClientRect` 获取的
+
+:::
+
+## `flip`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+设置和获取播放器翻转，支持`normal`,  `horizontal`,  `vertical`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
+```
+
+## `playbackRate`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Number`
+
+设置和获取播放器播放速度
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
+```
+
+## `aspectRatio`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+设置和获取播放器长宽比
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
+```
+
+## `loop`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Array`
+
+设置和获取区间循序播放，单位秒
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.loop);
+    art.loop = [5, 10];
+    console.info(art.loop);
+});
+```
+
+:::warning 提示
+
+删除区间循环播放，只需要设置 `loop` 为 `[]` 即可
+
+`art.loop` 与 `art.option.loop` 是两个不同的东西，请勿弄乱
+
+:::
+
+## `autoHeight`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Boolean`
+
+当容器只有宽度，该属性可以自动计算出并设置视频的高度，设置为 `true` 之后它会只执行一次
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7,11}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight = true;
+});
+
+art.on('resize', () => {
+    art.autoHeight = true;
+});
+```
+
+:::warning 提示
+
+当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
+
+:::
+
+## `attr`
+
+-   Type: `Function`
+-   Parameter: `String`
+
+动态获取和设置 video 元素的属性
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
+```
+
+## `title`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+动态获取和设置播放器标题
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.title);
+    art.title = '新标题';
+    console.info(art.title);
+});
+```
+
+## `type`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+动态获取和设置视频类型
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});
+```
+
+## `theme`
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+动态获取和设置播放器主题颜色
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
+```
+
+## `airplay`
+
+-   Type: `Function`
+
+开启隔空播放
+
+<div className="run-code">▶ Run Code</div>
+
+```js{10}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});
+```
+
+## `loaded`
+
+-   Type: `Getter`
+
+视频缓存的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});
+```
+
+## `played`
+
+-   Type: `Getter`
+
+视频播放的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});
+```
+
+## `proxy`
+
+-   Type: `Function`
+
+`DOM` 事件的代理函数，实质上代理了 `addEventListener` 和 `removeEventListener`, 当使用 `proxy` 来处理事件，播放器销毁时也会自动销毁该事件
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7-10}
+var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
+
+art.proxy(container, 'click', event => {
+	console.info(event);
+});
+```
+
+:::warning 提示
+
+假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
+
+:::
+
+## `query`
+
+-   Type: `Function`
+
+`DOM` 的查询函数，类似 `document.querySelector`，但被查询的对象局限于当前播放器内，可以避免同类名的错误
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.query('.art-video'));
+```
+
+## `video`
+
+-   Type: `Element`
+
+快捷返回播放器的 `video` 元素
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.video);
+```
@@ -0,0 +1 @@
+# WIP...
@@ -0,0 +1,270 @@
+# 安装使用
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer
+```
+
+```bash [yarn]
+yarn add artplayer
+```
+
+```bash [pnpm]
+pnpm add artplayer
+```
+
+```html [script]
+<script src="path/to/artplayer.js"></script>
+```
+
+:::
+
+## `CDN`
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer/dist/artplayer.js
+```
+
+:::
+
+## 使用
+
+::: code-group
+
+```js [index.js]
+import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
+```
+
+```html [index.html]
+<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
+```
+
+::: 
+
+::: warning 提示
+
+播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
+
+:::
+
+::: tip 以下链接可以看到更多的使用例子
+
+[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
+
+:::
+
+## `Vue.js`
+
+::: code-group
+
+```vue [Artplayer.vue]
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeUnmount() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
+```
+
+```vue [app.vue]
+<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
+```
+
+:::
+
+::: warning Artplayer 非响应式：
+
+在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
+
+:::
+
+## `React.js`
+
+::: code-group
+
+```jsx [Artplayer.jsx]
+import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
+```
+
+```jsx [app.jsx]
+import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;
+```
+
+:::
+
+::: warning Artplayer 非响应式：
+
+在 `React.js` 里直接修改 `option` 是不会改变播放器的
+
+:::
+
+## 语法提示
+
+有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型 
+
+变量：
+
+```js
+/**
+ * @type {import("artplayer")}
+ */
+let art = null;
+```
+
+参数：
+
+```js
+/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
+```
+
+属性：
+
+```js
+export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
+```
@@ -0,0 +1,36 @@
+# dash.js
+
+👉 [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
+
+<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js">
+    ▶ Run Code
+</div>
+
+```js{18-21,25}
+function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+
+        // optional
+        art.dash = dash; 
+        art.once('url', () => dash.destroy());
+        art.once('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
+```
@@ -0,0 +1,37 @@
+# flv.js
+
+👉 [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
+
+<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js">
+    ▶ Run Code
+</div>
+
+```js{19-22,26}
+function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+
+        // optional
+        art.flv = flv; 
+        art.once('url', () => flv.destroy());
+        art.once('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
+```
@@ -0,0 +1,39 @@
+# hls.js
+
+👉 [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
+
+<div className="run-code" data-libs="https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js">
+    ▶ Run Code
+</div>
+
+```js{21-24,28}
+function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+
+        // optional
+        art.hls = hls;
+        art.once('url', () => hls.destroy());
+        art.once('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
+```
@@ -0,0 +1,98 @@
+# 视频广告
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-ads
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-ads
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-ads
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-ads.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
+```
+
+:::
+
+## 使用
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
+
+            // 广告总时长，单位为秒
+            totalDuration: 10,
+
+            // 视频广告是否默认静音
+            muted: false,
+
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+```
@@ -0,0 +1,92 @@
+# 控制器皮肤
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-control
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-control
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-control
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-control.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js
+```
+
+:::
+
+## 使用
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
+    ▶ Run Code
+</div>
+
+```js{7}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginControl(),
+    ],
+});
+```
+
+## `enable`
+
+- Type: `Getter/Setter`
+- Parameter: `Boolean`
+
+是否启用新的控制器皮肤
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+    fullscreenWeb: true,
+    controls: [
+        {
+            position: 'right',
+            html: '<button type="button">Switch UI</button>',
+            click: function () {
+                const { enable } = art.plugins.artplayerPluginControl;
+                art.plugins.artplayerPluginControl.enable = !enable;
+            },
+        },
+    ],
+    plugins: [
+        artplayerPluginControl(),
+    ],
+});
+```
@@ -0,0 +1,462 @@
+# 弹幕库
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-danmuku
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-danmuku
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-danmuku
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-danmuku.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
+```
+
+:::
+
+## 选项
+
+```js
+{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}
+```
+
+## 使用弹幕数组
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});
+```
+
+## 使用弹幕 XML
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+```
+
+## 使用异步调用
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 使用 Promise 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});
+```
+
+## `hide/show`
+
+通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});
+```
+
+## `isHide`
+
+通过属性 `isHide` 判断当前弹幕是隐藏或者显示
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});
+```
+
+## `emit`
+
+通过方法 `emit` 发送一条实时弹幕
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});
+```
+
+## `config`
+
+通过方法 `config` 实时改变弹幕配置，支持属性有：
+
+-   `danmuku`
+-   `speed`
+-   `opacity`
+-   `fontSize`
+-   `color`
+-   `mode`
+-   `margin`
+-   `antiOverlap`
+-   `synchronousPlayback`
+-   `filter`
+-   `lockTime`
+-   `beforeEmit`
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});
+```
+
+## `load`
+
+通过 load 方法可以重载弹幕源，或者切换新弹幕
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});
+```
+
+## `reset`
+
+用于清空当前显示的弹幕
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});
+```
+
+## `option`
+
+用于获取当前弹幕配置
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});
+```
+
+## 事件
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+```
@@ -0,0 +1,41 @@
+# HLS 画质
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-hls-quality
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-hls-quality
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-hls-quality
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-hls-quality.js"></script>
+```
+
+:::
+
+## CDN
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+```
+
+:::
@@ -0,0 +1,194 @@
+# Iframe 控制
+
+## 说明
+
+通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
+
+## 安装
+
+::: code-group
+
+```bash [npm]
+npm install artplayer-plugin-iframe
+```
+
+```bash [yarn]
+yarn add artplayer-plugin-iframe
+```
+
+```bash [pnpm]
+pnpm add artplayer-plugin-iframe
+```
+
+```html [script]
+<script src="path/to/artplayer-plugin-iframe.js"></script>
+```
+
+:::
+
+## `CDN`
+
+::: code-group
+
+```bash [jsdelivr.net]
+https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
+```
+
+```bash [unpkg.com]
+https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
+```
+
+:::
+
+## 使用
+
+::: code-group
+
+```html [index.html]
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
+```
+
+```html [iframe.html]
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+```
+
+:::
+
+## 实例接口
+
+### `commit`
+
+将消息推送到 iframe，该函数将在 iframe 内部运行
+
+```js
+iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
+```
+
+### `message`
+
+接收来自 iframe 的消息
+
+```js
+iframe.message((event) => {
+    console.info(event);
+});
+```
+
+### `destroy`
+
+销毁实例，销毁后无法与 iframe 通信
+
+```js
+iframe.destroy();
+```
+
+## `Iframe` 接口
+
+:::warning 提示
+
+`Iframe` 接口 只能运行在 `iframe` 里
+
+:::
+
+### `inject`
+
+注入脚本，接收来自实例的消息
+
+```js
+ArtplayerPluginIframe.inject();
+```
+
+### `postMessage`
+
+将消息推送到实例
+
+```js
+iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
+```
@@ -0,0 +1,19 @@
+(function () {
+    if (window['run-code-init']) return;
+    window['run-code-init'] = true;
+    document.addEventListener('click', (event) => {
+        if (event.target.className === 'run-code') {
+            event.preventDefault();
+            const codeElement = event.target.nextElementSibling.querySelector('pre code');
+            if (codeElement) {
+                const libs = event.target.dataset.libs || '';
+                const code = encodeURIComponent(codeElement.innerText);
+                const env = 'https://artplayer.org';
+                const url = env + '/?libs=' + libs + '&code=' + code;
+                window.open(url);
+            }
+        }
+    });
+})();
+
+
@@ -0,0 +1,9 @@
+.run-code {
+    display: inline-block;
+    padding: 3px 7px;
+    color: #fff;
+    border-radius: 3px;
+    background-color: #25c2a0;
+    font-size: 14px;
+    cursor: pointer;
+}
@@ -0,0 +1,222 @@
+# 组件配置
+
+这里所说的组件配置主要是指：`layers` , `controls` , `contextmenu` 这三个共用的配置:
+
+| 属性      | 类型                | 描述                       |
+| --------- | ------------------- | -------------------------- |
+| `disable` | `Boolean`           | 是否禁用组件               |
+| `name`    | `String`            | 组件唯一名称，用于标记类名 |
+| `index`   | `Number`            | 组件索引，用于显示的优先级 |
+| `html`    | `String`, `Element` | 组件的 DOM 元素            |
+| `style`   | `Object`            | 组件样式对象               |
+| `click`   | `Function`          | 组件点击事件               |
+| `mounted` | `Function`          | 组件挂载后触发             |
+| `tooltip` | `String`            | 组件的提示文本             |
+
+:::warning 提示
+
+- 当前组件只能添加，并没有销毁的功能
+- 通过 `name` 选项可以快速获取组件的 `DOM` 元素
+- 通过 `index` 选项可以控制组件出现的顺序
+
+:::
+
+## `layers`
+
+实例化时添加一个层，例如可以添加 `logo` 或者 `广告` 等等
+
+<div className="run-code">▶ Run Code</div>
+
+```js{5-22}
+var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            tooltip: 'Potser Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
+
+console.info(art.layers.potser);
+```
+
+也可以实例化之后添加一个层
+
+<div className="run-code">▶ Run Code</div>
+
+```js{7-22}
+var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.layers.add({
+    name: 'potser',
+    html: `<img style="width: 100px" src="${img}">`,
+    tooltip: 'Potser Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+console.info(art.layers.potser);
+```
+
+## `controls`
+
+实例化时添加一个控制器
+
+:::warning controls 还有三个额外的选项
+
+- `position`: `left` 和 `right` 控制控制器出现的左右位置
+- `selector`: 快速创建选择列表的对象数组
+- `onSelect`: 选择列表的元素被点击时触发的函数
+
+:::
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
+
+console.info(art.controls['your-button']);
+console.info(art.controls.subtitle);
+```
+
+也可以实例化之后添加一个控制器
+
+```js{6-22}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+console.info(art.controls.button1);
+```
+
+## `contextmenu`
+
+实例化时添加一个右键菜单
+
+<div className="run-code">▶ Run Code</div>
+
+```js{4-13}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+console.info(art.contextmenu['your-menu']);
+```
+
+也可以实例化之后添加一个右键菜单
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6-13}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+console.info(art.contextmenu['your-menu']);
+```
@@ -0,0 +1,214 @@
+# 设置面板
+
+需先打开设置面板，播放器默认自带四个设置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
+
+<div className="run-code">▶ Run Code</div>
+
+```js{4}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+	setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+```
+
+## 选择列表
+
+| 属性       | 类型                | 描述            |
+| ---------- | ------------------- | --------------- |
+| `html`     | `String`, `Element` | 元素的 DOM 元素 |
+| `icon`     | `String`, `Element` | 元素的图标      |
+| `selector` | `Array`             | 元素列表        |
+| `onSelect` | `Function`          | 元素点击事件    |
+| `width`    | `Number`            | 列表宽度        |
+| `default`  | `Boolean`           | 是否默认选中    |
+| `tooltip`  | `String`            | 提示文本        |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});
+```
+
+## 列表嵌套
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});
+```
+
+## 切换按钮
+
+| 属性       | 类型                | 描述            |
+| ---------- | ------------------- | --------------- |
+| `html`     | `String`, `Element` | 元素的 DOM 元素 |
+| `icon`     | `String`, `Element` | 元素的图标      |
+| `switch`   | `Boolean`           | 按钮默认状态    |
+| `onSwitch` | `Function`          | 按钮切换事件    |
+| `tooltip`  | `String`            | 提示文本        |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
+```
+
+## 范围滑块
+
+| 属性       | 类型                | 描述             |
+| ---------- | ------------------- | ---------------- |
+| `html`     | `String`, `Element` | 元素的 DOM 元素  |
+| `icon`     | `String`, `Element` | 元素的图标       |
+| `range`    | `Array`             | 默认状态数组     |
+| `onRange`  | `Function`          | 完成时触发的事件 |
+| `onChange` | `Function`          | 变化时触发的事件 |
+| `tooltip`  | `String`            | 提示文本         |
+
+```js
+const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
+```
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});
+```
@@ -0,0 +1,12 @@
+import { SearchPlugin } from "vitepress-plugin-search";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    SearchPlugin({
+      placeholder: "Search docs",
+      buttonLabel: "Search",
+      previewLength: 62,
+    }),
+  ],
+});