添加滑动设置

2026-10-12 15:26:16 -08:00 · 2022-05-15 17:49:46 +08:00
1 parent 4c12972101
commit fc978e9d85
@@ -33,7 +33,7 @@ var art = new Artplayer({
    settings: [
        {
            width: 200,
-            html: 'Switch Subtitle',
+            html: 'Subtitle',
            tooltip: 'Bilingual',
            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
            selector: [
@@ -69,7 +69,7 @@ var art = new Artplayer({
            },
        },
        {
-            html: 'Custom Switch',
+            html: 'Switcher',
            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
            tooltip: 'OFF',
            switch: false,
@@ -79,6 +79,15 @@ var art = new Artplayer({
                return !item.switch;
            },
        },
+        {
+            html: 'Slider',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            tooltip: '5x',
+            range: [5, 1, 10, 0.1],
+            onRange: function (item) {
+                return item.range + 'x';
+            },
+        },
    ],
    contextmenu: [
        {
@@ -115,6 +115,16 @@ type SettingOption = {
     * When switch item click
     */
    onSwitch?(item: SettingOption, element: HTMLElement, event: Event): void;
+
+    /**
+     * Custom range item
+     */
+    range?: number[];
+
+    /**
+     * When range item change
+     */
+    onRange?(item: SettingOption, element: HTMLElement, event: Event): void;
 };

 type Component = {
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Page Not Found | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/404.html"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="Page Not Found | Artplayer.js"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/404.html"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022 Artplayer.js, Inc. Built with Docusaurus.</div></div></div></Line truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Advanced propertys | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/advance"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Advanced propertys | Artplayer.js"><meta data-rh="true" name="description" content="This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions."><meta data-rh="true" property="og:description" content="This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions."><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/advance"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[280],{3905:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var a=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,r=function(t,e){if(null==t)return{};var n,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var d=a.createContext({}),p=function(t){var e=a.useContext(d),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(d.Provider,{value:e},t.children)},s={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),u=p(n),c=r,g=u["".concat(d,".").concat(c)]||u[c]||s[c]||l;return n?a.createElement(g,i(i({ref:e},m),{},{components:n})):a.createElement(g,i({ref:e},m))}));function c(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var l=n.length,i=new Array(l);i[0]=u;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},3797:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"How to add setting panel",sidebar_position:6},d=void 0,p={unversionedId:"en/Questions/How_to_add_setting_panel",id:"en/Questions/How_to_add_setting_panel",title:"How to add setting panel",description:"Add selector list",source:"@site/docs/en/Questions/How_to_add_setting_panel.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_add_setting_panel",permalink:"/document/en/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to add video ads",permalink:"/document/en/Questions/How_to_add_video_ads"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use_with_react_portal"}},m={},s=[{value:"Add selector list",id:"add-selector-list",level:2},{value:"Add switch button",id:"add-switch-button",level:2},{value:"Add range slider",id:"add-range-slider",level:2}],u={toc:s};function c(t){var e=t.components,n=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"add-selector-list"},"Add selector list"),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"DOM elements of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"Icon of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,lLine truncated
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[280],{3905:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var a=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,r=function(t,e){if(null==t)return{};var n,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var d=a.createContext({}),p=function(t){var e=a.useContext(d),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(d.Provider,{value:e},t.children)},s={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),u=p(n),c=r,k=u["".concat(d,".").concat(c)]||u[c]||s[c]||l;return n?a.createElement(k,i(i({ref:e},m),{},{components:n})):a.createElement(k,i({ref:e},m))}));function c(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var l=n.length,i=new Array(l);i[0]=u;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},3797:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"How to add setting panel",sidebar_position:6},d=void 0,p={unversionedId:"en/Questions/How_to_add_setting_panel",id:"en/Questions/How_to_add_setting_panel",title:"How to add setting panel",description:"Add selector list",source:"@site/docs/en/Questions/How_to_add_setting_panel.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_add_setting_panel",permalink:"/document/en/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to add video ads",permalink:"/document/en/Questions/How_to_add_video_ads"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use_with_react_portal"}},m={},s=[{value:"Add selector list",id:"add-selector-list",level:2},{value:"Add switch button",id:"add-switch-button",level:2}],u={toc:s};function c(t){var e=t.components,n=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"add-selector-list"},"Add selector list"),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"DOM elements of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"Icon of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,l.kt)("td",{parentName:"tr",align:null},"Selector list")),Line truncated
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[740],{3905:function(t,n,e){e.d(n,{Zo:function(){return d},kt:function(){return c}});var a=e(7294);function r(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function l(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,a)}return e}function i(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?l(Object(e),!0).forEach((function(n){r(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function o(t,n){if(null==t)return{};var e,a,r=function(t,n){if(null==t)return{};var e,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||(r[e]=t[e]);return r}(t,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var m=a.createContext({}),p=function(t){var n=a.useContext(m),e=n;return t&&(e="function"==typeof t?t(n):i(i({},n),t)),e},d=function(t){var n=p(t.components);return a.createElement(m.Provider,{value:n},t.children)},u={inlineCode:"code",wrapper:function(t){var n=t.children;return a.createElement(a.Fragment,{},n)}},s=a.forwardRef((function(t,n){var e=t.components,r=t.mdxType,l=t.originalType,m=t.parentName,d=o(t,["components","mdxType","originalType","parentName"]),s=p(e),c=r,k=s["".concat(m,".").concat(c)]||s[c]||u[c]||l;return e?a.createElement(k,i(i({ref:n},d),{},{components:e})):a.createElement(k,i({ref:n},d))}));function c(t,n){var e=arguments,r=n&&n.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=s;var o={};for(var m in n)hasOwnProperty.call(n,m)&&(o[m]=n[m]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=e[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,e)}s.displayName="MDXCreateElement"},4043:function(t,n,e){e.r(n),e.d(n,{assets:function(){return d},contentTitle:function(){return m},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var a=e(7462),r=e(3366),l=(e(7294),e(3905)),i=["components"],o={title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},m=void 0,p={unversionedId:"zh-cn/Questions/How_to_add_setting_panel",id:"zh-cn/Questions/How_to_add_setting_panel",title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",description:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",source:"@site/docs/zh-cn/Questions/How_to_add_setting_panel.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How_to_add_setting_panel",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},sidebar:"zh-cn",previous:{title:"\u5982\u4f55\u6dfb\u52a0\u89c6\u9891\u5e7f\u544a",permalink:"/document/zh-cn/Questions/How_to_add_video_ads"},next:{title:"\u4e0e React Portal \u4f7f\u7528",permalink:"/document/zh-cn/Questions/Use_with_react_portal"}},d={},u=[{value:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",level:2},{value:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",id:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",level:2}],s={toc:u};function c(t){var n=t.components,e=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},s,e,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"},"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"),(0,l.kt)("p",null,"\u8bbe\u7f6e\u9762\u677f\u7c7b\u4f3c\u4e8e\u5217\u8868\u9009\u62e9\u7684\u96c6\u5408\uff0c\u800c\u4e14\u652f\u6301\u591a\u5c42\u5d4c\u5957"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("Line truncated
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[740],{3905:function(t,n,e){e.d(n,{Zo:function(){return d},kt:function(){return c}});var a=e(7294);function r(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function l(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,a)}return e}function i(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?l(Object(e),!0).forEach((function(n){r(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function o(t,n){if(null==t)return{};var e,a,r=function(t,n){if(null==t)return{};var e,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||(r[e]=t[e]);return r}(t,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var m=a.createContext({}),p=function(t){var n=a.useContext(m),e=n;return t&&(e="function"==typeof t?t(n):i(i({},n),t)),e},d=function(t){var n=p(t.components);return a.createElement(m.Provider,{value:n},t.children)},u={inlineCode:"code",wrapper:function(t){var n=t.children;return a.createElement(a.Fragment,{},n)}},s=a.forwardRef((function(t,n){var e=t.components,r=t.mdxType,l=t.originalType,m=t.parentName,d=o(t,["components","mdxType","originalType","parentName"]),s=p(e),c=r,k=s["".concat(m,".").concat(c)]||s[c]||u[c]||l;return e?a.createElement(k,i(i({ref:n},d),{},{components:e})):a.createElement(k,i({ref:n},d))}));function c(t,n){var e=arguments,r=n&&n.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=s;var o={};for(var m in n)hasOwnProperty.call(n,m)&&(o[m]=n[m]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=e[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,e)}s.displayName="MDXCreateElement"},4043:function(t,n,e){e.r(n),e.d(n,{assets:function(){return d},contentTitle:function(){return m},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var a=e(7462),r=e(3366),l=(e(7294),e(3905)),i=["components"],o={title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},m=void 0,p={unversionedId:"zh-cn/Questions/How_to_add_setting_panel",id:"zh-cn/Questions/How_to_add_setting_panel",title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",description:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",source:"@site/docs/zh-cn/Questions/How_to_add_setting_panel.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How_to_add_setting_panel",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},sidebar:"zh-cn",previous:{title:"\u5982\u4f55\u6dfb\u52a0\u89c6\u9891\u5e7f\u544a",permalink:"/document/zh-cn/Questions/How_to_add_video_ads"},next:{title:"\u4e0e React Portal \u4f7f\u7528",permalink:"/document/zh-cn/Questions/Use_with_react_portal"}},d={},u=[{value:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",level:2},{value:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",id:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",level:2},{value:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",id:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",level:2}],s={toc:u};function c(t){var n=t.components,e=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},s,e,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"},"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"),(0,l.kt)("p",null,"\u8bbe\u7f6e\u9762\u677f\u7c7b\u4f3c\u4e8e\u5217\u8868\u9009\u62e9\u7684\u96c6\u5408\uff0c\u800c\u4e14\u652f\u6301\u591a\u5c42\u5d4c\u5957"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{pLine truncated
@@ -1,2 +1,2 @@
-/*! For license information please see main.1f458558.js.LICENSE.txt */
-(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[179],{9782:function(e,t){"use strict";t.Z={title:"Artplayer.js",tagline:"Public Product Api Document",url:"https://artplayer.org",baseUrl:"/document/",onBrokenLinks:"ignore",onBrokenMarkdownLinks:"ignore",organizationName:"zhw2590582",projectName:"Artplayer",favicon:"img/favicon.ico",clientModules:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/script/main.js"],themeConfig:{docs:{sidebar:{hideable:!0,autoCollapseCategories:!1},versionPersistence:"localStorage"},navbar:{title:"Artplayer.js",logo:{alt:"Artplayer.js",src:"img/logo.png",href:"https://artplayer.org/document",target:"_self",width:28,height:28},items:[{href:"https://artplayer.org",position:"left",label:"Online Editor"},{href:"https://github.com/zhw2590582/ArtPlayer",position:"left",label:"Github"},{href:"#",label:"QQ\u7fa4: 320881312",position:"right"},{label:"English",position:"right",items:[{label:"English",href:"/"},{label:"\u4e2d\u6587",href:"/zh-cn/"}]}],hideOnScroll:!1},footer:{style:"dark",copyright:"Copyright \xa9 2022 Artplayer.js, Inc. Built with Docusaurus.",links:[]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},plugins:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/node_modules/docusaurus-lunr-search/src/index.js"],presets:[["@docusaurus/preset-classic",{docs:{path:"./docs",routeBasePath:"/",sidebarPath:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/sidebars.js"},blog:!1,theme:{customCss:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/css/custom.css"}}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",locales:["en"],localeConfigs:{}},onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],stylesheets:[],titleDelimiter:"|",noIndex:!1}},723:function(e,t,n){"use strict";n.d(t,{Z:function(){return p}});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o);function l(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,t.message),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"2Line truncated
+/*! For license information please see main.e3d66510.js.LICENSE.txt */
+(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[179],{9782:function(e,t){"use strict";t.Z={title:"Artplayer.js",tagline:"Public Product Api Document",url:"https://artplayer.org",baseUrl:"/document/",onBrokenLinks:"ignore",onBrokenMarkdownLinks:"ignore",organizationName:"zhw2590582",projectName:"Artplayer",favicon:"img/favicon.ico",clientModules:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/script/main.js"],themeConfig:{docs:{sidebar:{hideable:!0,autoCollapseCategories:!1},versionPersistence:"localStorage"},navbar:{title:"Artplayer.js",logo:{alt:"Artplayer.js",src:"img/logo.png",href:"https://artplayer.org/document",target:"_self",width:28,height:28},items:[{href:"https://artplayer.org",position:"left",label:"Online Editor"},{href:"https://github.com/zhw2590582/ArtPlayer",position:"left",label:"Github"},{href:"#",label:"QQ\u7fa4: 320881312",position:"right"},{label:"English",position:"right",items:[{label:"English",href:"/"},{label:"\u4e2d\u6587",href:"/zh-cn/"}]}],hideOnScroll:!1},footer:{style:"dark",copyright:"Copyright \xa9 2022 Artplayer.js, Inc. Built with Docusaurus.",links:[]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},plugins:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/node_modules/docusaurus-lunr-search/src/index.js"],presets:[["@docusaurus/preset-classic",{docs:{path:"./docs",routeBasePath:"/",sidebarPath:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/sidebars.js"},blog:!1,theme:{customCss:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/css/custom.css"}}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",locales:["en"],localeConfigs:{}},onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],stylesheets:[],titleDelimiter:"|",noIndex:!1}},723:function(e,t,n){"use strict";n.d(t,{Z:function(){return p}});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o);function l(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,t.message),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"2Line truncated
@@ -1 +1 @@
-!function(){"use strict";var e,t,n,r,a,f={},c={};function o(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,loaded:!1,exports:{}};return f[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}o.m=f,o.c=c,e=[],o.O=function(t,n,r,a){if(!n){var f=1/0;for(d=0;d<e.length;d++){n=e[d][0],r=e[d][1],a=e[d][2];for(var c=!0,u=0;u<n.length;u++)(!1&a||f>=a)&&Object.keys(o.O).every((function(e){return o.O[e](n[u])}))?n.splice(u--,1):(c=!1,a<f&&(f=a));if(c){e.splice(d--,1);var i=r();void 0!==i&&(t=i)}}return t}a=a||0;for(var d=e.length;d>0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[n,r,a]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var a=Object.create(null);o.r(a);var f={};t=t||[null,n({}),n([]),n(n)];for(var c=2&r&&e;"object"==typeof c&&!~t.indexOf(c);c=n(c))Object.getOwnPropertyNames(c).forEach((function(t){f[t]=function(){return e[t]}}));return f.default=function(){return e},o.d(a,f),a},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=function(e){return Promise.all(Object.keys(o.f).reduce((function(t,n){return o.f[n](e,t),t}),[]))},o.u=function(e){return"assets/js/"+({14:"faf6497a",28:"58e1c627",48:"60b6f9d9",53:"935f2afb",78:"3bed75f7",87:"a5cb9b40",122:"bd0361f4",146:"9bc5160c",167:"8707c5fa",178:"a2b05b94",201:"289862a0",220:"5d64abea",228:"a94f89e4",235:"a87a33e0",250:"3295c742",280:"3242b9a0",283:"8aff36b5",359:"6d693eaf",376:"c1870555",514:"1be78505",558:"41890f3a",591:"f4b604e6",601:"6edbf6fb",610:"3c6a0f85",615:"1fd37a74",619:"55c4a126",645:"571421b9",667:"701cf4af",696:"ba9533a1",740:"f1478c6c",784:"1cbc9196",881:"e434372a",898:"0d27fd9a",918:"17896441"}[e]||e)+"."+{14:"f311cd28",28:"71c47112",48:"7382891b",53:"c5b9b73a",78:"89a2840e",87:"ce0a3988",122:"2c38bfb6",146:"7239afe4",167:"6e21eb8c",178:"2a8252df",201:"a7079592",220:"4742c5c1",228:"0bd2855e",235:"b7afa659",245:"dd7e9f1f",250:"ca6915be",280:"fb7cd5de",283:"ec084d59",343:"e9b08a58",359:"1c24bfc1",376:"dfe03f8f",514:"b9120311",558:"03cff5ae",591:"ffa660e1",601:"523bcc96",608:"1d321a91",610:"53e0bc80",615:"d6a451a2",619:"943e022d",645:"bd81ea31",667:"8fc6a305",696:"14b85236",740:"5e37d669",784:"2dd1fd8d",878:"0f9d5667",881:"c02b87d1",898:"dc1b5780",918:"8d80cfd5"}[e]+".js"},o.miniCssF=function(e){},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},a="artplayer-document:",o.l=function(e,t,n,f){if(r[e])r[e].push(t);else{var c,u;if(void 0!==n)for(var i=document.getElementsByTagName("script"),d=0;d<i.length;d++){var b=i[d];if(b.getAttribute("src")==e||b.getAttribute("data-webpack")==a+n){c=b;break}}c||(u=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",a+n),c.src=e),r[e]=[t];var l=function(t,n){c.onerror=c.onload=null,clearTimeout(s);var a=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),a&&a.forEach((function(e){return e(n)})),t)return t(n)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=l.bind(null,c.onerror),c.onload=l.bind(null,c.onload),u&&document.head.appendChild(c)}},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/document/",o.gca=function(e){return e={17896441:"918",faf6497a:"14","58e1c627":"28","60b6f9d9":"48","935f2afb":"53","3bed75f7":"78",a5cb9b40:"87",bd0361f4:"122","9bc5160c":"146","8707c5fa":"167",a2b05b94:"178","289862a0":"201","5d64abea":"220",a94f89e4:"228",a87a33e0:"235","3295c742":"250","3242b9a0":"280","8aff36b5":"283","6d693eaf":"359",c1870555:"376","1be78505":"514","41890f3a":"558",f4b604e6:"591","6edbf6fb":"601","3c6a0f85":"610","1fd37a74":"615","55c4a126":"619","571421b9":"645","701cf4af":"667",ba9533a1:"696",f1478c6c:"740","1cbc9196":"784",e434372a:"881","0d27fd9a":"898"}[e]||e,o.p+o.u(e)},function(){var e={303:0,532:0};o.f.j=function(t,n){var r=o.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var a=new Promise((function(n,a){r=e[t]=[n,a]}));n.push(r[2]=a);var f=o.p+o.u(t),c=new Error;o.l(f,(function(n){if(o.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var a=n&&("load"===n.type?"missing":n.type),f=n&&n.target&&n.target.src;c.message="Loading chunk "+t+" failed.\n("+a+": "+f+")",c.name="ChunkLoadError",c.type=a,c.request=f,r[1](c)}}),"chunk-"+t,t)}},o.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,a,f=n[0],c=n[1],u=n[2],i=0;if(f.some((function(t){return 0Line truncated
+!function(){"use strict";var e,t,n,r,a,f={},c={};function o(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,loaded:!1,exports:{}};return f[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}o.m=f,o.c=c,e=[],o.O=function(t,n,r,a){if(!n){var f=1/0;for(d=0;d<e.length;d++){n=e[d][0],r=e[d][1],a=e[d][2];for(var c=!0,u=0;u<n.length;u++)(!1&a||f>=a)&&Object.keys(o.O).every((function(e){return o.O[e](n[u])}))?n.splice(u--,1):(c=!1,a<f&&(f=a));if(c){e.splice(d--,1);var i=r();void 0!==i&&(t=i)}}return t}a=a||0;for(var d=e.length;d>0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[n,r,a]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var a=Object.create(null);o.r(a);var f={};t=t||[null,n({}),n([]),n(n)];for(var c=2&r&&e;"object"==typeof c&&!~t.indexOf(c);c=n(c))Object.getOwnPropertyNames(c).forEach((function(t){f[t]=function(){return e[t]}}));return f.default=function(){return e},o.d(a,f),a},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=function(e){return Promise.all(Object.keys(o.f).reduce((function(t,n){return o.f[n](e,t),t}),[]))},o.u=function(e){return"assets/js/"+({14:"faf6497a",28:"58e1c627",48:"60b6f9d9",53:"935f2afb",78:"3bed75f7",87:"a5cb9b40",122:"bd0361f4",146:"9bc5160c",167:"8707c5fa",178:"a2b05b94",201:"289862a0",220:"5d64abea",228:"a94f89e4",235:"a87a33e0",250:"3295c742",280:"3242b9a0",283:"8aff36b5",359:"6d693eaf",376:"c1870555",514:"1be78505",558:"41890f3a",591:"f4b604e6",601:"6edbf6fb",610:"3c6a0f85",615:"1fd37a74",619:"55c4a126",645:"571421b9",667:"701cf4af",696:"ba9533a1",740:"f1478c6c",784:"1cbc9196",881:"e434372a",898:"0d27fd9a",918:"17896441"}[e]||e)+"."+{14:"f311cd28",28:"71c47112",48:"7382891b",53:"c5b9b73a",78:"89a2840e",87:"ce0a3988",122:"2c38bfb6",146:"7239afe4",167:"6e21eb8c",178:"2a8252df",201:"a7079592",220:"4742c5c1",228:"0bd2855e",235:"b7afa659",245:"dd7e9f1f",250:"ca6915be",280:"408d806c",283:"ec084d59",343:"e9b08a58",359:"1c24bfc1",376:"dfe03f8f",514:"b9120311",558:"03cff5ae",591:"ffa660e1",601:"523bcc96",608:"1d321a91",610:"53e0bc80",615:"d6a451a2",619:"943e022d",645:"bd81ea31",667:"8fc6a305",696:"14b85236",740:"862a408c",784:"2dd1fd8d",878:"0f9d5667",881:"c02b87d1",898:"dc1b5780",918:"8d80cfd5"}[e]+".js"},o.miniCssF=function(e){},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},a="artplayer-document:",o.l=function(e,t,n,f){if(r[e])r[e].push(t);else{var c,u;if(void 0!==n)for(var i=document.getElementsByTagName("script"),d=0;d<i.length;d++){var b=i[d];if(b.getAttribute("src")==e||b.getAttribute("data-webpack")==a+n){c=b;break}}c||(u=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",a+n),c.src=e),r[e]=[t];var l=function(t,n){c.onerror=c.onload=null,clearTimeout(s);var a=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),a&&a.forEach((function(e){return e(n)})),t)return t(n)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=l.bind(null,c.onerror),c.onload=l.bind(null,c.onload),u&&document.head.appendChild(c)}},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/document/",o.gca=function(e){return e={17896441:"918",faf6497a:"14","58e1c627":"28","60b6f9d9":"48","935f2afb":"53","3bed75f7":"78",a5cb9b40:"87",bd0361f4:"122","9bc5160c":"146","8707c5fa":"167",a2b05b94:"178","289862a0":"201","5d64abea":"220",a94f89e4:"228",a87a33e0:"235","3295c742":"250","3242b9a0":"280","8aff36b5":"283","6d693eaf":"359",c1870555:"376","1be78505":"514","41890f3a":"558",f4b604e6:"591","6edbf6fb":"601","3c6a0f85":"610","1fd37a74":"615","55c4a126":"619","571421b9":"645","701cf4af":"667",ba9533a1:"696",f1478c6c:"740","1cbc9196":"784",e434372a:"881","0d27fd9a":"898"}[e]||e,o.p+o.u(e)},function(){var e={303:0,532:0};o.f.j=function(t,n){var r=o.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var a=new Promise((function(n,a){r=e[t]=[n,a]}));n.push(r[2]=a);var f=o.p+o.u(t),c=new Error;o.l(f,(function(n){if(o.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var a=n&&("load"===n.type?"missing":n.type),f=n&&n.target&&n.target.src;c.message="Loading chunk "+t+" failed.\n("+a+": "+f+")",c.name="ChunkLoadError",c.type=a,c.request=f,r[1](c)}}),"chunk-"+t,t)}},o.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,a,f=n[0],c=n[1],u=n[2],i=0;if(f.some((function(t){return 0Line truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Static propertys | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/class"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Static propertys | Artplayer.js"><meta data-rh="true" name="description" content="Static attributes exist in the constructor artplayer, and the player instance is not directly associated"><meta data-rh="true" property="og:description" content="Static attributes exist in the constructor artplayer, and the player instance is not directly associated"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/class"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/class" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/class" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Danmuku plugin | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Plugins/danmuku"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Danmuku plugin | Artplayer.js"><meta data-rh="true" name="description" content="Demo"><meta data-rh="true" property="og:description" content="Demo"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Plugins/danmuku"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Plugins/danmuku" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Plugins/danmuku" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Add button to the controls | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/Create_button_in_the_controls"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Add button to the controls | Artplayer.js"><meta data-rh="true" name="description" content="▶ Run Code"><meta data-rh="true" property="og:description" content="▶ Run Code"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Create_button_in_the_controls"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create_button_in_the_controls" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create_button_in_the_controls" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Add select in the controls | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/Create_selector_in_the_controls"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Add select in the controls | Artplayer.js"><meta data-rh="true" name="description" content="Sometimes you need to add a list in the controls, then you can use the selector and onSelect attribute when adding controls"><meta data-rh="true" property="og:description" content="Sometimes you need to add a list in the controls, then you can use the selector and onSelect attribute when adding controls"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Create_selector_in_the_controls"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create_selector_in_the_controls" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create_selector_in_the_controls" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Handle a single component | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/Handle_single_component"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Handle a single component | Artplayer.js"><meta data-rh="true" name="description" content="When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component."><meta data-rh="true" property="og:description" content="When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component."><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Handle_single_component"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Handle_single_component" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Handle_single_component" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">How to add setting panel | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/How_to_add_setting_panel"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="How to add setting panel | Artplayer.js"><meta data-rh="true" name="description" content="Add selector list"><meta data-rh="true" property="og:description" content="Add selector list"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/How_to_add_setting_panel"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_add_setting_panel" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_add_setting_panel" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">How to add video ads | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/How_to_add_video_ads"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="How to add video ads | Artplayer.js"><meta data-rh="true" name="description" content="Video ads play before main video playback, support multiple video ads"><meta data-rh="true" property="og:description" content="Video ads play before main video playback, support multiple video ads"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/How_to_add_video_ads"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_add_video_ads" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_add_video_ads" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">How to import types | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/How_to_import_types"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="How to import types | Artplayer.js"><meta data-rh="true" name="description" content="Sometimes you lose TypeScript syntax prompt, then you can import types manually"><meta data-rh="true" property="og:description" content="Sometimes you lose TypeScript syntax prompt, then you can import types manually"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/How_to_import_types"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_import_types" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How_to_import_types" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Use with React Portal | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/en/Questions/Use_with_react_portal"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Use with React Portal | Artplayer.js"><meta data-rh="true" name="description" content="It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal."><meta data-rh="true" property="og:description" content="It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal."><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Use_with_react_portal"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Use_with_react_portal" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Use_with_react_portal" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Common events | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/events"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Common events | Artplayer.js"><meta data-rh="true" name="description" content="The event of the player is divided into two, a native event of a video, and another is a custom event. The native event comes from Video Elements, is the original event of the Video Element, in order to distinguish it and custom events, the native event adds a prefix video:"><meta data-rh="true" property="og:description" content="The event of the player is divided into two, a native event of a video, and another is a custom event. The native event comes from Video Elements, is the original event of the Video Element, in order to distinguish it and custom events, the native event adds a prefix video:"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/events"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/events" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/events" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Quick start | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Quick start | Artplayer.js"><meta data-rh="true" name="description" content="Install"><meta data-rh="true" property="og:description" content="Install"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/" hreflang="x-default"><script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/document/</span> </p>\n   <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div id="docusaurus-base-url-issue-banner-container"></div><div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="Line truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Third party librarys | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/libraries"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Third party librarys | Artplayer.js"><meta data-rh="true" name="description" content="flv.js"><meta data-rh="true" property="og:description" content="flv.js"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/libraries"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/libraries" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/libraries" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -1 +0,0 @@
-{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,284.908,1,410.494,2,252.433]],["content/0",[0,4.016,1,5.786,2,5.137,3,0.155,4,0.451,5,0.451,6,0.781,7,7.754,8,6.44,9,0.516,10,0.523,11,0.685,12,0.504,13,0.523,14,0.475,15,0.642,16,4.274,17,4.389,18,3.289,19,8.516,20,8.516,21,8.516,22,6.014,23,2.185,24,7.519,25,6.423,26,5.656,27,7.179,28,2.926,29,5.216,30,7.519]],["keywords/0",[]],["title/1",[31,563.652,32,604.135,33,443.513]],["content/1",[0,3.571,2,4.052,3,0.15,4,0.242,5,0.242,6,0.907,9,0.277,10,0.28,11,0.422,12,0.271,13,0.28,14,0.255,15,0.345,16,3.8,17,2.355,18,3.745,31,4.264,32,4.57,33,10.964,34,3.181,35,5.73,36,6.589,37,5.035,38,7.457,39,2.324,40,5.067,41,5.976,42,7.331,43,5.035,44,4.57,45,5.035,46,5.73,47,6.553,48,2.909,49,5.727,50,8.344,51,3.852,52,5.035,53,5.035,54,1.67,55,0.963,56,0.999,57,0.771,58,4.035,59,11.28,60,4.57,61,4.035,62,11.28,63,4.57,64,4.035,65,11.28,66,4.57,67,8.562,68,4.57,69,4.57,70,4.57,71,5.035,72,5.035,73,5.035,74,4.264]],["keywords/1",[]],["title/2",[39,391.237,75,769.442]],["content/2",[]],["keywords/2",[]],["title/3",[48,674.382]],["content/3",[3,0.143,4,0.533,5,0.533,6,0.639,7,5.407,9,0.61,10,0.617,11,0.77,12,0.596,13,0.617,14,0.561,15,0.759,39,5.115,48,8.802,51,8.481,56,2.198,57,1.697,74,9.386,76,1.85,77,8.467,78,11.084,79,4.919,80,5.845,81,12.207,82,11.084,83,10.06]],["keywords/3",[]],["title/4",[84,988.31]],["content/4",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,84,13.308,85,5.407,86,9.27,87,6.648,88,14.264]],["keywords/4",[]],["title/5",[89,1059.293]],["content/5",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,85,5.407,86,9.27,90,15.715,91,15.715,92,14.264]],["keywords/5",[]],["title/6",[93,988.31]],["content/6",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,93,13.525,94,13.525,95,14.497]],["keywords/6",[]],["title/7",[96,801.123]],["content/7",[3,0.109,4,0.743,5,0.743,28,4.824,39,7.138,46,8.295,76,2.582,97,15.466,98,13.097,99,4.824,100,14.038]],["keywords/7",[]],["title/8",[101,988.31]],["content/8",[3,0.111,4,0.755,5,0.755,28,4.901,76,2.624,79,5.075,101,13.308,102,15.715,103,8.903,104,14.264]],["keywords/8",[]],["title/9",[105,988.31]],["content/9",[23,3.98,76,2.853,79,5.518,103,9.681,105,14.471]],["keywords/9",[]],["title/10",[103,661.193]],["content/10",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,103,9.049,106,7.907,107,14.497]],["keywords/10",[]],["title/11",[18,409.127]],["content/11",[3,0.106,4,0.721,5,0.721,18,5.256,40,7.109,76,2.503,79,4.841,85,6.384,106,7.422,108,14.992,109,12.015,110,13.608]],["keywords/11",[]],["title/12",[111,1059.293]],["content/12",[3,0.106,4,0.721,5,0.721,23,4.321,76,3.098,112,13.608,113,14.992,114,13.608,115,13.608,116,16.842]],["keywords/12",[]],["title/13",[76,141.526,117,581.914]],["content/13",[3,0.158,11,0.97,23,2.417,48,8.409,76,2.805,117,9.989,118,9.42,119,8.788,120,9.42,121,10.378,122,6.727,123,9.42,124,9.42,125,9.42,126,6.557,127,9.42,128,9.42,129,9.42,130,9.42]],["keywords/13",[]],["title/14",[0,284.908,99,207.594,131,563.652]],["content/14",[0,2.04,2,1.807,3,0.157,4,0.229,5,0.229,6,0.275,9,0.262,10,0.265,11,0.403,12,0.256,13,0.265,14,0.52,16,3.63,17,3.728,18,2.794,22,3.539,23,2.392,28,3.204,35,2.556,55,1.966,56,0.945,57,1.22,81,3.819,86,4.701,99,4.506,131,13.619,132,5.617,133,3.646,134,4.765,135,3.271,136,2.811,137,4.035,138,2.395,139,2.753,140,2.601,141,4.325,142,4.325,143,12.008,144,7.234,145,2.17,146,3.271,147,3.175,148,5.471,149,5.166,150,4.765,151,16.082,152,4.325,153,2.872,154,7.97,155,3.502,156,8.699,157,4.325,158,2.872,159,4.325,160,3.539,161,4.325,162,4.325,163,4.765,164,4.325,165,4.325,166,4.325,167,4.325]],["keywords/14",[]],["title/15",[0,284.908,54,220.767,168,443.513]],["content/15",[]],["keywords/15",[]],["title/16",[0,284.908,169,420.526,170,533.415]],["content/16",[3,0.155,4,0.179,5,0.179,6,0.215,9,0.205,10,0.208,11,0.327,12,0.2,13,0.208,14,0.641,15,0.255,18,6.118,22,1.656,23,1.994,25,5.482,35,3.469,39,1.721,41,5.56,42,2.2,54,2.84,55,2.424,76,0.623,77,2.073,85,1.283,87,1.578,106,5.06,136,2.2,153,3.899,155,2.741,168,4.309,169,9.904,170,5.183,171,3.729,172,3.729,173,8.654,174,6.467,175,14.395,176,3.385,177,3.595,178,3.899,179,5.551,180,6.625,181,1.173,182,7.178,183,2.113,184,2.248,185,2.2,186,2.3,187,3.355,188,3.385,189,5.878,190,5.183,191,3.158,192,2.989,193,2.989,194,3.158,195,2.989,196,2.989,197,4.753,198,2.741,199,4.192,200,3.251,201,5.878,202,2.741,203,3.385,204,5.87,205,3.385,206,2.989,207,3.385,208,3.385,209,3.385,210,3.385,211,7.511]],["keywords/16",[]],["title/17",[0,284.908,1,410.494,212,401.235]],["content/17",[1,4.836,3,0.153,4,0.225,5,0.225,6,0.269,9,0.257,10,0.26,11,0.397,12,0.251,13,0.26,14,0.236,15,0.32,18,5.015,23,3.078,25,6.268,39,2.157,40,2.216,41,6.356,42,2.757,54,4.745,55,2.738,76,0.78,85,1.608,106,3.882,126,2.953,153,7.151,169,7.495,176,4.242,177,4.359,178,7.151,179,3.03,180,3.03,181,1.47,182,6.72,183,2.648,184,2.817,185,2.757,186,2.882,189,3.208,197,3.435,199,5.083,200,5.962,201,3.208,211,3.435,212,7.968,213,5.763,214,10.767,215,3.958,216,3.03Line truncated
@@ -0,0 +1 @@
+{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,282.912,1,412.166,2,253.705]],["content/0",[0,4.016,1,5.851,2,5.185,3,0.144,4,0.453,5,0.453,6,0.781,7,7.811,8,6.511,9,0.518,10,0.524,11,0.686,12,0.506,13,0.524,14,0.476,15,0.644,16,4.324,17,4.44,18,3.268,19,8.607,20,8.607,21,8.607,22,6.068,23,2.183,24,7.6,25,6.392,26,5.719,27,7.257,28,2.963,29,5.089,30,7.6]],["keywords/0",[]],["title/1",[31,583.971,32,141.621]],["content/1",[3,0.147,11,0.967,23,2.412,31,10.063,32,2.814,33,9.51,34,8.874,35,9.51,36,10.477,37,6.795,38,9.51,39,9.51,40,9.51,41,8.473,42,6.32,43,9.51,44,9.51,45,9.51,46,9.51]],["keywords/1",[]],["title/2",[47,771.901,48,387.765]],["content/2",[]],["keywords/2",[]],["title/3",[41,676.489]],["content/3",[3,0.133,4,0.534,5,0.534,6,0.64,7,5.46,9,0.611,10,0.618,11,0.77,12,0.597,13,0.618,14,0.562,15,0.76,32,1.862,41,8.863,48,5.099,49,8.228,50,11.181,51,4.96,52,5.901,53,12.287,54,8.558,55,11.181,56,9.47,57,2.226,58,1.721,59,10.15]],["keywords/3",[]],["title/4",[60,990.88]],["content/4",[3,0.103,4,0.753,5,0.753,32,2.628,51,5.105,60,13.364,61,5.339,62,9.314,63,6.683,64,14.323]],["keywords/4",[]],["title/5",[65,1061.968]],["content/5",[3,0.103,4,0.753,5,0.753,32,2.628,51,5.105,61,5.339,62,9.314,66,15.778,67,15.778,68,14.323]],["keywords/5",[]],["title/6",[69,990.88]],["content/6",[3,0.104,4,0.765,5,0.765,28,5.011,32,2.67,51,5.187,69,13.579,70,13.579,71,14.553]],["keywords/6",[]],["title/7",[72,803.417]],["content/7",[3,0.101,4,0.741,5,0.741,28,4.855,32,2.587,48,7.083,73,15.533,74,13.156,75,8.338,76,4.855,77,14.1]],["keywords/7",[]],["title/8",[78,990.88]],["content/8",[3,0.103,4,0.753,5,0.753,28,4.931,32,2.628,51,5.105,78,13.364,79,15.778,80,8.946,81,14.323]],["keywords/8",[]],["title/9",[82,990.88]],["content/9",[23,3.944,32,2.853,51,5.544,80,9.714,82,14.511]],["keywords/9",[]],["title/10",[80,663.28]],["content/10",[3,0.104,4,0.765,5,0.765,28,5.011,32,2.67,51,5.187,80,9.089,83,7.718,84,14.553]],["keywords/10",[]],["title/11",[18,403.228]],["content/11",[3,0.098,4,0.719,5,0.719,18,5.192,32,2.509,51,4.874,61,6.3,83,7.252,85,15.064,86,7.054,87,12.075,88,13.674]],["keywords/11",[]],["title/12",[89,1061.968]],["content/12",[3,0.098,4,0.719,5,0.719,23,4.285,32,3.101,90,13.674,91,15.064,92,13.674,93,13.674,94,16.899]],["keywords/12",[]],["title/13",[95,565.711,96,606.296,97,445.269]],["content/13",[0,3.579,2,4.103,3,0.139,4,0.244,5,0.244,6,0.907,9,0.279,10,0.283,11,0.424,12,0.273,13,0.283,14,0.257,15,0.347,16,3.853,17,2.393,18,3.723,41,2.955,48,2.33,54,3.911,56,4.329,57,1.018,58,0.786,75,5.798,86,5.058,95,4.329,96,4.639,97,11.042,98,3.231,99,5.798,100,6.665,101,5.111,102,7.519,103,5.875,104,7.255,105,5.111,106,4.639,107,5.111,108,6.622,109,5.802,110,8.449,111,5.111,112,5.111,113,1.668,114,0.968,115,4.097,116,11.39,117,4.639,118,4.097,119,11.39,120,4.639,121,4.097,122,11.39,123,4.639,124,8.658,125,4.639,126,4.639,127,4.639,128,5.111,129,5.111,130,5.111]],["keywords/13",[]],["title/14",[86,312.754,131,535.398,132,535.398]],["content/14",[2,3.104,3,0.144,7,5.127,9,0.574,11,0.247,13,0.272,14,0.247,16,2.239,18,2.817,22,2.182,23,1.881,29,2.635,31,7.209,42,7.383,54,3.758,58,2.603,80,2.783,86,3.827,95,4.158,97,3.273,99,4.387,100,3.03,102,3.879,131,8.415,132,3.935,133,4.909,134,4.457,135,3.483,136,4.909,137,4.909,138,4.909,139,4.457,140,4.909,141,3.758,142,4.457,143,6.922,144,4.457,145,4.457,146,4.457,147,4.457,148,4.457,149,4.457,150,4.457,151,3.991,152,4.457,153,4.457,154,4.457,155,4.457,156,4.457,157,3.372,158,4.457,159,4.457,160,4.457,161,4.457,162,4.457,163,4.457,164,7.418,165,7.418,166,4.457,167,2.239,168,3.03,169,4.457,170,3.609,171,4.457,172,3.758,173,4.457,174,4.158,175,4.457,176,4.457,177,4.457,178,4.457,179,7.418,180,7.418,181,4.457,182,6.922,183,4.457,184,4.457,185,7.418,186,4.457,187,4.457]],["keywords/14",[]],["title/15",[188,456.457,189,392.885]],["content/15",[]],["keywords/15",[]],["title/16",[141,895.388]],["content/16",[3,0.114,141,13.342,190,15.824,191,12.365]],["keywords/16",[]],["title/17",[192,829.86]],["content/17",[]],["keywords/17",[]],["title/18",[192,603.191,193,650.821]],["content/18",[3,0.11,11,0.846,188,9.041,189,7.782,192,11.948,193,12.891]],["keywords/18",[]],["title/19",[192,603.191,194,681.637]],["content/19",[0,6.579,3,0.101,11,0.953,31,10.667,188,10.183,189,8.765,194,12.451,195,8.806]],["keywords/19",[]],["title/20",[192,603.191,196,771.901]],["content/20",[23,3.69,189,8.935,197,13.579,198,14.553,199,16.032,200,12.851,201,16.032,202,14.553]],["keywords/20",[]],["title/21",[86,547.81]],["content/21",[]],["keywords/21",[]],["title/22",[49,358.528,86,312.754,203,565.711]],["content/22",[3,0.139,4,0.212,5,0.212,6,0.255,7,5.615,8,9.584,9,0.243,10,0.246,11,0.378,12,0.238,13,0.246,14,0.223,15,0.302,23,1.024,26,2.684,29,7.978,47,4.039,49,2.389,58,0.685,63,3.187,76,1.391,83,3.623,86,2.084,113,1.453,114,2.815,172,5.759,188,2.389,189,2.056,195,2.523,203,3.769,204,2.573,205,2.523,206,2.523,207,6.397,208,3.567,209,10.306,210,7.764,211,4.039,212,9.217,213,2.767Line truncated
@@ -1 +1 @@
-{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,284.908,1,410.494,2,252.433]],["content/0",[0,4.016,1,5.786,2,5.137,3,0.155,4,0.451,5,0.451,6,0.781,7,7.754,8,6.44,9,0.516,10,0.523,11,0.685,12,0.504,13,0.523,14,0.475,15,0.642,16,4.274,17,4.389,18,3.289,19,8.516,20,8.516,21,8.516,22,6.014,23,2.185,24,7.519,25,6.423,26,5.656,27,7.179,28,2.926,29,5.216,30,7.519]],["keywords/0",[]],["title/1",[31,563.652,32,604.135,33,443.513]],["content/1",[0,3.571,2,4.052,3,0.15,4,0.242,5,0.242,6,0.907,9,0.277,10,0.28,11,0.422,12,0.271,13,0.28,14,0.255,15,0.345,16,3.8,17,2.355,18,3.745,31,4.264,32,4.57,33,10.964,34,3.181,35,5.73,36,6.589,37,5.035,38,7.457,39,2.324,40,5.067,41,5.976,42,7.331,43,5.035,44,4.57,45,5.035,46,5.73,47,6.553,48,2.909,49,5.727,50,8.344,51,3.852,52,5.035,53,5.035,54,1.67,55,0.963,56,0.999,57,0.771,58,4.035,59,11.28,60,4.57,61,4.035,62,11.28,63,4.57,64,4.035,65,11.28,66,4.57,67,8.562,68,4.57,69,4.57,70,4.57,71,5.035,72,5.035,73,5.035,74,4.264]],["keywords/1",[]],["title/2",[39,391.237,75,769.442]],["content/2",[]],["keywords/2",[]],["title/3",[48,674.382]],["content/3",[3,0.143,4,0.533,5,0.533,6,0.639,7,5.407,9,0.61,10,0.617,11,0.77,12,0.596,13,0.617,14,0.561,15,0.759,39,5.115,48,8.802,51,8.481,56,2.198,57,1.697,74,9.386,76,1.85,77,8.467,78,11.084,79,4.919,80,5.845,81,12.207,82,11.084,83,10.06]],["keywords/3",[]],["title/4",[84,988.31]],["content/4",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,84,13.308,85,5.407,86,9.27,87,6.648,88,14.264]],["keywords/4",[]],["title/5",[89,1059.293]],["content/5",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,85,5.407,86,9.27,90,15.715,91,15.715,92,14.264]],["keywords/5",[]],["title/6",[93,988.31]],["content/6",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,93,13.525,94,13.525,95,14.497]],["keywords/6",[]],["title/7",[96,801.123]],["content/7",[3,0.109,4,0.743,5,0.743,28,4.824,39,7.138,46,8.295,76,2.582,97,15.466,98,13.097,99,4.824,100,14.038]],["keywords/7",[]],["title/8",[101,988.31]],["content/8",[3,0.111,4,0.755,5,0.755,28,4.901,76,2.624,79,5.075,101,13.308,102,15.715,103,8.903,104,14.264]],["keywords/8",[]],["title/9",[105,988.31]],["content/9",[23,3.98,76,2.853,79,5.518,103,9.681,105,14.471]],["keywords/9",[]],["title/10",[103,661.193]],["content/10",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,103,9.049,106,7.907,107,14.497]],["keywords/10",[]],["title/11",[18,409.127]],["content/11",[3,0.106,4,0.721,5,0.721,18,5.256,40,7.109,76,2.503,79,4.841,85,6.384,106,7.422,108,14.992,109,12.015,110,13.608]],["keywords/11",[]],["title/12",[111,1059.293]],["content/12",[3,0.106,4,0.721,5,0.721,23,4.321,76,3.098,112,13.608,113,14.992,114,13.608,115,13.608,116,16.842]],["keywords/12",[]],["title/13",[76,141.526,117,581.914]],["content/13",[3,0.158,11,0.97,23,2.417,48,8.409,76,2.805,117,9.989,118,9.42,119,8.788,120,9.42,121,10.378,122,6.727,123,9.42,124,9.42,125,9.42,126,6.557,127,9.42,128,9.42,129,9.42,130,9.42]],["keywords/13",[]],["title/14",[0,284.908,99,207.594,131,563.652]],["content/14",[0,2.04,2,1.807,3,0.157,4,0.229,5,0.229,6,0.275,9,0.262,10,0.265,11,0.403,12,0.256,13,0.265,14,0.52,16,3.63,17,3.728,18,2.794,22,3.539,23,2.392,28,3.204,35,2.556,55,1.966,56,0.945,57,1.22,81,3.819,86,4.701,99,4.506,131,13.619,132,5.617,133,3.646,134,4.765,135,3.271,136,2.811,137,4.035,138,2.395,139,2.753,140,2.601,141,4.325,142,4.325,143,12.008,144,7.234,145,2.17,146,3.271,147,3.175,148,5.471,149,5.166,150,4.765,151,16.082,152,4.325,153,2.872,154,7.97,155,3.502,156,8.699,157,4.325,158,2.872,159,4.325,160,3.539,161,4.325,162,4.325,163,4.765,164,4.325,165,4.325,166,4.325,167,4.325]],["keywords/14",[]],["title/15",[0,284.908,54,220.767,168,443.513]],["content/15",[]],["keywords/15",[]],["title/16",[0,284.908,169,420.526,170,533.415]],["content/16",[3,0.155,4,0.179,5,0.179,6,0.215,9,0.205,10,0.208,11,0.327,12,0.2,13,0.208,14,0.641,15,0.255,18,6.118,22,1.656,23,1.994,25,5.482,35,3.469,39,1.721,41,5.56,42,2.2,54,2.84,55,2.424,76,0.623,77,2.073,85,1.283,87,1.578,106,5.06,136,2.2,153,3.899,155,2.741,168,4.309,169,9.904,170,5.183,171,3.729,172,3.729,173,8.654,174,6.467,175,14.395,176,3.385,177,3.595,178,3.899,179,5.551,180,6.625,181,1.173,182,7.178,183,2.113,184,2.248,185,2.2,186,2.3,187,3.355,188,3.385,189,5.878,190,5.183,191,3.158,192,2.989,193,2.989,194,3.158,195,2.989,196,2.989,197,4.753,198,2.741,199,4.192,200,3.251,201,5.878,202,2.741,203,3.385,204,5.87,205,3.385,206,2.989,207,3.385,208,3.385,209,3.385,210,3.385,211,7.511]],["keywords/16",[]],["title/17",[0,284.908,1,410.494,212,401.235]],["content/17",[1,4.836,3,0.153,4,0.225,5,0.225,6,0.269,9,0.257,10,0.26,11,0.397,12,0.251,13,0.26,14,0.236,15,0.32,18,5.015,23,3.078,25,6.268,39,2.157,40,2.216,41,6.356,42,2.757,54,4.745,55,2.738,76,0.78,85,1.608,106,3.882,126,2.953,153,7.151,169,7.495,176,4.242,177,4.359,178,7.151,179,3.03,180,3.03,181,1.47,182,6.72,183,2.648,184,2.817,185,2.757,186,2.882,189,3.208,197,3.435,199,5.083,200,5.962,201,3.208,211,3.435,212,7.968,213,5.763,214,10.767,215,3.958,216,3.03Line truncated
+{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,282.912,1,412.166,2,253.705]],["content/0",[0,4.016,1,5.851,2,5.185,3,0.144,4,0.453,5,0.453,6,0.781,7,7.811,8,6.511,9,0.518,10,0.524,11,0.686,12,0.506,13,0.524,14,0.476,15,0.644,16,4.324,17,4.44,18,3.268,19,8.607,20,8.607,21,8.607,22,6.068,23,2.183,24,7.6,25,6.392,26,5.719,27,7.257,28,2.963,29,5.089,30,7.6]],["keywords/0",[]],["title/1",[31,583.971,32,141.621]],["content/1",[3,0.147,11,0.967,23,2.412,31,10.063,32,2.814,33,9.51,34,8.874,35,9.51,36,10.477,37,6.795,38,9.51,39,9.51,40,9.51,41,8.473,42,6.32,43,9.51,44,9.51,45,9.51,46,9.51]],["keywords/1",[]],["title/2",[47,771.901,48,387.765]],["content/2",[]],["keywords/2",[]],["title/3",[41,676.489]],["content/3",[3,0.133,4,0.534,5,0.534,6,0.64,7,5.46,9,0.611,10,0.618,11,0.77,12,0.597,13,0.618,14,0.562,15,0.76,32,1.862,41,8.863,48,5.099,49,8.228,50,11.181,51,4.96,52,5.901,53,12.287,54,8.558,55,11.181,56,9.47,57,2.226,58,1.721,59,10.15]],["keywords/3",[]],["title/4",[60,990.88]],["content/4",[3,0.103,4,0.753,5,0.753,32,2.628,51,5.105,60,13.364,61,5.339,62,9.314,63,6.683,64,14.323]],["keywords/4",[]],["title/5",[65,1061.968]],["content/5",[3,0.103,4,0.753,5,0.753,32,2.628,51,5.105,61,5.339,62,9.314,66,15.778,67,15.778,68,14.323]],["keywords/5",[]],["title/6",[69,990.88]],["content/6",[3,0.104,4,0.765,5,0.765,28,5.011,32,2.67,51,5.187,69,13.579,70,13.579,71,14.553]],["keywords/6",[]],["title/7",[72,803.417]],["content/7",[3,0.101,4,0.741,5,0.741,28,4.855,32,2.587,48,7.083,73,15.533,74,13.156,75,8.338,76,4.855,77,14.1]],["keywords/7",[]],["title/8",[78,990.88]],["content/8",[3,0.103,4,0.753,5,0.753,28,4.931,32,2.628,51,5.105,78,13.364,79,15.778,80,8.946,81,14.323]],["keywords/8",[]],["title/9",[82,990.88]],["content/9",[23,3.944,32,2.853,51,5.544,80,9.714,82,14.511]],["keywords/9",[]],["title/10",[80,663.28]],["content/10",[3,0.104,4,0.765,5,0.765,28,5.011,32,2.67,51,5.187,80,9.089,83,7.718,84,14.553]],["keywords/10",[]],["title/11",[18,403.228]],["content/11",[3,0.098,4,0.719,5,0.719,18,5.192,32,2.509,51,4.874,61,6.3,83,7.252,85,15.064,86,7.054,87,12.075,88,13.674]],["keywords/11",[]],["title/12",[89,1061.968]],["content/12",[3,0.098,4,0.719,5,0.719,23,4.285,32,3.101,90,13.674,91,15.064,92,13.674,93,13.674,94,16.899]],["keywords/12",[]],["title/13",[95,565.711,96,606.296,97,445.269]],["content/13",[0,3.579,2,4.103,3,0.139,4,0.244,5,0.244,6,0.907,9,0.279,10,0.283,11,0.424,12,0.273,13,0.283,14,0.257,15,0.347,16,3.853,17,2.393,18,3.723,41,2.955,48,2.33,54,3.911,56,4.329,57,1.018,58,0.786,75,5.798,86,5.058,95,4.329,96,4.639,97,11.042,98,3.231,99,5.798,100,6.665,101,5.111,102,7.519,103,5.875,104,7.255,105,5.111,106,4.639,107,5.111,108,6.622,109,5.802,110,8.449,111,5.111,112,5.111,113,1.668,114,0.968,115,4.097,116,11.39,117,4.639,118,4.097,119,11.39,120,4.639,121,4.097,122,11.39,123,4.639,124,8.658,125,4.639,126,4.639,127,4.639,128,5.111,129,5.111,130,5.111]],["keywords/13",[]],["title/14",[86,312.754,131,535.398,132,535.398]],["content/14",[2,3.104,3,0.144,7,5.127,9,0.574,11,0.247,13,0.272,14,0.247,16,2.239,18,2.817,22,2.182,23,1.881,29,2.635,31,7.209,42,7.383,54,3.758,58,2.603,80,2.783,86,3.827,95,4.158,97,3.273,99,4.387,100,3.03,102,3.879,131,8.415,132,3.935,133,4.909,134,4.457,135,3.483,136,4.909,137,4.909,138,4.909,139,4.457,140,4.909,141,3.758,142,4.457,143,6.922,144,4.457,145,4.457,146,4.457,147,4.457,148,4.457,149,4.457,150,4.457,151,3.991,152,4.457,153,4.457,154,4.457,155,4.457,156,4.457,157,3.372,158,4.457,159,4.457,160,4.457,161,4.457,162,4.457,163,4.457,164,7.418,165,7.418,166,4.457,167,2.239,168,3.03,169,4.457,170,3.609,171,4.457,172,3.758,173,4.457,174,4.158,175,4.457,176,4.457,177,4.457,178,4.457,179,7.418,180,7.418,181,4.457,182,6.922,183,4.457,184,4.457,185,7.418,186,4.457,187,4.457]],["keywords/14",[]],["title/15",[188,456.457,189,392.885]],["content/15",[]],["keywords/15",[]],["title/16",[141,895.388]],["content/16",[3,0.114,141,13.342,190,15.824,191,12.365]],["keywords/16",[]],["title/17",[192,829.86]],["content/17",[]],["keywords/17",[]],["title/18",[192,603.191,193,650.821]],["content/18",[3,0.11,11,0.846,188,9.041,189,7.782,192,11.948,193,12.891]],["keywords/18",[]],["title/19",[192,603.191,194,681.637]],["content/19",[0,6.579,3,0.101,11,0.953,31,10.667,188,10.183,189,8.765,194,12.451,195,8.806]],["keywords/19",[]],["title/20",[192,603.191,196,771.901]],["content/20",[23,3.69,189,8.935,197,13.579,198,14.553,199,16.032,200,12.851,201,16.032,202,14.553]],["keywords/20",[]],["title/21",[86,547.81]],["content/21",[]],["keywords/21",[]],["title/22",[49,358.528,86,312.754,203,565.711]],["content/22",[3,0.139,4,0.212,5,0.212,6,0.255,7,5.615,8,9.584,9,0.243,10,0.246,11,0.378,12,0.238,13,0.246,14,0.223,15,0.302,23,1.024,26,2.684,29,7.978,47,4.039,49,2.389,58,0.685,63,3.187,76,1.391,83,3.623,86,2.084,113,1.453,114,2.815,172,5.759,188,2.389,189,2.056,195,2.523,203,3.769,204,2.573,205,2.523,206,2.523,207,6.397,208,3.567,209,10.306,210,7.764,211,4.039,212,9.217,213,2.767Line truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Basic options | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/options"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Basic options | Artplayer.js"><meta data-rh="true" name="description" content="container"><meta data-rh="true" property="og:description" content="container"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/options"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/options" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/options" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">Common properties | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/propertie"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Common properties | Artplayer.js"><meta data-rh="true" name="description" content="play"><meta data-rh="true" property="og:description" content="play"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/propertie"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/propertie" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/propertie" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -1 +0,0 @@
-[{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_button_in_the_controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '&lt;button type=&quot;button&quot;&gt;Click Me!&lt;/button&gt;', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle_single_component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () =&gt; { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () =&gt; { console.info(Artplayer.instances); });  "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version);  "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env);  "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils);  "},{"title":"config","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config);  "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme);  "},{"title":"validator","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option);  "},{"title":"html","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html);  "},{"title":"kindOf","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([]));  "},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How_to_import_types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import(&quot;artplayer/types/artplayer&quot;) } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } ","keywords":""},{"title":"How to add video ads","type":0,"sectionRef":"#","url":"en/Questions/How_to_add_video_ads","content":"How to add video ads Video ads play before main video playback, support multiple video ads ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: 'httLine truncated
@@ -0,0 +1 @@
+[{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_button_in_the_controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '&lt;button type=&quot;button&quot;&gt;Click Me!&lt;/button&gt;', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How_to_import_types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import(&quot;artplayer/types/artplayer&quot;) } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } ","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () =&gt; { console.info(Artplayer.instances); });  "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version);  "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env);  "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils);  "},{"title":"config","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config);  "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme);  "},{"title":"validator","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option);  "},{"title":"html","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html);  "},{"title":"kindOf","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([]));  "},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle_single_component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () =&gt; { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Use with React Portal","type":0,"sectionRef":"#","url":"en/Questions/Use_with_react_portal","content":"Use with React Portal It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal. 👉 CliLine truncated
@@ -1 +1 @@
-[{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_button_in_the_controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '&lt;button type=&quot;button&quot;&gt;Click Me!&lt;/button&gt;', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle_single_component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () =&gt; { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () =&gt; { console.info(Artplayer.instances); });  "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version);  "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env);  "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils);  "},{"title":"config","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config);  "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme);  "},{"title":"validator","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option);  "},{"title":"html","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html);  "},{"title":"kindOf","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([]));  "},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How_to_import_types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import(&quot;artplayer/types/artplayer&quot;) } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } ","keywords":""},{"title":"How to add video ads","type":0,"sectionRef":"#","url":"en/Questions/How_to_add_video_ads","content":"How to add video ads Video ads play before main video playback, support multiple video ads ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: 'httLine truncated
+[{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_button_in_the_controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '&lt;button type=&quot;button&quot;&gt;Click Me!&lt;/button&gt;', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How_to_import_types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import(&quot;artplayer/types/artplayer&quot;) } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } ","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () =&gt; { console.info(Artplayer.instances); });  "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version);  "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env);  "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils);  "},{"title":"config","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config);  "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme);  "},{"title":"validator","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option);  "},{"title":"html","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html);  "},{"title":"kindOf","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([]));  "},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle_single_component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () =&gt; { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Use with React Portal","type":0,"sectionRef":"#","url":"en/Questions/Use_with_react_portal","content":"Use with React Portal It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal. 👉 CliLine truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">弹幕库插件 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Plugins/danmuku"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="弹幕库插件 | Artplayer.js"><meta data-rh="true" name="description" content="演示"><meta data-rh="true" property="og:description" content="演示"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Plugins/danmuku"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Plugins/danmuku" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Plugins/danmuku" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">在控制栏添加按钮 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Create_button_in_the_controls"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="在控制栏添加按钮 | Artplayer.js"><meta data-rh="true" name="description" content="有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 bootstrap"><meta data-rh="true" property="og:description" content="有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 bootstrap"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Create_button_in_the_controls"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create_button_in_the_controls" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create_button_in_the_controls" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">在控制栏添加列表 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Create_selector_in_the_controls"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="在控制栏添加列表 | Artplayer.js"><meta data-rh="true" name="description" content="有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 selector 和 onSelect 属性"><meta data-rh="true" property="og:description" content="有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 selector 和 onSelect 属性"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Create_selector_in_the_controls"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create_selector_in_the_controls" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create_selector_in_the_controls" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">处理单个组件 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Handle_single_component"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="处理单个组件 | Artplayer.js"><meta data-rh="true" name="description" content="当我们在layers、contextmenu、controls里添加自定义组件时，最好带上一个唯一的 name 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。"><meta data-rh="true" property="og:description" content="当我们在layers、contextmenu、controls里添加自定义组件时，最好带上一个唯一的 name 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Handle_single_component"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Handle_single_component" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Handle_single_component" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">怎么添加设置面板 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/How_to_add_setting_panel"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="怎么添加设置面板 | Artplayer.js"><meta data-rh="true" name="description" content="添加选择列表"><meta data-rh="true" property="og:description" content="添加选择列表"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_setting_panel"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_setting_panel" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_setting_panel" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">如何添加视频广告 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/How_to_add_video_ads"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="如何添加视频广告 | Artplayer.js"><meta data-rh="true" name="description" content="视频广告存在于正式视频播放之前，支持多个视频广告"><meta data-rh="true" property="og:description" content="视频广告存在于正式视频播放之前，支持多个视频广告"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_video_ads"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_video_ads" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_add_video_ads" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">如何导入类型 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/How_to_import_types"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="如何导入类型 | Artplayer.js"><meta data-rh="true" name="description" content="有时你会丢失 TypeScript 的语法提示，这时候你可以手动导入类型"><meta data-rh="true" property="og:description" content="有时你会丢失 TypeScript 的语法提示，这时候你可以手动导入类型"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/How_to_import_types"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_import_types" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How_to_import_types" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">与 React Portal 使用 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Use_with_react_portal"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="与 React Portal 使用 | Artplayer.js"><meta data-rh="true" name="description" content="在 layers、contextmenu、controls 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑"><meta data-rh="true" property="og:description" content="在 layers、contextmenu、controls 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Use_with_react_portal"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Use_with_react_portal" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Use_with_react_portal" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">高级属性 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/advance"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="高级属性 | Artplayer.js"><meta data-rh="true" name="description" content="这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读"><meta data-rh="true" property="og:description" content="这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/advance"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/advance" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/advance" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">静态属性 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/class"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="静态属性 | Artplayer.js"><meta data-rh="true" name="description" content="静态属性存在于构造函数 Artplayer 上，和播放器实例没有直接关联"><meta data-rh="true" property="og:description" content="静态属性存在于构造函数 Artplayer 上，和播放器实例没有直接关联"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/class"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/class" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/class" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">实例事件 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/events"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="实例事件 | Artplayer.js"><meta data-rh="true" name="description" content="播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 video 元素，是直接监听video元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 video:"><meta data-rh="true" property="og:description" content="播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 video 元素，是直接监听video元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 video:"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/events"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/events" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/events" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">快速上手 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="快速上手 | Artplayer.js"><meta data-rh="true" name="description" content="安装"><meta data-rh="true" property="og:description" content="安装"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/document/zh-cn">快速上手</a></li><li classLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">第三方库 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/libraries"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="第三方库 | Artplayer.js"><meta data-rh="true" name="description" content="flv.js"><meta data-rh="true" property="og:description" content="flv.js"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/libraries"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/libraries" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/libraries" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">基础参数 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/options"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="基础参数 | Artplayer.js"><meta data-rh="true" name="description" content="container"><meta data-rh="true" property="og:description" content="container"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/options"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/options" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/options" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.20">
 <title data-rh="true">常用属性 | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/zh-cn/propertie"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="常用属性 | Artplayer.js"><meta data-rh="true" name="description" content="play"><meta data-rh="true" property="og:description" content="play"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/zh-cn/propertie"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/propertie" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/zh-cn/propertie" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
-<link rel="preload" href="/document/assets/js/runtime~main.cccf76f2.js" as="script">
-<link rel="preload" href="/document/assets/js/main.1f458558.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.760c06c0.js" as="script">
+<link rel="preload" href="/document/assets/js/main.e3d66510.js" as="script">
 </head>
 <body class="navigation-with-keyboard">
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
 <div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn">快速上手</a></li><li class="theme-doc-sidebar-item-link theme-docLine truncated
-<script src="/document/assets/js/runtime~main.cccf76f2.js"></script>
-<script src="/document/assets/js/main.1f458558.js"></script>
+<script src="/document/assets/js/runtime~main.760c06c0.js"></script>
+<script src="/document/assets/js/main.e3d66510.js"></script>
 </body>
 </html>
@@ -243,7 +243,7 @@ class Artplayer extends _emitterDefault.default {
        return "development";
    }
    static get build() {
-        return "1652571170551";
+        return "1652602797782";
    }
    static get config() {
        return _configDefault.default;
@@ -381,7 +381,7 @@ if (typeof window !== 'undefined') window['Artplayer'] = Artplayer;
 console.log(`%c ArtPlayer %c ${Artplayer.version} %c https://artplayer.org`, 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');

 },{"bundle-text:./style/index.less":"doPnH","option-validator":"2tbdu","./utils/emitter":"8uSwy","./utils":"euhMG","./scheme":"jVxq1","./config":"1hSww","./whitelist":"eCrHi","./template":"eG0JW","./i18n":"6Q0In","./player":"kmRM5","./control":"nK2ZQ","./contextmenu":"iygWX","./info":"6tuCt","./subtitle":"1kFyE","./events":"akAUN","./hotkey":"f1oWx","./layer":"bKuSu","./loading":"4AfId","./notice":"aKncc","./mask":"1R5LH","./icons":"bPpva","./setting":"i2oRN","./storage":"9ruid","./plugins":"7Fd4c","./ads":"47pqz","./mobile":"hMVZh","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"doPnH":[function(require,module,exports) {
-module.exports = ".art-video-player {\n  z-index: 20;\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  color: #eee;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #000;\n  outline: none;\n  margin: 0 auto;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n  fill: #fff;\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-video-player .art-backdrop-filter {\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    backdrop-filter: saturate(180%) blur(20px);\n    background-color: #000000b3 !important;\n  }\n}\n\n.art-video-player .art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  text-align: center;\n  color: #fff;\n  pointer-events: none;\n  text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n  padding: 0 20px;\n  font-size: 20px;\n  display: none;\n  position: absolute;\n  bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n  word-break: break-all;\n  height: fit-content;\n  margin: 5px 0 0;\n  line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n  display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n  bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n  z-index: 30;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers {\n  z-index: 40;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n  pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n  display: block;\n}\n\n.art-video-player .art-mask {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n  width: 60px;\n  height: 60px;\n  opacity: .85;\n  cursor: pointer;\n  pointer-events: all;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  bottom: 65px;\n  right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n  display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n  position: static;\n}\n\n.art-video-player .art-loading {\n  z-index: 70;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n  display: flex;\n}\n\n.art-video-player .art-bottom {\n  z-index: 60;\n  height: 100px;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 50px 10px 0;\n  transition: all .2s ease-in-out;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n  z-index: 0;\n  pointer-events: auto;\n  flex: 1;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n  height: 4px;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n  height: 50%;\n  width: 100%;\n  background: #fff3;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-Line truncated
+module.exports = ".art-video-player {\n  z-index: 20;\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  color: #eee;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #000;\n  outline: none;\n  margin: 0 auto;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n  fill: #fff;\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-video-player .art-backdrop-filter {\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    backdrop-filter: saturate(180%) blur(20px);\n    background-color: #000000b3 !important;\n  }\n}\n\n.art-video-player .art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  text-align: center;\n  color: #fff;\n  pointer-events: none;\n  text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n  padding: 0 20px;\n  font-size: 20px;\n  display: none;\n  position: absolute;\n  bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n  word-break: break-all;\n  height: fit-content;\n  margin: 5px 0 0;\n  line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n  display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n  bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n  z-index: 30;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers {\n  z-index: 40;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n  pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n  display: block;\n}\n\n.art-video-player .art-mask {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n  width: 60px;\n  height: 60px;\n  opacity: .85;\n  cursor: pointer;\n  pointer-events: all;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  bottom: 65px;\n  right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n  display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n  position: static;\n}\n\n.art-video-player .art-loading {\n  z-index: 70;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n  display: flex;\n}\n\n.art-video-player .art-bottom {\n  z-index: 60;\n  height: 100px;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 50px 10px 0;\n  transition: all .2s ease-in-out;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n  z-index: 0;\n  pointer-events: auto;\n  flex: 1;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n  height: 4px;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n  height: 50%;\n  width: 100%;\n  background: #fff3;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-Line truncated

 },{}],"2tbdu":[function(require,module,exports) {
 !function(r, t) {
@@ -984,10 +984,14 @@ const ComponentOption = {
    style: `?${o}`,
    click: `?${f}`,
    mounted: `?${f}`,
-    tooltip: `?${s}`,
+    tooltip: `?${s}|${n}`,
    width: `?${n}`,
    selector: `?${a}`,
-    onSelect: `?${f}`
+    onSelect: `?${f}`,
+    switch: `?${b}`,
+    onSwitch: `?${f}`,
+    range: `?${a}`,
+    onRange: `?${f}`
 };
 exports.default = {
    container: validElement,
@@ -4471,6 +4475,7 @@ class Setting extends _componentDefault.default {
        _utils.addClass($icon, 'art-setting-item-left-icon');
        switch(type){
            case 'switch':
+            case 'range':
                _utils.append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
                break;
            case 'selector':
@@ -4543,6 +4548,28 @@ class Setting extends _componentDefault.default {
                    });
                    break;
                }
+            case 'range':
+                {
+                    const $state = document.createElement('div');
+                    _utils.addClass($state, 'art-setting-item-right-icon');
+                    const $range = _utils.append($state, '<input type="range">');
+                    $range.value = item.range[0] || 0;
+                    $range.min = item.range[1] || 0;
+                    $range.max = item.range[2] || 10;
+                    $range.step = item.range[3] || 1;
+                    _utils.addClass($range, 'art-setting-range');
+                    _utils.append($right, $state);
+                    item.$range = $range;
+                    _utils.def(item, 'range', {
+                        get () {
+                            return $range.valueAsNumber;
+                        },
+                        set (value) {
+                            $range.value = Number(value);
+                        }
+                    });
+                }
+                break;
            case 'selector':
                if (item.selector && item.selector.length) {
                    const $state = document.createElement('div');
@@ -4554,33 +4581,39 @@ class Setting extends _componentDefault.default {
            default:
                break;
        }
-        const event1 = proxy($item, 'click', async (event)=>{
-            switch(type){
-                case 'switch':
-                    if (item.onSwitch) item.switch = await item.onSwitch.call(this.art, item, $item, event);
-                    break;
-                case 'selector':
-                    if (item.selector && item.selector.length) this.init(item.selector, item.width);
-                    else {
-                        _utils.inverseClass($item, 'art-current');
-                        if (item._parentList) this.init(item._parentList);
-                        if (item._parentItem && item._parentItem.onSelect) {
-                            const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
-                            if (item._parentItem.$tooltip && isStringOrNumber(result)) item._parentItem.$tooltip.innerHTML = result;
-                        }
-                    }
-                    break;
-                default:
-                    break;
-            }
-        });
-        this.events.push(event1);
        switch(type){
            case 'switch':
-                if (item.mounted) item.mounted.call(this.art, item, $item);
+                if (item.onSwitch) {
+                    const event1 = proxy($item, 'click', async (event)=>{
+                        item.switch = await item.onSwitch.call(this.art, item, $item, event);
+                    });
+                    this.events.push(event1);
+                }
+                break;
+            case 'range':
+                if (item.onRange && item.$range) {
+                    const event3 = proxy(item.$range, 'change', async (event)=>{
+                        item.tooltip = await item.onRange.call(this.art, item, $item, event);
+                    });
+                    this.events.push(event3);
+                }
                break;
            case 'selector':
-                if (item.default) _utils.addClass($item, 'art-current');
+                {
+                    const event5 = proxy($item, 'click', async (event)=>{
+                        if (item.selector && item.selector.length) this.init(item.selector, item.width);
+                        else {
+                            _utils.inverseClass($item, 'art-current');
+                            if (item._parentList) this.init(item._parentList);
+                            if (item._parentItem && item._parentItem.onSelect) {
+                                const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
+                                if (item._parentItem.$tooltip && isStringOrNumber(result)) item._parentItem.$tooltip.innerHTML = result;
+                            }
+                        }
+                    });
+                    this.events.push(event5);
+                    if (item.default) _utils.addClass($item, 'art-current');
+                }
                break;
            default:
                break;
@@ -4606,6 +4639,7 @@ class Setting extends _componentDefault.default {
            for(let index = 0; index < option.length; index++){
                const item = option[index];
                if (_utils.has(item, 'switch')) _utils.append($panel, this.creatItem('switch', item));
+                else if (_utils.has(item, 'range')) _utils.append($panel, this.creatItem('range', item));
                else _utils.append($panel, this.creatItem('selector', item));
            }
            _utils.append(this.$parent, $panel);
@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA,0DAAmD;;AACnD,kDAAyC;;AACzC,yCAAsC;;AACtC,+BAAiC;AACjC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,uCAAoC;;AACpC,qCAAkC;;AAClC,6BAA0B;;AAC1B,iCAA8B;;AAC9B,mCAAgC;;AAChC,2CAAwC;;AACxC,6BAA0B;;AAC1B,qCAAkC;;AAClC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,+BAA4B;;AAC5B,mCAAgC;;AAChC,iCAA8B;;AAC9B,6BAA0B;;AAC1B,+BAA4B;;AAC5B,mCAAgC;;AAChC,mCAAgC;;AAChC,mCAAgC;;AAChC,2BAAwB;;AACxB,iCAA8B;;AAE9B,IAAI,EAAE,GAAG,CAAC,AAAC;AACX,MAAM,SAAS,GAAG,EAAE,AAAC;AACN,MAAM,SAAS,SAAS,uBAAO;IAC1C,YAAY,MAAM,EAAE,aAAa,CAAE;QAC/B,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QAEf,MAAM,WAAW,GAAG,MAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAC;QAC9D,IAAI,CAAC,MAAM,GAAG,+BAAS,CAAC,WAAW,EAAE,sBAAM,CAAC,CAAC;QAE7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,SAAS,GAAG,IAAI,yBAAS,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,wBAAQ,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,qBAAK,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,qBAAK,CAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,2BAAW,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,wBAAQ,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,IAAI,mBAAG,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;SACpC,MACG,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;QAGnC,IAAI,OAAO,aAAa,KAAK,UAAU,EACnC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAM,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;QAAA,CAAC,CAAC;QAGrD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,SAAS,CAAC;KACpB;IAED,WAAW,OAAO,GAAG;QACjB,eAA2B;KAC9B;IAED,WAAW,GAAG,GAAG;QACb,qBAA4B;KAC/B;IAED,WAAW,KAAK,GAAG;QACf,uBAA8B;KACjC;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,sBAAM,CAAC;KACjB;IAED,WAAW,KAAK,GAAG;QACf,OAAO,MAAK,CAAC;KAChB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,sBAAM,CAAC;KACjB;IAED,WAAW,OAAO,GAAG;QACjB,OAAO,uBAAO,CAAC;KAClB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,+BAAS,CAAC;KACpB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,+BAAS,CAAC,MAAM,CAAC;KAC3B;IAED,WAAW,IAAI,GAAG;QACd,OAAO,wBAAQ,CAAC,IAAI,CAAC;KACxB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO;YACH,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,KAAK;YACrB,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;YACnB,eAAe,EAAE,KAAK;YACtB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,UAAU,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,EAAE;aACb;YACD,QAAQ,EAAE;gBACN,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,OAAO;aACpB;YACD,aAAa,EAAE;gBACX,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,MAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,UAAU;aAChD;YACD,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,EAAE;YACd,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE;SACzC,CAAC;KACL;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;KAC5B;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9B;IAED,OAAO,CAAC,UAAU,GAAG,IAAI,EAAE;QACvB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACxB;CACJ;kBAzKoB,SAAS;AA2K9B,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;AAC7B,SAAS,CAAC,aAAa,GAAG,GAAG,CAAC;AAC9B,SAAS,CAAC,kBAAkB,GAAG,GAAG,CAAC;AACnC,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,cAAc,GAAG,EAAE,CAAC;AAC9B,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,qBAAqB,GAAG,EAAE,CAAC;AACrC,SAAS,CAAC,0BAA0B,GAAG,EAAE,CAAC;AAC1C,SAAS,CAAC,kBAAkB,GAAG,EAAE,CAAC;AAClC,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,WAAW,GAAG,GAAG,CAAC;AAC5B,SAAS,CAAC,WAAW,GAAG,GAAG,CAAC;AAC5B,SAAS,CAAC,UAAULine truncated
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA,0DAAmD;;AACnD,kDAAyC;;AACzC,yCAAsC;;AACtC,+BAAiC;AACjC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,uCAAoC;;AACpC,qCAAkC;;AAClC,6BAA0B;;AAC1B,iCAA8B;;AAC9B,mCAAgC;;AAChC,2CAAwC;;AACxC,6BAA0B;;AAC1B,qCAAkC;;AAClC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,+BAA4B;;AAC5B,mCAAgC;;AAChC,iCAA8B;;AAC9B,6BAA0B;;AAC1B,+BAA4B;;AAC5B,mCAAgC;;AAChC,mCAAgC;;AAChC,mCAAgC;;AAChC,2BAAwB;;AACxB,iCAA8B;;AAE9B,IAAI,EAAE,GAAG,CAAC,AAAC;AACX,MAAM,SAAS,GAAG,EAAE,AAAC;AACN,MAAM,SAAS,SAAS,uBAAO;IAC1C,YAAY,MAAM,EAAE,aAAa,CAAE;QAC/B,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QAEf,MAAM,WAAW,GAAG,MAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAC;QAC9D,IAAI,CAAC,MAAM,GAAG,+BAAS,CAAC,WAAW,EAAE,sBAAM,CAAC,CAAC;QAE7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,SAAS,GAAG,IAAI,yBAAS,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,wBAAQ,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,qBAAK,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,qBAAK,CAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,2BAAW,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,wBAAQ,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,IAAI,mBAAG,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,oBAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,GAAG,IAAI,uBAAO,CAAC,IAAI,CAAC,CAAC;SACpC,MACG,IAAI,CAAC,MAAM,GAAG,IAAI,sBAAM,CAAC,IAAI,CAAC,CAAC;QAGnC,IAAI,OAAO,aAAa,KAAK,UAAU,EACnC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAM,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;QAAA,CAAC,CAAC;QAGrD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,SAAS,CAAC;KACpB;IAED,WAAW,OAAO,GAAG;QACjB,eAA2B;KAC9B;IAED,WAAW,GAAG,GAAG;QACb,qBAA4B;KAC/B;IAED,WAAW,KAAK,GAAG;QACf,uBAA8B;KACjC;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,sBAAM,CAAC;KACjB;IAED,WAAW,KAAK,GAAG;QACf,OAAO,MAAK,CAAC;KAChB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,sBAAM,CAAC;KACjB;IAED,WAAW,OAAO,GAAG;QACjB,OAAO,uBAAO,CAAC;KAClB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,+BAAS,CAAC;KACpB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,+BAAS,CAAC,MAAM,CAAC;KAC3B;IAED,WAAW,IAAI,GAAG;QACd,OAAO,wBAAQ,CAAC,IAAI,CAAC;KACxB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO;YACH,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,KAAK;YACrB,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;YACnB,eAAe,EAAE,KAAK;YACtB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,UAAU,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,EAAE;aACb;YACD,QAAQ,EAAE;gBACN,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,OAAO;aACpB;YACD,aAAa,EAAE;gBACX,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,MAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,UAAU;aAChD;YACD,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,EAAE;YACd,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE;SACzC,CAAC;KACL;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;KAC5B;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9B;IAED,OAAO,CAAC,UAAU,GAAG,IAAI,EAAE;QACvB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACxB;CACJ;kBAzKoB,SAAS;AA2K9B,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;AAC7B,SAAS,CAAC,aAAa,GAAG,GAAG,CAAC;AAC9B,SAAS,CAAC,kBAAkB,GAAG,GAAG,CAAC;AACnC,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,cAAc,GAAG,EAAE,CAAC;AAC9B,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,qBAAqB,GAAG,EAAE,CAAC;AACrC,SAAS,CAAC,0BAA0B,GAAG,EAAE,CAAC;AAC1C,SAAS,CAAC,kBAAkB,GAAG,EAAE,CAAC;AAClC,SAAS,CAAC,mBAAmB,GAAG,EAAE,CAAC;AACnC,SAAS,CAAC,WAAW,GAAG,GAAG,CAAC;AAC5B,SAAS,CAAC,WAAW,GAAG,GAAG,CAAC;AAC5B,SAAS,CAAC,UAAULine truncated
@@ -181,3 +181,79 @@ var art = new Artplayer({
    ],
 });
 ```
+
+## Add range slider
+
+| Property  | Type                | Description              |
+| --------- | ------------------- | ------------------------ |
+| `html`    | `String`、`Element` | DOM elements of selector |
+| `icon`    | `String`、`Element` | Icon of selector         |
+| `range`   | `Array`             | Range default state      |
+| `onRange` | `Function`          | Range change event       |
+| `tooltip` | `String`            | Tooltip text             |
+
+```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,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: 'Range',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onRange: function (item) {
+                // Change the tooltip
+                return item.range + 'x';
+            },
+        },
+        {
+            html: 'Use with selector',
+            width: 240,
+            selector: [
+                {
+                    default: true,
+                    html: 'Setting 01',
+                },
+                {
+                    html: 'Setting 02',
+                },
+                {
+                    html: 'Setting 03',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+                {
+                    html: 'Setting 04',
+                    icon: '',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+            ],
+            onSelect: function (item) {
+                return item.html;
+            },
+        },
+    ],
+});
+```
@@ -111,8 +111,6 @@ var art = new Artplayer({

 ## 添加切换按钮

-设置面板类似于列表选择的集合，而且支持多层嵌套
-
 | 属性       | 类型                | 描述            |
 | ---------- | ------------------- | --------------- |
 | `html`     | `String`、`Element` | 元素的 DOM 元素 |
@@ -183,3 +181,79 @@ var art = new Artplayer({
    ],
 });
 ```
+
+## 添加范围滑动
+
+| 属性      | 类型                | 描述            |
+| --------- | ------------------- | --------------- |
+| `html`    | `String`、`Element` | 元素的 DOM 元素 |
+| `icon`    | `String`、`Element` | 元素的图标      |
+| `range`   | `Array`             | 默认状态数组    |
+| `onRange` | `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,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: '滑块',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onRange: function (item) {
+                // 改变提示文本
+                return item.range + 'x';
+            },
+        },
+        {
+            html: '和列表组合',
+            width: 200,
+            selector: [
+                {
+                    default: true,
+                    html: '设置 01',
+                },
+                {
+                    html: '设置 02',
+                },
+                {
+                    html: '设置 03',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+                {
+                    html: '设置 04',
+                    icon: '',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+            ],
+            onSelect: function (item) {
+                return item.html;
+            },
+        },
+    ],
+});
+```
@@ -20,10 +20,14 @@ export const ComponentOption = {
    style: `?${o}`,
    click: `?${f}`,
    mounted: `?${f}`,
-    tooltip: `?${s}`,
+    tooltip: `?${s}|${n}`,
    width: `?${n}`,
    selector: `?${a}`,
    onSelect: `?${f}`,
+    switch: `?${b}`,
+    onSwitch: `?${f}`,
+    range: `?${a}`,
+    onRange: `?${f}`,
 };

 export default {
@@ -151,6 +151,7 @@ export default class Setting extends Component {

        switch (type) {
            case 'switch':
+            case 'range':
                append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
                break;
            case 'selector':
@@ -242,6 +243,29 @@ export default class Setting extends Component {
                });
                break;
            }
+            case 'range':
+                {
+                    const $state = document.createElement('div');
+                    addClass($state, 'art-setting-item-right-icon');
+                    const $range = append($state, '<input type="range">');
+                    $range.value = item.range[0] || 0;
+                    $range.min = item.range[1] || 0;
+                    $range.max = item.range[2] || 10;
+                    $range.step = item.range[3] || 1;
+                    addClass($range, 'art-setting-range');
+                    append($right, $state);
+                    item.$range = $range;
+
+                    def(item, 'range', {
+                        get() {
+                            return $range.valueAsNumber;
+                        },
+                        set(value) {
+                            $range.value = Number(value);
+                        },
+                    });
+                }
+                break;
            case 'selector':
                if (item.selector && item.selector.length) {
                    const $state = document.createElement('div');
@@ -254,47 +278,53 @@ export default class Setting extends Component {
                break;
        }

-        const event = proxy($item, 'click', async (event) => {
-            switch (type) {
-                case 'switch':
-                    if (item.onSwitch) {
-                        item.switch = await item.onSwitch.call(this.art, item, $item, event);
-                    }
-                    break;
-                case 'selector':
-                    if (item.selector && item.selector.length) {
-                        this.init(item.selector, item.width);
-                    } else {
-                        inverseClass($item, 'art-current');
-
-                        if (item._parentList) {
-                            this.init(item._parentList);
-                        }
-
-                        if (item._parentItem && item._parentItem.onSelect) {
-                            const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
-                            if (item._parentItem.$tooltip && isStringOrNumber(result)) {
-                                item._parentItem.$tooltip.innerHTML = result;
-                            }
-                        }
-                    }
-                    break;
-                default:
-                    break;
-            }
-        });
-
-        this.events.push(event);
-
        switch (type) {
-            case 'switch':
-                if (item.mounted) {
-                    item.mounted.call(this.art, item, $item);
+            case 'switch': {
+                if (item.onSwitch) {
+                    const event = proxy($item, 'click', async (event) => {
+                        item.switch = await item.onSwitch.call(this.art, item, $item, event);
+                    });
+
+                    this.events.push(event);
                }
                break;
+            }
+            case 'range': {
+                if (item.onRange && item.$range) {
+                    const event = proxy(item.$range, 'change', async (event) => {
+                        item.tooltip = await item.onRange.call(this.art, item, $item, event);
+                    });
+
+                    this.events.push(event);
+                }
+                break;
+            }
            case 'selector':
-                if (item.default) {
-                    addClass($item, 'art-current');
+                {
+                    const event = proxy($item, 'click', async (event) => {
+                        if (item.selector && item.selector.length) {
+                            this.init(item.selector, item.width);
+                        } else {
+                            inverseClass($item, 'art-current');
+
+                            if (item._parentList) {
+                                this.init(item._parentList);
+                            }
+
+                            if (item._parentItem && item._parentItem.onSelect) {
+                                const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
+                                if (item._parentItem.$tooltip && isStringOrNumber(result)) {
+                                    item._parentItem.$tooltip.innerHTML = result;
+                                }
+                            }
+                        }
+                    });
+
+                    this.events.push(event);
+
+                    if (item.default) {
+                        addClass($item, 'art-current');
+                    }
                }
                break;
            default:
@@ -327,6 +357,8 @@ export default class Setting extends Component {
                const item = option[index];
                if (has(item, 'switch')) {
                    append($panel, this.creatItem('switch', item));
+                } else if (has(item, 'range')) {
+                    append($panel, this.creatItem('range', item));
                } else {
                    append($panel, this.creatItem('selector', item));
                }
@@ -86,6 +86,14 @@
                        align-items: center;
                        height: 24px;
                    }
+
+                    .art-setting-range {
+                        height: 3px;
+                        width: 80px;
+                        outline: none;
+                        appearance: none;
+                        background-color: rgba(255, 255, 255, 0.2);
+                    }
                }
            }

@@ -115,6 +115,16 @@ type SettingOption = {
     * When switch item click
     */
    onSwitch?(item: SettingOption, element: HTMLElement, event: Event): void;
+
+    /**
+     * Custom range item
+     */
+    range?: number[];
+
+    /**
+     * When range item change
+     */
+    onRange?(item: SettingOption, element: HTMLElement, event: Event): void;
 };

 type Component = {
				`@@ -0,0 +1 @@`
				"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document\|\|[]).push([[280],{3905:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var a=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,r=function(t,e){if(null==t)return{};var n,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0\|\|(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var d=a.createContext({}),p=function(t){var e=a.useContext(d),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(d.Provider,{value:e},t.children)},s={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),u=p(n),c=r,g=u["".concat(d,".").concat(c)]\|\|u[c]\|\|s[c]\|\|l;return n?a.createElement(g,i(i({ref:e},m),{},{components:n})):a.createElement(g,i({ref:e},m))}));function c(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t\|\|r){var l=n.length,i=new Array(l);i[0]=u;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},3797:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"How to add setting panel",sidebar_position:6},d=void 0,p={unversionedId:"en/Questions/How_to_add_setting_panel",id:"en/Questions/How_to_add_setting_panel",title:"How to add setting panel",description:"Add selector list",source:"@site/docs/en/Questions/How_to_add_setting_panel.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_add_setting_panel",permalink:"/document/en/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to add video ads",permalink:"/document/en/Questions/How_to_add_video_ads"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use_with_react_portal"}},m={},s=[{value:"Add selector list",id:"add-selector-list",level:2},{value:"Add switch button",id:"add-switch-button",level:2},{value:"Add range slider",id:"add-range-slider",level:2}],u={toc:s};function c(t){var e=t.components,n=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"add-selector-list"},"Add selector list"),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"DOM elements of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"Icon of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,lLine truncated
				`@@ -1 +0,0 @@`
				"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document\|\|[]).push([[280],{3905:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var a=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,r=function(t,e){if(null==t)return{};var n,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0\|\|(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var d=a.createContext({}),p=function(t){var e=a.useContext(d),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(d.Provider,{value:e},t.children)},s={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),u=p(n),c=r,k=u["".concat(d,".").concat(c)]\|\|u[c]\|\|s[c]\|\|l;return n?a.createElement(k,i(i({ref:e},m),{},{components:n})):a.createElement(k,i({ref:e},m))}));function c(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t\|\|r){var l=n.length,i=new Array(l);i[0]=u;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},3797:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"How to add setting panel",sidebar_position:6},d=void 0,p={unversionedId:"en/Questions/How_to_add_setting_panel",id:"en/Questions/How_to_add_setting_panel",title:"How to add setting panel",description:"Add selector list",source:"@site/docs/en/Questions/How_to_add_setting_panel.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_add_setting_panel",permalink:"/document/en/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to add video ads",permalink:"/document/en/Questions/How_to_add_video_ads"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use_with_react_portal"}},m={},s=[{value:"Add selector list",id:"add-selector-list",level:2},{value:"Add switch button",id:"add-switch-button",level:2}],u={toc:s};function c(t){var e=t.components,n=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"add-selector-list"},"Add selector list"),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"DOM elements of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"Icon of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,l.kt)("td",{parentName:"tr",align:null},"Selector list")),Line truncated
				`@@ -1 +0,0 @@`
				{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,284.908,1,410.494,2,252.433]],["content/0",[0,4.016,1,5.786,2,5.137,3,0.155,4,0.451,5,0.451,6,0.781,7,7.754,8,6.44,9,0.516,10,0.523,11,0.685,12,0.504,13,0.523,14,0.475,15,0.642,16,4.274,17,4.389,18,3.289,19,8.516,20,8.516,21,8.516,22,6.014,23,2.185,24,7.519,25,6.423,26,5.656,27,7.179,28,2.926,29,5.216,30,7.519]],["keywords/0",[]],["title/1",[31,563.652,32,604.135,33,443.513]],["content/1",[0,3.571,2,4.052,3,0.15,4,0.242,5,0.242,6,0.907,9,0.277,10,0.28,11,0.422,12,0.271,13,0.28,14,0.255,15,0.345,16,3.8,17,2.355,18,3.745,31,4.264,32,4.57,33,10.964,34,3.181,35,5.73,36,6.589,37,5.035,38,7.457,39,2.324,40,5.067,41,5.976,42,7.331,43,5.035,44,4.57,45,5.035,46,5.73,47,6.553,48,2.909,49,5.727,50,8.344,51,3.852,52,5.035,53,5.035,54,1.67,55,0.963,56,0.999,57,0.771,58,4.035,59,11.28,60,4.57,61,4.035,62,11.28,63,4.57,64,4.035,65,11.28,66,4.57,67,8.562,68,4.57,69,4.57,70,4.57,71,5.035,72,5.035,73,5.035,74,4.264]],["keywords/1",[]],["title/2",[39,391.237,75,769.442]],["content/2",[]],["keywords/2",[]],["title/3",[48,674.382]],["content/3",[3,0.143,4,0.533,5,0.533,6,0.639,7,5.407,9,0.61,10,0.617,11,0.77,12,0.596,13,0.617,14,0.561,15,0.759,39,5.115,48,8.802,51,8.481,56,2.198,57,1.697,74,9.386,76,1.85,77,8.467,78,11.084,79,4.919,80,5.845,81,12.207,82,11.084,83,10.06]],["keywords/3",[]],["title/4",[84,988.31]],["content/4",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,84,13.308,85,5.407,86,9.27,87,6.648,88,14.264]],["keywords/4",[]],["title/5",[89,1059.293]],["content/5",[3,0.111,4,0.755,5,0.755,76,2.624,79,5.075,85,5.407,86,9.27,90,15.715,91,15.715,92,14.264]],["keywords/5",[]],["title/6",[93,988.31]],["content/6",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,93,13.525,94,13.525,95,14.497]],["keywords/6",[]],["title/7",[96,801.123]],["content/7",[3,0.109,4,0.743,5,0.743,28,4.824,39,7.138,46,8.295,76,2.582,97,15.466,98,13.097,99,4.824,100,14.038]],["keywords/7",[]],["title/8",[101,988.31]],["content/8",[3,0.111,4,0.755,5,0.755,28,4.901,76,2.624,79,5.075,101,13.308,102,15.715,103,8.903,104,14.264]],["keywords/8",[]],["title/9",[105,988.31]],["content/9",[23,3.98,76,2.853,79,5.518,103,9.681,105,14.471]],["keywords/9",[]],["title/10",[103,661.193]],["content/10",[3,0.113,4,0.768,5,0.768,28,4.981,76,2.666,79,5.158,103,9.049,106,7.907,107,14.497]],["keywords/10",[]],["title/11",[18,409.127]],["content/11",[3,0.106,4,0.721,5,0.721,18,5.256,40,7.109,76,2.503,79,4.841,85,6.384,106,7.422,108,14.992,109,12.015,110,13.608]],["keywords/11",[]],["title/12",[111,1059.293]],["content/12",[3,0.106,4,0.721,5,0.721,23,4.321,76,3.098,112,13.608,113,14.992,114,13.608,115,13.608,116,16.842]],["keywords/12",[]],["title/13",[76,141.526,117,581.914]],["content/13",[3,0.158,11,0.97,23,2.417,48,8.409,76,2.805,117,9.989,118,9.42,119,8.788,120,9.42,121,10.378,122,6.727,123,9.42,124,9.42,125,9.42,126,6.557,127,9.42,128,9.42,129,9.42,130,9.42]],["keywords/13",[]],["title/14",[0,284.908,99,207.594,131,563.652]],["content/14",[0,2.04,2,1.807,3,0.157,4,0.229,5,0.229,6,0.275,9,0.262,10,0.265,11,0.403,12,0.256,13,0.265,14,0.52,16,3.63,17,3.728,18,2.794,22,3.539,23,2.392,28,3.204,35,2.556,55,1.966,56,0.945,57,1.22,81,3.819,86,4.701,99,4.506,131,13.619,132,5.617,133,3.646,134,4.765,135,3.271,136,2.811,137,4.035,138,2.395,139,2.753,140,2.601,141,4.325,142,4.325,143,12.008,144,7.234,145,2.17,146,3.271,147,3.175,148,5.471,149,5.166,150,4.765,151,16.082,152,4.325,153,2.872,154,7.97,155,3.502,156,8.699,157,4.325,158,2.872,159,4.325,160,3.539,161,4.325,162,4.325,163,4.765,164,4.325,165,4.325,166,4.325,167,4.325]],["keywords/14",[]],["title/15",[0,284.908,54,220.767,168,443.513]],["content/15",[]],["keywords/15",[]],["title/16",[0,284.908,169,420.526,170,533.415]],["content/16",[3,0.155,4,0.179,5,0.179,6,0.215,9,0.205,10,0.208,11,0.327,12,0.2,13,0.208,14,0.641,15,0.255,18,6.118,22,1.656,23,1.994,25,5.482,35,3.469,39,1.721,41,5.56,42,2.2,54,2.84,55,2.424,76,0.623,77,2.073,85,1.283,87,1.578,106,5.06,136,2.2,153,3.899,155,2.741,168,4.309,169,9.904,170,5.183,171,3.729,172,3.729,173,8.654,174,6.467,175,14.395,176,3.385,177,3.595,178,3.899,179,5.551,180,6.625,181,1.173,182,7.178,183,2.113,184,2.248,185,2.2,186,2.3,187,3.355,188,3.385,189,5.878,190,5.183,191,3.158,192,2.989,193,2.989,194,3.158,195,2.989,196,2.989,197,4.753,198,2.741,199,4.192,200,3.251,201,5.878,202,2.741,203,3.385,204,5.87,205,3.385,206,2.989,207,3.385,208,3.385,209,3.385,210,3.385,211,7.511]],["keywords/16",[]],["title/17",[0,284.908,1,410.494,212,401.235]],["content/17",[1,4.836,3,0.153,4,0.225,5,0.225,6,0.269,9,0.257,10,0.26,11,0.397,12,0.251,13,0.26,14,0.236,15,0.32,18,5.015,23,3.078,25,6.268,39,2.157,40,2.216,41,6.356,42,2.757,54,4.745,55,2.738,76,0.78,85,1.608,106,3.882,126,2.953,153,7.151,169,7.495,176,4.242,177,4.359,178,7.151,179,3.03,180,3.03,181,1.47,182,6.72,183,2.648,184,2.817,185,2.757,186,2.882,189,3.208,197,3.435,199,5.083,200,5.962,201,3.208,211,3.435,212,7.968,213,5.763,214,10.767,215,3.958,216,3.03Line truncated
				`@@ -1 +0,0 @@`
				[{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_button_in_the_controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '<button type="button">Click Me!</button>', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle_single_component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () => { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(Artplayer.instances); }); "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils); "},{"title":"config","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config); "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); "},{"title":"validator","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option); "},{"title":"html","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html); "},{"title":"kindOf","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([])); "},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How_to_import_types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import("artplayer/types/artplayer") } Artplayer / /* * @type {Artplayer} - An Artplayer instance. / const art1 = {}; /* * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } ","keywords":""},{"title":"How to add video ads","type":0,"sectionRef":"#","url":"en/Questions/How_to_add_video_ads","content":"How to add video ads Video ads play before main video playback, support multiple video ads ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: 'httLine truncated