4.2.0

2026-10-09 03:46:16 -08:00 · 2022-01-07 20:13:44 +08:00
1 parent 9bc87eb0e2
commit b70a804591
@@ -1,8 +1,8 @@
 /*!
- * artplayer.js v4.1.4
+ * artplayer.js v4.2.0
 * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2021 Harvey Zack
+ * (c) 2017-2022 Harvey Zack
 * Released under the MIT License.
 */

-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.9">
 <title data-react-helmet="true">Page Not Found | Artplayer.js</title><meta data-react-helmet="true" property="og:title" content="Page Not Found | Artplayer.js"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/404.html"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/404.html"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 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"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022 Artplayer.js, Inc. Built with Docusaurus.</div></div></div></footer></div>
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Advanced propertys | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/advance"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Advanced propertys | Artplayer.js"><meta data-react-helmet="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-react-helmet="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-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/advance"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><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/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.js"></script>
 </body>
 </html>
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[941],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?a.createElement(k,i(i({ref:t},d),{},{components:n})):a.createElement(k,i({ref:t},d))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7498:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",isDocsHomePage:!1,title:"Common properties",description:"play",source:"@site/docs/en/Properties.md",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},d=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],u={toc:d};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Play video"),(0,l.kt)("div",{cLine truncated
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[941],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?a.createElement(k,i(i({ref:t},d),{},{components:n})):a.createElement(k,i({ref:t},d))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7498:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",isDocsHomePage:!1,title:"Common properties",description:"play",source:"@site/docs/en/Properties.md",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},d=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"attr",id:"attr",children:[],level:2},{value:"title",id:"title",children:[],level:2},{value:"theme",id:"theme",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],u={toc:d};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.Line truncated
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[928],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return c}});var a=t(7294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,a,l=function(e,n){if(null==e)return{};var t,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var o=a.createContext({}),s=function(e){var n=a.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=s(e.components);return a.createElement(o.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=s(t),c=l,k=m["".concat(o,".").concat(c)]||m[c]||d[c]||r;return t?a.createElement(k,i(i({ref:n},u),{},{components:t})):a.createElement(k,i({ref:n},u))}));function c(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=m;var p={};for(var o in n)hasOwnProperty.call(n,o)&&(p[o]=n[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var s=2;s<r;s++)i[s]=t[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},8265:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return p},contentTitle:function(){return o},metadata:function(){return s},toc:function(){return u},default:function(){return m}});var a=t(7462),l=t(3366),r=(t(7294),t(3905)),i=["components"],p={title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},o=void 0,s={unversionedId:"zh-cn/Properties",id:"zh-cn/Properties",isDocsHomePage:!1,title:"\u5e38\u7528\u5c5e\u6027",description:"play",source:"@site/docs/zh-cn/Properties.md",sourceDirName:"zh-cn",slug:"/zh-cn/propertie",permalink:"/document/zh-cn/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},sidebar:"zh-cn",previous:{title:"\u57fa\u7840\u53c2\u6570",permalink:"/document/zh-cn/options"},next:{title:"\u9ad8\u7ea7\u5c5e\u6027",permalink:"/document/zh-cn/advance"}},u=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],d={toc:u};function m(e){var n=e.components,t=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h2",{id:"play"},"play"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kLine truncated
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[928],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return c}});var a=t(7294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,a,l=function(e,n){if(null==e)return{};var t,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var o=a.createContext({}),s=function(e){var n=a.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=s(e.components);return a.createElement(o.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=s(t),c=l,k=m["".concat(o,".").concat(c)]||m[c]||d[c]||r;return t?a.createElement(k,i(i({ref:n},u),{},{components:t})):a.createElement(k,i({ref:n},u))}));function c(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=m;var p={};for(var o in n)hasOwnProperty.call(n,o)&&(p[o]=n[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var s=2;s<r;s++)i[s]=t[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},8265:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return p},contentTitle:function(){return o},metadata:function(){return s},toc:function(){return u},default:function(){return m}});var a=t(7462),l=t(3366),r=(t(7294),t(3905)),i=["components"],p={title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},o=void 0,s={unversionedId:"zh-cn/Properties",id:"zh-cn/Properties",isDocsHomePage:!1,title:"\u5e38\u7528\u5c5e\u6027",description:"play",source:"@site/docs/zh-cn/Properties.md",sourceDirName:"zh-cn",slug:"/zh-cn/propertie",permalink:"/document/zh-cn/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},sidebar:"zh-cn",previous:{title:"\u57fa\u7840\u53c2\u6570",permalink:"/document/zh-cn/options"},next:{title:"\u9ad8\u7ea7\u5c5e\u6027",permalink:"/document/zh-cn/advance"}},u=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"attr",id:"attr",children:[],level:2},{value:"title",id:"title",children:[],level:2},{value:"theme",id:"theme",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],d={toc:u};function m(e){var n=e.components,t=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},d,t,{compLine truncated
@@ -0,0 +1,2 @@
+/*! For license information please see main.cbbf0b15.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:{hideableSidebar:!0,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:"v 4.x.x",position:"right",items:[{label:"v 3.x.x",href:"https://artplayer.org/document_v3/"}]},{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:[]},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1,switchConfig:{darkIcon:"\ud83c\udf1c",darkIconStyle:{},lightIcon:"\ud83c\udf1e",lightIconStyle:{}}},docs:{versionPersistence:"localStorage"},metadatas:[],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",customFields:{},themes:[],titleDelimiter:"|",noIndex:!1}},2067:function(e,t,n){"use strict";var r=n(7294),a=n(3935),o=n(3727),i=n(8356),l=n.n(i),u=function(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("div",{style:{align:"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:"22",r:"6",strokeOpacity:"0"},r.createElement("animLine truncated
@@ -1,2 +0,0 @@
-/*! For license information please see main.f1d3e548.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/harvey/Desktop/github/ArtPlayer/packages/artplayer-document/src/script/main.js"],themeConfig:{hideableSidebar:!0,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:"v 4.x.x",position:"right",items:[{label:"v 3.x.x",href:"https://artplayer.org/document_v3/"}]},{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:[]},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1,switchConfig:{darkIcon:"\ud83c\udf1c",darkIconStyle:{},lightIcon:"\ud83c\udf1e",lightIconStyle:{}}},docs:{versionPersistence:"localStorage"},metadatas:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},plugins:["/Users/harvey/Desktop/github/ArtPlayer/packages/artplayer-document/node_modules/docusaurus-lunr-search/src/index.js"],presets:[["@docusaurus/preset-classic",{docs:{path:"./docs",routeBasePath:"/",sidebarPath:"/Users/harvey/Desktop/github/ArtPlayer/packages/artplayer-document/sidebars.js"},blog:!1,theme:{customCss:"/Users/harvey/Desktop/github/ArtPlayer/packages/artplayer-document/src/css/custom.css"}}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",locales:["en"],localeConfigs:{}},onDuplicateRoutes:"warn",customFields:{},themes:[],titleDelimiter:"|",noIndex:!1}},2067:function(e,t,n){"use strict";var r=n(7294),a=n(3935),o=n(3727),i=n(8356),l=n.n(i),u=function(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("div",{style:{align:"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:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeNLine truncated
@@ -1 +1 @@
-!function(){"use strict";var e,t,n,r,f,a={},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 a[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}o.m=a,o.c=c,e=[],o.O=function(t,n,r,f){if(!n){var a=1/0;for(i=0;i<e.length;i++){n=e[i][0],r=e[i][1],f=e[i][2];for(var c=!0,d=0;d<n.length;d++)(!1&f||a>=f)&&Object.keys(o.O).every((function(e){return o.O[e](n[d])}))?n.splice(d--,1):(c=!1,f<a&&(a=f));if(c){e.splice(i--,1);var u=r();void 0!==u&&(t=u)}}return t}f=f||0;for(var i=e.length;i>0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[n,r,f]},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 f=Object.create(null);o.r(f);var a={};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){a[t]=function(){return e[t]}}));return a.default=function(){return e},o.d(f,a),f},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",53:"935f2afb",54:"a7ce4e70",96:"cc0122d1",176:"0a29ddce",182:"9e17caf1",219:"ce4f060a",220:"5d64abea",270:"246dbf43",303:"fb30adf9",338:"526c59d3",339:"de349f3c",388:"9254a18c",410:"e2c628ea",447:"ad4fcd86",514:"1be78505",575:"7d40ea66",576:"7086e348",612:"dabd5ce5",696:"0d39a128",721:"f68770c9",748:"c09202f4",757:"dd094eca",811:"95803a7a",873:"724d0398",918:"17896441",922:"f2d412ac",928:"385d9f37",941:"0fa62a73",952:"2dfbbf98",994:"943666ff"}[e]||e)+"."+{14:"42cb83c0",42:"b3ee4f67",53:"070ab267",54:"7806f591",96:"ed5ad59e",176:"72f0d7f3",182:"e35d50a3",219:"5f979215",220:"8eff1c1f",245:"58da7dca",270:"25ffa265",303:"998a23b4",338:"dec9ba8e",339:"71849181",343:"e9b08a58",388:"f91a3e9c",410:"8d8bfd76",447:"393f5266",514:"8a6f2a07",573:"79c03de1",575:"a67464a4",576:"ab677f17",612:"eb22ff79",667:"36c9babf",696:"5a0f958c",721:"41095c8d",748:"b7fdbd1e",757:"de034f65",811:"6baec1c8",873:"0988d38f",878:"f94e2fc9",918:"97de5859",922:"1281b54f",928:"0247d2f6",941:"5ccfb74f",952:"3626035f",979:"bcfe14ba",994:"cdb3c2fa"}[e]+".js"},o.miniCssF=function(e){return"assets/css/styles.f21e1cf1.css"},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={},f="artplayer-document:",o.l=function(e,t,n,a){if(r[e])r[e].push(t);else{var c,d;if(void 0!==n)for(var u=document.getElementsByTagName("script"),i=0;i<u.length;i++){var b=u[i];if(b.getAttribute("src")==e||b.getAttribute("data-webpack")==f+n){c=b;break}}c||(d=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",f+n),c.src=e),r[e]=[t];var l=function(t,n){c.onerror=c.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),f&&f.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),d&&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","935f2afb":"53",a7ce4e70:"54",cc0122d1:"96","0a29ddce":"176","9e17caf1":"182",ce4f060a:"219","5d64abea":"220","246dbf43":"270",fb30adf9:"303","526c59d3":"338",de349f3c:"339","9254a18c":"388",e2c628ea:"410",ad4fcd86:"447","1be78505":"514","7d40ea66":"575","7086e348":"576",dabd5ce5:"612","0d39a128":"696",f68770c9:"721",c09202f4:"748",dd094eca:"757","95803a7a":"811","724d0398":"873",f2d412ac:"922","385d9f37":"928","0fa62a73":"941","2dfbbf98":"952","943666ff":"994"}[e]||e,o.p+o.u(e)},function(){var e={552: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(/^5[35]2$/.test(t))e[t]=0;else{var f=new Promise((function(n,f){r=e[t]=[n,f]}));n.push(r[2]=f);var a=o.p+o.u(t),c=new Error;o.l(a,(function(n){if(o.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var f=n&&("load"===n.type?"missing":n.type),a=n&&n.target&&n.target.src;c.message="Loading chunk "+t+" failed.\n("+f+": "+a+")",c.name="ChunkLoadError",c.type=f,c.request=a,r[1](c)}}),"chunk-"+t,t)}},o.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,f,a=n[0],c=n[1],d=n[2],u=0;if(a.some((function(t){return 0!==e[t]}))){for(r in c)o.o(c,r)&&(o.m[r]=c[r]);if(d)var i=d(Line truncated
+!function(){"use strict";var e,t,n,r,a,c={},f={};function o(e){var t=f[e];if(void 0!==t)return t.exports;var n=f[e]={id:e,loaded:!1,exports:{}};return c[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}o.m=c,o.c=f,e=[],o.O=function(t,n,r,a){if(!n){var c=1/0;for(i=0;i<e.length;i++){n=e[i][0],r=e[i][1],a=e[i][2];for(var f=!0,d=0;d<n.length;d++)(!1&a||c>=a)&&Object.keys(o.O).every((function(e){return o.O[e](n[d])}))?n.splice(d--,1):(f=!1,a<c&&(c=a));if(f){e.splice(i--,1);var u=r();void 0!==u&&(t=u)}}return t}a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[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 c={};t=t||[null,n({}),n([]),n(n)];for(var f=2&r&&e;"object"==typeof f&&!~t.indexOf(f);f=n(f))Object.getOwnPropertyNames(f).forEach((function(t){c[t]=function(){return e[t]}}));return c.default=function(){return e},o.d(a,c),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",53:"935f2afb",54:"a7ce4e70",96:"cc0122d1",176:"0a29ddce",182:"9e17caf1",219:"ce4f060a",220:"5d64abea",270:"246dbf43",303:"fb30adf9",338:"526c59d3",339:"de349f3c",388:"9254a18c",410:"e2c628ea",447:"ad4fcd86",514:"1be78505",575:"7d40ea66",576:"7086e348",612:"dabd5ce5",696:"0d39a128",721:"f68770c9",748:"c09202f4",757:"dd094eca",811:"95803a7a",873:"724d0398",918:"17896441",922:"f2d412ac",928:"385d9f37",941:"0fa62a73",952:"2dfbbf98",994:"943666ff"}[e]||e)+"."+{14:"42cb83c0",42:"b3ee4f67",53:"070ab267",54:"7806f591",96:"ed5ad59e",176:"72f0d7f3",182:"e35d50a3",219:"5f979215",220:"8eff1c1f",245:"58da7dca",270:"25ffa265",303:"998a23b4",338:"dec9ba8e",339:"71849181",343:"e9b08a58",388:"f91a3e9c",410:"8d8bfd76",447:"393f5266",514:"8a6f2a07",573:"79c03de1",575:"a67464a4",576:"ab677f17",612:"eb22ff79",667:"36c9babf",696:"5a0f958c",721:"41095c8d",748:"b7fdbd1e",757:"de034f65",811:"6baec1c8",873:"0988d38f",878:"f94e2fc9",918:"97de5859",922:"1281b54f",928:"295a7ac6",941:"da525318",952:"3626035f",979:"bcfe14ba",994:"cdb3c2fa"}[e]+".js"},o.miniCssF=function(e){return"assets/css/styles.f21e1cf1.css"},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,c){if(r[e])r[e].push(t);else{var f,d;if(void 0!==n)for(var u=document.getElementsByTagName("script"),i=0;i<u.length;i++){var l=u[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==a+n){f=l;break}}f||(d=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,o.nc&&f.setAttribute("nonce",o.nc),f.setAttribute("data-webpack",a+n),f.src=e),r[e]=[t];var b=function(t,n){f.onerror=f.onload=null,clearTimeout(s);var a=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),a&&a.forEach((function(e){return e(n)})),t)return t(n)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=b.bind(null,f.onerror),f.onload=b.bind(null,f.onload),d&&document.head.appendChild(f)}},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","935f2afb":"53",a7ce4e70:"54",cc0122d1:"96","0a29ddce":"176","9e17caf1":"182",ce4f060a:"219","5d64abea":"220","246dbf43":"270",fb30adf9:"303","526c59d3":"338",de349f3c:"339","9254a18c":"388",e2c628ea:"410",ad4fcd86:"447","1be78505":"514","7d40ea66":"575","7086e348":"576",dabd5ce5:"612","0d39a128":"696",f68770c9:"721",c09202f4:"748",dd094eca:"757","95803a7a":"811","724d0398":"873",f2d412ac:"922","385d9f37":"928","0fa62a73":"941","2dfbbf98":"952","943666ff":"994"}[e]||e,o.p+o.u(e)},function(){var e={552: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(/^5[35]2$/.test(t))e[t]=0;else{var a=new Promise((function(n,a){r=e[t]=[n,a]}));n.push(r[2]=a);var c=o.p+o.u(t),f=new Error;o.l(c,(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),c=n&&n.target&&n.target.src;f.message="Loading chunk "+t+" failed.\n("+a+": "+c+")",f.name="ChunkLoadError",f.type=a,f.request=c,r[1](f)}}),"chunk-"+t,t)}},o.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,a,c=n[0],f=n[1],d=n[2],u=0;if(c.some((function(t){return 0!==e[t]}))){for(r in f)o.o(f,r)&&(o.m[r]=f[r]);if(d)var i=d(Line truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.9">
 <title data-react-helmet="true">Static propertys | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/class"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Static propertys | Artplayer.js"><meta data-react-helmet="true" name="description" content="Static attributes exist in the constructor artplayer, and the player instance is not directly associated"><meta data-react-helmet="true" property="og:description" content="Static attributes exist in the constructor artplayer, and the player instance is not directly associated"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/class"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/class" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/class" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><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/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Danmuku plugin | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Plugins/danmuku"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Danmuku plugin | Artplayer.js"><meta data-react-helmet="true" name="description" content="Demo"><meta data-react-helmet="true" property="og:description" content="Demo"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Plugins/danmuku"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Plugins/danmuku" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Plugins/danmuku" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Add button to the controls | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/Create button in the controls"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Add button to the controls | Artplayer.js"><meta data-react-helmet="true" name="description" content="▶ Run Code"><meta data-react-helmet="true" property="og:description" content="▶ Run Code"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Create button in the controls"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create button in the controls" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Add select in the controls | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/Create selector in the controls"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Add select in the controls | Artplayer.js"><meta data-react-helmet="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-react-helmet="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-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Create selector in the controls"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Create selector in the controls" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Handle a single component | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/Handle single component"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Handle a single component | Artplayer.js"><meta data-react-helmet="true" name="description" content="When we add custom components in layers, contextmenu, controls, setting, It is best to add a name property that is used to position the DOM element of the component."><meta data-react-helmet="true" property="og:description" content="When we add custom components in layers, contextmenu, controls, setting, It is best to add a name property that is used to position the DOM element of the component."><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Handle single component"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Handle single component" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Handle single component" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">How to add video ads | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/How to add video ads"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="How to add video ads | Artplayer.js"><meta data-react-helmet="true" name="description" content="Video ads play before main video playback, support multiple video ads"><meta data-react-helmet="true" property="og:description" content="Video ads play before main video playback, support multiple video ads"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/How to add video ads"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How to add video ads" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">How to import types | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/How to import types"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="How to import types | Artplayer.js"><meta data-react-helmet="true" name="description" content="Sometimes you lose TypeScript syntax prompt, then you can import types manually"><meta data-react-helmet="true" property="og:description" content="Sometimes you lose TypeScript syntax prompt, then you can import types manually"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/How to import types"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/How to import types" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Use with React Portal | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/en/Questions/Use with react portal"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Use with React Portal | Artplayer.js"><meta data-react-helmet="true" name="description" content="It is also very easy to use React Components in layers, contextmenu, controls, and setting. Handle more complex logic through ReactDOM.createPortal."><meta data-react-helmet="true" property="og:description" content="It is also very easy to use React Components in layers, contextmenu, controls, and setting. Handle more complex logic through ReactDOM.createPortal."><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/en/Questions/Use with react portal"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/en/Questions/Use with react portal" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-itemLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Common events | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/events"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Common events | Artplayer.js"><meta data-react-helmet="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-react-helmet="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-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/events"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/events" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/events" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><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/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Quick start | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Quick start | Artplayer.js"><meta data-react-helmet="true" name="description" content="Install"><meta data-react-helmet="true" property="og:description" content="Install"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/" hreflang="x-default"><script data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li>Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Third party librarys | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/libraries"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Third party librarys | Artplayer.js"><meta data-react-helmet="true" name="description" content="flv.js"><meta data-react-helmet="true" property="og:description" content="flv.js"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/libraries"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/libraries" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/libraries" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><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/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.js"></script>
 </body>
 </html>
@@ -1 +0,0 @@
-{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,764.803,1,392.147]],["content/0",[]],["keywords/0",[]],["title/1",[2,697.546]],["content/1",[1,5.08,2,9.046,3,1.873,4,8.668,5,10.92,6,4.99,7,5.733,8,12.05,9,8.343,10,10.92,11,9.24,12,5.3,13,0.126,14,0.551,15,0.551,16,0.66,17,0.646,18,0.66,19,0.789,20,0.638,21,0.638,22,0.572,23,0.792,24,2.155,25,1.615,26,9.907,27,0.441]],["keywords/1",[]],["title/2",[28,982.19]],["content/2",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,28,13.03,29,5.563,30,9.054,31,6.18,32,13.971]],["keywords/2",[]],["title/3",[33,1053.139]],["content/3",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,29,5.563,30,9.054,34,15.4,35,15.4,36,13.971]],["keywords/3",[]],["title/4",[37,982.19]],["content/4",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,37,13.238,38,4.704,39,13.238,40,14.195]],["keywords/4",[]],["title/5",[41,851.66]],["content/5",[1,7.052,3,2.601,13,0.095,14,0.765,15,0.765,27,0.612,38,4.558,42,15.161,43,12.827,44,7.583,45,4.803,46,13.754]],["keywords/5",[]],["title/6",[47,982.19]],["content/6",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,38,4.63,47,13.03,48,15.4,49,8.692,50,13.971]],["keywords/6",[]],["title/7",[51,982.19]],["content/7",[3,2.918,6,5.638,49,9.601,51,14.392,52,4.081]],["keywords/7",[]],["title/8",[49,655.232]],["content/8",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,38,4.704,49,8.832,53,8.506,54,14.195]],["keywords/8",[]],["title/9",[55,395.69]],["content/9",[3,2.522,6,4.874,13,0.092,14,0.742,15,0.742,27,0.593,29,6.611,53,7.994,55,5.012,56,14.704,57,7.034,58,11.77,59,13.339]],["keywords/9",[]],["title/10",[60,1053.139]],["content/10",[3,3.139,13,0.092,14,0.742,15,0.742,27,0.593,52,4.39,61,13.339,62,14.704,63,13.339,64,13.339,65,16.602]],["keywords/10",[]],["title/11",[66,281.456,67,397.686,68,241.492]],["content/11",[12,7.642,13,0.137,14,0.467,15,0.467,16,0.81,17,0.547,18,0.56,19,0.702,20,0.541,21,0.541,22,0.486,23,0.672,27,0.374,38,2.785,52,2.222,55,3.157,66,3.939,67,5.566,68,4.89,69,6.157,70,3.987,71,4.088,72,8.403,73,8.403,74,8.403,75,5.699,76,7.414,77,6.602,78,5.835,79,7.414,80,4.947,81,7.414]],["keywords/11",[]],["title/12",[82,559.968,83,600.417,84,406.938]],["content/12",[1,2.089,2,2.698,9,3.431,11,3.799,13,0.134,14,0.227,15,0.227,16,0.984,17,0.265,18,0.272,19,0.397,20,0.262,21,0.262,22,0.235,23,0.326,24,0.886,25,0.664,27,0.181,44,4.916,55,3.934,57,4.701,66,3.222,68,3.586,70,3.261,71,1.982,82,3.799,83,4.074,84,9.613,85,2.761,86,5.343,87,6.043,88,3.861,89,4.49,90,6.649,91,5.522,92,6.936,93,4.49,94,4.074,95,4.49,96,6.081,97,5.189,98,7.576,99,4.49,100,4.49,101,0.848,102,3.594,103,10.471,104,4.074,105,3.594,106,10.471,107,4.074,108,3.594,109,10.471,110,4.074,111,3.594,112,10.471,113,4.074,114,9.239,115,4.074,116,4.074,117,4.074,118,4.074,119,4.49,120,4.49,121,4.49]],["keywords/12",[]],["title/13",[66,281.456,68,241.492,122,600.417]],["content/13",[]],["keywords/13",[]],["title/14",[123,545.05,124,421.686]],["content/14",[13,0.138,14,0.431,15,0.431,16,0.516,17,0.504,18,0.516,19,0.662,20,0.499,21,0.499,22,0.787,23,0.619,27,0.344,52,2.047,53,4.639,55,5.119,68,3.114,70,3.673,71,3.766,75,3.629,91,6.038,101,1.611,124,4.269,125,7.742,126,6.831,127,11.45,128,7.742,129,7.742,130,7.742,131,7.742,132,7.742,133,7.742,134,6.831,135,5.845,136,7.742,137,6.831,138,6.831,139,4.558,140,6.831]],["keywords/14",[]],["title/15",[123,545.05,141,713.279]],["content/15",[13,0.139,14,0.127,15,0.127,16,0.275,17,0.269,18,0.152,19,0.239,20,0.147,21,0.147,22,0.132,23,0.182,27,0.101,45,0.796,52,0.603,55,0.857,68,0.917,70,1.082,71,1.109,126,2.012,134,2.012,135,1.721,139,1.342,140,2.012,141,2.126,142,4.131,143,18.151,144,2.28,145,18.151,146,18.151,147,2.28,148,2.28,149,2.28,150,2.28,151,2.28,152,2.28,153,2.28,154,2.28,155,2.28,156,2.28,157,2.28,158,2.28,159,2.28,160,2.28,161,2.28,162,2.28,163,2.28,164,2.28,165,2.28,166,2.28,167,2.28,168,2.28,169,2.28,170,2.28,171,2.28,172,2.28,173,2.28,174,2.28,175,2.28,176,2.28,177,2.28,178,2.28,179,2.28,180,2.28,181,2.28,182,2.28,183,2.28,184,2.28,185,2.28,186,2.28,187,2.28,188,2.28,189,2.28,190,2.28,191,2.28,192,2.28,193,2.28,194,2.28,195,2.28,196,2.28,197,2.28,198,2.28,199,2.28,200,2.28,201,2.28,202,2.28,203,2.28,204,2.28,205,2.28,206,2.28,207,2.28,208,2.28,209,2.28,210,2.28,211,2.28,212,2.28,213,2.28,214,2.28,215,2.28,216,2.28,217,2.28,218,2.28,219,2.28,220,2.28,221,2.28,222,2.28,223,2.28,224,2.28,225,2.28,226,2.28,227,2.28,228,2.28,229,2.28,230,2.28,231,2.28,232,2.28,233,2.28]],["keywords/15",[]],["title/16",[45,209.672,66,281.456,234,559.968]],["content/16",[8,3.786,13,0.139,14,0.239,15,0.239,16,0.286,17,0.28,18,0.286,19,0.415,20,0.276,21,0.276,22,0.535,24,0.933,25,1.17,27,0.191,30,4.653,38,3.068,45,4.549,52,2.448,55,2.698,66,2.011,68,1.726,70,3.407,71,3.492,75,3.366,86,2.571,101,1.927,135,3.239,138,3.786,234,13.526,235,5.627,236,3.613,237,4.73,238,3.347,239,2.842,240,4.002,241,2.526,242,2.442,243,2.67,244,4.291,245,4.291,246,11.93,247,7.18,248,1.987,249,3.239,250,3.144,251,5.42,252,4.Line truncated
@@ -0,0 +1 @@
+{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,562.223,1,143.767]],["content/0",[0,9.599,1,2.839,2,9.304,3,8.679,4,9.304,5,10.253,6,6.316,7,9.304,8,0.137,9,9.304,10,9.304,11,0.978,12,8.682,13,6.639,14,9.304,15,9.304,16,9.304,17,2.464,18,9.304,19,0.405]],["keywords/0",[]],["title/1",[20,283.026,21,399.104,22,243.113]],["content/1",[8,0.135,11,0.689,17,2.23,19,0.367,20,3.961,21,5.586,22,4.925,23,0.458,24,0.458,25,0.794,26,7.683,27,6.177,28,0.537,29,0.549,30,0.53,31,0.53,32,0.476,33,0.658,34,4.01,35,4.11,36,3.181,37,8.42,38,8.42,39,8.42,40,5.733,41,7.432,42,6.635,43,5.856,44,7.432,45,2.809,46,4.968,47,7.432]],["keywords/1",[]],["title/2",[48,766.424,49,388.905]],["content/2",[]],["keywords/2",[]],["title/3",[12,700.412]],["content/3",[1,1.863,8,0.124,11,0.774,12,9.084,19,0.432,23,0.54,24,0.54,25,0.647,26,5.327,28,0.633,29,0.647,30,0.625,31,0.625,32,0.561,33,0.776,49,5.038,50,8.706,51,10.942,52,4.94,53,5.76,54,12.086,55,8.367,56,10.942,57,9.263,58,2.092,59,1.574,60,9.929]],["keywords/3",[]],["title/4",[61,984.84]],["content/4",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,52,5.055,61,13.069,62,5.292,63,9.095,64,6.223,65,14.01]],["keywords/4",[]],["title/5",[66,1055.734]],["content/5",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,52,5.055,62,5.292,63,9.095,67,15.439,68,15.439,69,14.01]],["keywords/5",[]],["title/6",[70,984.84]],["content/6",[1,2.67,8,0.096,19,0.62,23,0.775,24,0.775,45,4.748,52,5.136,70,13.279,71,13.279,72,14.235]],["keywords/6",[]],["title/7",[73,854.409]],["content/7",[1,2.587,8,0.093,19,0.6,23,0.751,24,0.751,45,4.6,49,6.999,74,15.198,75,12.866,76,7.624,77,4.761,78,13.792]],["keywords/7",[]],["title/8",[79,984.84]],["content/8",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,45,4.673,52,5.055,79,13.069,80,15.439,81,8.734,82,14.01]],["keywords/8",[]],["title/9",[83,984.84]],["content/9",[1,2.903,17,4.098,52,5.585,81,9.649,83,14.439]],["keywords/9",[]],["title/10",[81,658.131]],["content/10",[1,2.67,8,0.096,19,0.62,23,0.775,24,0.775,45,4.748,52,5.136,81,8.874,84,8.549,85,14.235]],["keywords/10",[]],["title/11",[36,398.786]],["content/11",[1,2.509,8,0.091,19,0.582,23,0.728,24,0.728,36,5.053,52,4.826,62,6.289,84,8.033,86,14.74,87,7.074,88,11.807,89,13.376]],["keywords/11",[]],["title/12",[90,1055.734]],["content/12",[1,3.123,8,0.091,17,4.409,19,0.582,23,0.728,24,0.728,91,13.376,92,14.74,93,13.376,94,13.376,95,16.65]],["keywords/12",[]],["title/13",[20,283.026,77,207.669,96,561.174]],["content/13",[8,0.137,11,0.407,17,2.456,19,0.187,20,2.022,22,1.737,23,0.234,24,0.234,25,0.28,28,0.274,29,0.28,30,0.271,31,0.271,32,0.524,34,3.425,35,3.511,36,2.717,40,3.384,45,3.094,54,3.793,58,0.905,59,1.14,63,4.669,77,4.508,96,13.563,97,5.656,98,3.621,99,4.735,100,3.355,101,2.851,102,4.009,103,2.535,104,1.926,105,2.452,106,2.679,107,4.297,108,4.297,109,11.952,110,7.192,111,2.581,112,1.998,113,3.248,114,3.152,115,5.436,116,4.882,117,4.735,118,16.022,119,4.297,120,3.248,121,7.926,122,3.793,123,8.653,124,4.297,125,2.628,126,4.297,127,3.602,128,4.297,129,4.297,130,4.735,131,4.297,132,4.297,133,4.297,134,4.297]],["keywords/13",[]],["title/14",[135,561.174,136,601.571,137,408.344]],["content/14",[8,0.132,11,0.389,12,2.706,19,0.178,20,3.239,22,3.61,23,0.222,24,0.222,25,0.965,28,0.26,29,0.266,30,0.257,31,0.257,32,0.231,33,0.319,34,3.279,35,1.991,36,3.964,49,2.07,55,3.438,57,3.806,58,0.859,59,0.647,76,4.938,87,4.724,104,0.847,111,5.365,135,3.806,136,4.08,137,9.652,138,2.769,139,6.064,140,3.786,141,4.495,142,6.69,143,5.549,144,6.812,145,4.495,146,4.08,147,4.495,148,6.112,149,5.203,150,7.587,151,4.495,152,4.495,153,3.601,154,10.493,155,4.08,156,3.601,157,10.493,158,4.08,159,3.601,160,10.493,161,4.08,162,3.601,163,10.493,164,4.08,165,9.262,166,4.08,167,4.08,168,4.08,169,4.08,170,4.495,171,4.495,172,4.495]],["keywords/14",[]],["title/15",[87,318.13,173,486.853,174,531.002]],["content/15",[0,6.852,8,0.135,11,0.245,13,7.787,17,1.92,19,0.189,22,2.93,26,5.011,28,0.595,31,0.273,32,0.245,34,2.066,36,2.739,40,2.041,46,2.56,55,3.656,59,2.404,81,2.705,87,3.835,111,4.355,112,2.017,135,4.048,137,2.945,139,2.945,140,1.566,142,3.412,173,7.559,174,3.83,175,4.782,176,4.339,177,3.388,178,4.782,179,4.782,180,4.782,181,3.83,182,4.782,183,3.656,184,4.339,185,7.251,186,4.048,187,4.048,188,4.339,189,4.048,190,4.048,191,4.048,192,4.339,193,4.279,194,4.339,195,4.339,196,4.339,197,4.339,198,4.339,199,3.279,200,4.339,201,4.339,202,4.339,203,4.048,204,3.83,205,3.83,206,7.251,207,7.251,208,4.339,209,3.096,210,3.83,211,3.096,212,3.83,213,3.388,214,3.83,215,3.83,216,3.83,217,4.048,218,4.339,219,4.339,220,7.251,221,7.251,222,4.339,223,7.251,224,4.339,225,4.048,226,6.764,227,4.048,228,4.048]],["keywords/15",[]],["title/16",[20,283.026,22,243.113,229,601.571]],["content/16",[]],["keywords/16",[]],["title/17",[230,546.914,231,423.686]],["content/17",[8,0.135,11,0.649,17,2.054,19,0.338,22,3.135,23,0.422,24,0.422,25,0.506,28,0.494,29,0.506,30,0.489,31,0.489,32,0.772,33,0.606,34,3.694,35,3.786,36,5.16,40,3.649,84,4.658,104,1.611,120,Line truncated
@@ -1 +1 @@
-{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,764.803,1,392.147]],["content/0",[]],["keywords/0",[]],["title/1",[2,697.546]],["content/1",[1,5.08,2,9.046,3,1.873,4,8.668,5,10.92,6,4.99,7,5.733,8,12.05,9,8.343,10,10.92,11,9.24,12,5.3,13,0.126,14,0.551,15,0.551,16,0.66,17,0.646,18,0.66,19,0.789,20,0.638,21,0.638,22,0.572,23,0.792,24,2.155,25,1.615,26,9.907,27,0.441]],["keywords/1",[]],["title/2",[28,982.19]],["content/2",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,28,13.03,29,5.563,30,9.054,31,6.18,32,13.971]],["keywords/2",[]],["title/3",[33,1053.139]],["content/3",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,29,5.563,30,9.054,34,15.4,35,15.4,36,13.971]],["keywords/3",[]],["title/4",[37,982.19]],["content/4",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,37,13.238,38,4.704,39,13.238,40,14.195]],["keywords/4",[]],["title/5",[41,851.66]],["content/5",[1,7.052,3,2.601,13,0.095,14,0.765,15,0.765,27,0.612,38,4.558,42,15.161,43,12.827,44,7.583,45,4.803,46,13.754]],["keywords/5",[]],["title/6",[47,982.19]],["content/6",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,38,4.63,47,13.03,48,15.4,49,8.692,50,13.971]],["keywords/6",[]],["title/7",[51,982.19]],["content/7",[3,2.918,6,5.638,49,9.601,51,14.392,52,4.081]],["keywords/7",[]],["title/8",[49,655.232]],["content/8",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,38,4.704,49,8.832,53,8.506,54,14.195]],["keywords/8",[]],["title/9",[55,395.69]],["content/9",[3,2.522,6,4.874,13,0.092,14,0.742,15,0.742,27,0.593,29,6.611,53,7.994,55,5.012,56,14.704,57,7.034,58,11.77,59,13.339]],["keywords/9",[]],["title/10",[60,1053.139]],["content/10",[3,3.139,13,0.092,14,0.742,15,0.742,27,0.593,52,4.39,61,13.339,62,14.704,63,13.339,64,13.339,65,16.602]],["keywords/10",[]],["title/11",[66,281.456,67,397.686,68,241.492]],["content/11",[12,7.642,13,0.137,14,0.467,15,0.467,16,0.81,17,0.547,18,0.56,19,0.702,20,0.541,21,0.541,22,0.486,23,0.672,27,0.374,38,2.785,52,2.222,55,3.157,66,3.939,67,5.566,68,4.89,69,6.157,70,3.987,71,4.088,72,8.403,73,8.403,74,8.403,75,5.699,76,7.414,77,6.602,78,5.835,79,7.414,80,4.947,81,7.414]],["keywords/11",[]],["title/12",[82,559.968,83,600.417,84,406.938]],["content/12",[1,2.089,2,2.698,9,3.431,11,3.799,13,0.134,14,0.227,15,0.227,16,0.984,17,0.265,18,0.272,19,0.397,20,0.262,21,0.262,22,0.235,23,0.326,24,0.886,25,0.664,27,0.181,44,4.916,55,3.934,57,4.701,66,3.222,68,3.586,70,3.261,71,1.982,82,3.799,83,4.074,84,9.613,85,2.761,86,5.343,87,6.043,88,3.861,89,4.49,90,6.649,91,5.522,92,6.936,93,4.49,94,4.074,95,4.49,96,6.081,97,5.189,98,7.576,99,4.49,100,4.49,101,0.848,102,3.594,103,10.471,104,4.074,105,3.594,106,10.471,107,4.074,108,3.594,109,10.471,110,4.074,111,3.594,112,10.471,113,4.074,114,9.239,115,4.074,116,4.074,117,4.074,118,4.074,119,4.49,120,4.49,121,4.49]],["keywords/12",[]],["title/13",[66,281.456,68,241.492,122,600.417]],["content/13",[]],["keywords/13",[]],["title/14",[123,545.05,124,421.686]],["content/14",[13,0.138,14,0.431,15,0.431,16,0.516,17,0.504,18,0.516,19,0.662,20,0.499,21,0.499,22,0.787,23,0.619,27,0.344,52,2.047,53,4.639,55,5.119,68,3.114,70,3.673,71,3.766,75,3.629,91,6.038,101,1.611,124,4.269,125,7.742,126,6.831,127,11.45,128,7.742,129,7.742,130,7.742,131,7.742,132,7.742,133,7.742,134,6.831,135,5.845,136,7.742,137,6.831,138,6.831,139,4.558,140,6.831]],["keywords/14",[]],["title/15",[123,545.05,141,713.279]],["content/15",[13,0.139,14,0.127,15,0.127,16,0.275,17,0.269,18,0.152,19,0.239,20,0.147,21,0.147,22,0.132,23,0.182,27,0.101,45,0.796,52,0.603,55,0.857,68,0.917,70,1.082,71,1.109,126,2.012,134,2.012,135,1.721,139,1.342,140,2.012,141,2.126,142,4.131,143,18.151,144,2.28,145,18.151,146,18.151,147,2.28,148,2.28,149,2.28,150,2.28,151,2.28,152,2.28,153,2.28,154,2.28,155,2.28,156,2.28,157,2.28,158,2.28,159,2.28,160,2.28,161,2.28,162,2.28,163,2.28,164,2.28,165,2.28,166,2.28,167,2.28,168,2.28,169,2.28,170,2.28,171,2.28,172,2.28,173,2.28,174,2.28,175,2.28,176,2.28,177,2.28,178,2.28,179,2.28,180,2.28,181,2.28,182,2.28,183,2.28,184,2.28,185,2.28,186,2.28,187,2.28,188,2.28,189,2.28,190,2.28,191,2.28,192,2.28,193,2.28,194,2.28,195,2.28,196,2.28,197,2.28,198,2.28,199,2.28,200,2.28,201,2.28,202,2.28,203,2.28,204,2.28,205,2.28,206,2.28,207,2.28,208,2.28,209,2.28,210,2.28,211,2.28,212,2.28,213,2.28,214,2.28,215,2.28,216,2.28,217,2.28,218,2.28,219,2.28,220,2.28,221,2.28,222,2.28,223,2.28,224,2.28,225,2.28,226,2.28,227,2.28,228,2.28,229,2.28,230,2.28,231,2.28,232,2.28,233,2.28]],["keywords/15",[]],["title/16",[45,209.672,66,281.456,234,559.968]],["content/16",[8,3.786,13,0.139,14,0.239,15,0.239,16,0.286,17,0.28,18,0.286,19,0.415,20,0.276,21,0.276,22,0.535,24,0.933,25,1.17,27,0.191,30,4.653,38,3.068,45,4.549,52,2.448,55,2.698,66,2.011,68,1.726,70,3.407,71,3.492,75,3.366,86,2.571,101,1.927,135,3.239,138,3.786,234,13.526,235,5.627,236,3.613,237,4.73,238,3.347,239,2.842,240,4.002,241,2.526,242,2.442,243,2.67,244,4.291,245,4.291,246,11.93,247,7.18,248,1.987,249,3.239,250,3.144,251,5.42,252,4.Line truncated
+{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,562.223,1,143.767]],["content/0",[0,9.599,1,2.839,2,9.304,3,8.679,4,9.304,5,10.253,6,6.316,7,9.304,8,0.137,9,9.304,10,9.304,11,0.978,12,8.682,13,6.639,14,9.304,15,9.304,16,9.304,17,2.464,18,9.304,19,0.405]],["keywords/0",[]],["title/1",[20,283.026,21,399.104,22,243.113]],["content/1",[8,0.135,11,0.689,17,2.23,19,0.367,20,3.961,21,5.586,22,4.925,23,0.458,24,0.458,25,0.794,26,7.683,27,6.177,28,0.537,29,0.549,30,0.53,31,0.53,32,0.476,33,0.658,34,4.01,35,4.11,36,3.181,37,8.42,38,8.42,39,8.42,40,5.733,41,7.432,42,6.635,43,5.856,44,7.432,45,2.809,46,4.968,47,7.432]],["keywords/1",[]],["title/2",[48,766.424,49,388.905]],["content/2",[]],["keywords/2",[]],["title/3",[12,700.412]],["content/3",[1,1.863,8,0.124,11,0.774,12,9.084,19,0.432,23,0.54,24,0.54,25,0.647,26,5.327,28,0.633,29,0.647,30,0.625,31,0.625,32,0.561,33,0.776,49,5.038,50,8.706,51,10.942,52,4.94,53,5.76,54,12.086,55,8.367,56,10.942,57,9.263,58,2.092,59,1.574,60,9.929]],["keywords/3",[]],["title/4",[61,984.84]],["content/4",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,52,5.055,61,13.069,62,5.292,63,9.095,64,6.223,65,14.01]],["keywords/4",[]],["title/5",[66,1055.734]],["content/5",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,52,5.055,62,5.292,63,9.095,67,15.439,68,15.439,69,14.01]],["keywords/5",[]],["title/6",[70,984.84]],["content/6",[1,2.67,8,0.096,19,0.62,23,0.775,24,0.775,45,4.748,52,5.136,70,13.279,71,13.279,72,14.235]],["keywords/6",[]],["title/7",[73,854.409]],["content/7",[1,2.587,8,0.093,19,0.6,23,0.751,24,0.751,45,4.6,49,6.999,74,15.198,75,12.866,76,7.624,77,4.761,78,13.792]],["keywords/7",[]],["title/8",[79,984.84]],["content/8",[1,2.628,8,0.095,19,0.61,23,0.762,24,0.762,45,4.673,52,5.055,79,13.069,80,15.439,81,8.734,82,14.01]],["keywords/8",[]],["title/9",[83,984.84]],["content/9",[1,2.903,17,4.098,52,5.585,81,9.649,83,14.439]],["keywords/9",[]],["title/10",[81,658.131]],["content/10",[1,2.67,8,0.096,19,0.62,23,0.775,24,0.775,45,4.748,52,5.136,81,8.874,84,8.549,85,14.235]],["keywords/10",[]],["title/11",[36,398.786]],["content/11",[1,2.509,8,0.091,19,0.582,23,0.728,24,0.728,36,5.053,52,4.826,62,6.289,84,8.033,86,14.74,87,7.074,88,11.807,89,13.376]],["keywords/11",[]],["title/12",[90,1055.734]],["content/12",[1,3.123,8,0.091,17,4.409,19,0.582,23,0.728,24,0.728,91,13.376,92,14.74,93,13.376,94,13.376,95,16.65]],["keywords/12",[]],["title/13",[20,283.026,77,207.669,96,561.174]],["content/13",[8,0.137,11,0.407,17,2.456,19,0.187,20,2.022,22,1.737,23,0.234,24,0.234,25,0.28,28,0.274,29,0.28,30,0.271,31,0.271,32,0.524,34,3.425,35,3.511,36,2.717,40,3.384,45,3.094,54,3.793,58,0.905,59,1.14,63,4.669,77,4.508,96,13.563,97,5.656,98,3.621,99,4.735,100,3.355,101,2.851,102,4.009,103,2.535,104,1.926,105,2.452,106,2.679,107,4.297,108,4.297,109,11.952,110,7.192,111,2.581,112,1.998,113,3.248,114,3.152,115,5.436,116,4.882,117,4.735,118,16.022,119,4.297,120,3.248,121,7.926,122,3.793,123,8.653,124,4.297,125,2.628,126,4.297,127,3.602,128,4.297,129,4.297,130,4.735,131,4.297,132,4.297,133,4.297,134,4.297]],["keywords/13",[]],["title/14",[135,561.174,136,601.571,137,408.344]],["content/14",[8,0.132,11,0.389,12,2.706,19,0.178,20,3.239,22,3.61,23,0.222,24,0.222,25,0.965,28,0.26,29,0.266,30,0.257,31,0.257,32,0.231,33,0.319,34,3.279,35,1.991,36,3.964,49,2.07,55,3.438,57,3.806,58,0.859,59,0.647,76,4.938,87,4.724,104,0.847,111,5.365,135,3.806,136,4.08,137,9.652,138,2.769,139,6.064,140,3.786,141,4.495,142,6.69,143,5.549,144,6.812,145,4.495,146,4.08,147,4.495,148,6.112,149,5.203,150,7.587,151,4.495,152,4.495,153,3.601,154,10.493,155,4.08,156,3.601,157,10.493,158,4.08,159,3.601,160,10.493,161,4.08,162,3.601,163,10.493,164,4.08,165,9.262,166,4.08,167,4.08,168,4.08,169,4.08,170,4.495,171,4.495,172,4.495]],["keywords/14",[]],["title/15",[87,318.13,173,486.853,174,531.002]],["content/15",[0,6.852,8,0.135,11,0.245,13,7.787,17,1.92,19,0.189,22,2.93,26,5.011,28,0.595,31,0.273,32,0.245,34,2.066,36,2.739,40,2.041,46,2.56,55,3.656,59,2.404,81,2.705,87,3.835,111,4.355,112,2.017,135,4.048,137,2.945,139,2.945,140,1.566,142,3.412,173,7.559,174,3.83,175,4.782,176,4.339,177,3.388,178,4.782,179,4.782,180,4.782,181,3.83,182,4.782,183,3.656,184,4.339,185,7.251,186,4.048,187,4.048,188,4.339,189,4.048,190,4.048,191,4.048,192,4.339,193,4.279,194,4.339,195,4.339,196,4.339,197,4.339,198,4.339,199,3.279,200,4.339,201,4.339,202,4.339,203,4.048,204,3.83,205,3.83,206,7.251,207,7.251,208,4.339,209,3.096,210,3.83,211,3.096,212,3.83,213,3.388,214,3.83,215,3.83,216,3.83,217,4.048,218,4.339,219,4.339,220,7.251,221,7.251,222,4.339,223,7.251,224,4.339,225,4.048,226,6.764,227,4.048,228,4.048]],["keywords/15",[]],["title/16",[20,283.026,22,243.113,229,601.571]],["content/16",[]],["keywords/16",[]],["title/17",[230,546.914,231,423.686]],["content/17",[8,0.135,11,0.649,17,2.054,19,0.338,22,3.135,23,0.422,24,0.422,25,0.506,28,0.494,29,0.506,30,0.489,31,0.489,32,0.772,33,0.606,34,3.694,35,3.786,36,5.16,40,3.649,84,4.658,104,1.611,120,Line truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.9">
 <title data-react-helmet="true">Basic options | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/options"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Basic options | Artplayer.js"><meta data-react-helmet="true" name="description" content="container"><meta data-react-helmet="true" property="og:description" content="container"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/options"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/options" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/options" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">Common properties | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/propertie"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Common properties | Artplayer.js"><meta data-react-helmet="true" name="description" content="play"><meta data-react-helmet="true" property="og:description" content="play"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/propertie"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/propertie" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/propertie" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><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/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<div><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><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/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebaLine truncated
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.js"></script>
 </body>
 </html>
@@ -1 +0,0 @@
-[{"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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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; }, }, ], }); Copy","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, setting, 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) { // } }); art.setting.add({ name: 'setting1', html: 'your-setting', mounted: function($setting1) { // } }); // 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'); var $setting1 = art.query('.art-setting-setting1'); // 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']; var $setting1 = art.setting['setting1']; }); Copy 提示 Note that you can't create components with the same name","keywords":""},{"title":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create selector in the controls","content":"","keywords":""},{"title":"Switch subtitle","type":1,"pageTitle":"Add select in the controls","url":"en/Questions/Create selector in the controls#switch-subtitle","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: 'Subtitle 01', selector: [ { defauLine truncated
@@ -0,0 +1 @@
+[{"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) { // } Copy","keywords":""},{"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; }, }, ], }); Copy","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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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: 'https://artplayer.org/assets/sample/video.mp4', muted: true, autoSize: true, autoplay: true, ads: [ { url: '/assets/sample/test1.mp4' }, { url: '/assets/sample/test2.webm' }, ], controls: [ { position: 'right', html: 'Skip The Ads', click: function () { // Skip The Ads art.ads.end(); }, }, ], layers: [ { html: 'Skip The Ads', style: { position: 'absolute', top: '20px', right: '20px', }, click: function () { // Skip The Ads art.ads.end(); }, }, ], }); art.on('ready', function () { // Triggers when each video advertisement is played art.on('ads:start', (item) =&gt; { console.info('Ads is playing: ' + item.url); }); // Triggers when all video advertisements are end art.on('ads:end', () =&gt; { console.info('Ads is end'); }); // Current advertising index console.info(art.ads.index); // Whether all the advertisements are ended console.info(art.ads.isEnd); // Whether the advertisement is playing console.info(art.ads.playing); // The object of the prev advertisement console.info(art.ads.prev); // The object of the current advertisement console.info(art.ads.current); // The object of the next advertisement console.info(art.ads.next); }); Copy","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, controlLine truncated
@@ -1 +1 @@
-[{"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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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; }, }, ], }); Copy","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, setting, 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) { // } }); art.setting.add({ name: 'setting1', html: 'your-setting', mounted: function($setting1) { // } }); // 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'); var $setting1 = art.query('.art-setting-setting1'); // 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']; var $setting1 = art.setting['setting1']; }); Copy 提示 Note that you can't create components with the same name","keywords":""},{"title":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create selector in the controls","content":"","keywords":""},{"title":"Switch subtitle","type":1,"pageTitle":"Add select in the controls","url":"en/Questions/Create selector in the controls#switch-subtitle","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: 'Subtitle 01', selector: [ { defauLine truncated
+[{"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) { // } Copy","keywords":""},{"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; }, }, ], }); Copy","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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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: 'https://artplayer.org/assets/sample/video.mp4', muted: true, autoSize: true, autoplay: true, ads: [ { url: '/assets/sample/test1.mp4' }, { url: '/assets/sample/test2.webm' }, ], controls: [ { position: 'right', html: 'Skip The Ads', click: function () { // Skip The Ads art.ads.end(); }, }, ], layers: [ { html: 'Skip The Ads', style: { position: 'absolute', top: '20px', right: '20px', }, click: function () { // Skip The Ads art.ads.end(); }, }, ], }); art.on('ready', function () { // Triggers when each video advertisement is played art.on('ads:start', (item) =&gt; { console.info('Ads is playing: ' + item.url); }); // Triggers when all video advertisements are end art.on('ads:end', () =&gt; { console.info('Ads is end'); }); // Current advertising index console.info(art.ads.index); // Whether all the advertisements are ended console.info(art.ads.isEnd); // Whether the advertisement is playing console.info(art.ads.playing); // The object of the prev advertisement console.info(art.ads.prev); // The object of the current advertisement console.info(art.ads.current); // The object of the next advertisement console.info(art.ads.next); }); Copy","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, controlLine truncated
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-beta.9">
 <title data-react-helmet="true">弹幕库插件 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Plugins/danmuku"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="弹幕库插件 | Artplayer.js"><meta data-react-helmet="true" name="description" content="演示"><meta data-react-helmet="true" property="og:description" content="演示"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Plugins/danmuku"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Plugins/danmuku" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Plugins/danmuku" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">在控制栏添加按钮 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Create button in the controls"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="在控制栏添加按钮 | Artplayer.js"><meta data-react-helmet="true" name="description" content="有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 bootstrap"><meta data-react-helmet="true" property="og:description" content="有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 bootstrap"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Create button in the controls"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create button in the controls" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">在控制栏添加列表 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Create selector in the controls"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="在控制栏添加列表 | Artplayer.js"><meta data-react-helmet="true" name="description" content="有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 selector 和 onSelect 属性"><meta data-react-helmet="true" property="og:description" content="有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 selector 和 onSelect 属性"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Create selector in the controls"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Create selector in the controls" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">处理单个组件 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Handle single component"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="处理单个组件 | Artplayer.js"><meta data-react-helmet="true" name="description" content="当我们在layers、contextmenu、controls、setting里添加自定义组件时，最好带上一个唯一的 name 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。"><meta data-react-helmet="true" property="og:description" content="当我们在layers、contextmenu、controls、setting里添加自定义组件时，最好带上一个唯一的 name 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Handle single component"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Handle single component" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">如何添加视频广告 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/How to add video ads"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="如何添加视频广告 | Artplayer.js"><meta data-react-helmet="true" name="description" content="视频广告存在于正式视频播放之前，支持多个视频广告"><meta data-react-helmet="true" property="og:description" content="视频广告存在于正式视频播放之前，支持多个视频广告"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/How to add video ads"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How to add video ads" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">如何导入类型 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/How to import types"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="如何导入类型 | Artplayer.js"><meta data-react-helmet="true" name="description" content="有时你会丢失 TypeScript 的语法提示，这时候你可以手动导入类型"><meta data-react-helmet="true" property="og:description" content="有时你会丢失 TypeScript 的语法提示，这时候你可以手动导入类型"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/How to import types"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/How to import types" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">与 React Portal 使用 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/Questions/Use with react portal"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="与 React Portal 使用 | Artplayer.js"><meta data-react-helmet="true" name="description" content="在 layers、contextmenu、controls、setting 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑"><meta data-react-helmet="true" property="og:description" content="在 layers、contextmenu、controls、setting 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/Questions/Use with react portal"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/Questions/Use with react portal" hreflang="en"><link data-react-helmet="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.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-Line truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">高级属性 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/advance"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="高级属性 | Artplayer.js"><meta data-react-helmet="true" name="description" content="这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读"><meta data-react-helmet="true" property="og:description" content="这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/advance"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/advance" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/advance" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">静态属性 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/class"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="静态属性 | Artplayer.js"><meta data-react-helmet="true" name="description" content="静态属性存在于构造函数 Artplayer 上，和播放器实例没有直接关联"><meta data-react-helmet="true" property="og:description" content="静态属性存在于构造函数 Artplayer 上，和播放器实例没有直接关联"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/class"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/class" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/class" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">实例事件 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/events"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="实例事件 | Artplayer.js"><meta data-react-helmet="true" name="description" content="播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 video 元素，是直接监听video元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 video:"><meta data-react-helmet="true" property="og:description" content="播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 video 元素，是直接监听video元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 video:"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/events"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/events" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/events" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">快速上手 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="快速上手 | Artplayer.js"><meta data-react-helmet="true" name="description" content="安装"><meta data-react-helmet="true" property="og:description" content="安装"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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 class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">第三方库 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/libraries"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="第三方库 | Artplayer.js"><meta data-react-helmet="true" name="description" content="flv.js"><meta data-react-helmet="true" property="og:description" content="flv.js"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/libraries"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/libraries" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/libraries" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">基础参数 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/options"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="基础参数 | Artplayer.js"><meta data-react-helmet="true" name="description" content="container"><meta data-react-helmet="true" property="og:description" content="container"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/options"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/options" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/options" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.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.9">
 <title data-react-helmet="true">常用属性 | Artplayer.js</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://artplayer.org/document/zh-cn/propertie"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="常用属性 | Artplayer.js"><meta data-react-helmet="true" name="description" content="play"><meta data-react-helmet="true" property="og:description" content="play"><link data-react-helmet="true" rel="shortcut icon" href="/document/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://artplayer.org/document/zh-cn/propertie"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/propertie" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://artplayer.org/document/zh-cn/propertie" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.f21e1cf1.css">
-<link rel="preload" href="/document/assets/js/runtime~main.7b329e1f.js" as="script">
-<link rel="preload" href="/document/assets/js/main.f1d3e548.js" as="script">
+<link rel="preload" href="/document/assets/js/runtime~main.3fb07191.js" as="script">
+<link rel="preload" href="/document/assets/js/main.cbbf0b15.js" as="script">
 </head>
 <body>
 <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><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
-<script src="/document/assets/js/runtime~main.7b329e1f.js"></script>
-<script src="/document/assets/js/main.f1d3e548.js"></script>
+<div><a href="#" class="skipToContent_OuoZ">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_TMUO themedImage--light_4Vu1" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_TMUO themedImage--dark_uzRr" height="28" width="28"></div><b class="navbar__title">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></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 class="navbar__link">v 4.x.x</a><ul class="dropdown__menu"><li><a href="https://artplayer.org/document_v3/" target="_blank" rel="noopener noreferrer" class="dropdown__link"><span>v 3.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><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></span></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a 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_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><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 role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><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-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/zh-cn/options">基础参数</a></li><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/propertie">常用属性</a></li><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/advance">高级属性</a></li><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/class">静态属性</a></li><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/events">实例事件</a></li><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/libraries">第三方库</a></li><li class="theme-doc-sidebar-item-categoryLine truncated
+<script src="/document/assets/js/runtime~main.3fb07191.js"></script>
+<script src="/document/assets/js/main.cbbf0b15.js"></script>
 </body>
 </html>
@@ -827,23 +827,27 @@
      _classCallCheck(this, Template);

      this.art = art;
-      this.query = this.query.bind(this);
+      var option = art.option,
+          constructor = art.constructor,
+          whitelist = art.whitelist;

-      if (art.option.container instanceof Element) {
-        this.$container = art.option.container;
+      if (option.container instanceof Element) {
+        this.$container = option.container;
      } else {
-        this.$container = query(art.option.container);
-        errorHandle(this.$container, "No container element found by ".concat(art.option.container));
+        this.$container = query(option.container);
+        errorHandle(this.$container, "No container element found by ".concat(option.container));
      }

      var type = this.$container.tagName.toLowerCase();
      errorHandle(type === 'div', "Unsupported container element type, only support 'div' but got '".concat(type, "'"));
-      errorHandle(art.constructor.instances.every(function (ins) {
+      errorHandle(constructor.instances.every(function (ins) {
        return ins.template.$container !== _this.$container;
      }), 'Cannot mount multiple instances on the same dom element');
+      this.query = this.query.bind(this);
+      this.$container.dataset.artId = art.id;
      this.$original = this.$container.cloneNode(true);

-      if (art.whitelist.state) {
+      if (whitelist.state) {
        this.desktop();
      } else {
        this.mobile();
@@ -858,11 +862,9 @@
    }, {
      key: "desktop",
      value: function desktop() {
-        var _this$art$option = this.art.option,
-            backdrop = _this$art$option.backdrop,
-            useSSR = _this$art$option.useSSR;
+        var option = this.art.option;

-        if (!useSSR) {
+        if (!option.useSSR) {
          this.$container.innerHTML = Template.html;
        }

@@ -892,9 +894,8 @@
        this.$miniTitle = this.query('.art-mini-title');
        this.$miniClose = this.query('.art-mini-close');
        this.$contextmenu = this.query('.art-contextmenus');
-        this.$container.dataset.artId = this.art.id;

-        if (backdrop) {
+        if (option.backdrop) {
          addClass(this.$settingInner, 'art-backdrop-filter');
          addClass(this.$contextmenu, 'art-backdrop-filter');
          addClass(this.$info, 'art-backdrop-filter');
@@ -923,7 +924,7 @@
    }], [{
      key: "html",
      get: function get() {
-        return "\n          <div class=\"art-video-player art-subtitle-show art-layer-show\">\n            <video class=\"art-video\"></video>\n            <div class=\"art-poster\"></div>\n            <div class=\"art-subtitle\"></div>\n            <div class=\"art-danmuku\"></div>\n            <div class=\"art-layers\"></div>\n            <div class=\"art-mask\">\n              <div class=\"art-state\"></div>\n            </div>\n            <div class=\"art-bottom\">\n              <div class=\"art-progress\"></div>\n              <div class=\"art-controls\">\n                <div class=\"art-controls-left\"></div>\n                <div class=\"art-controls-right\"></div>\n              </div>\n            </div>\n            <div class=\"art-loading\"></div>\n            <div class=\"art-notice\">\n              <div class=\"art-notice-inner\"></div>\n            </div>\n            <div class=\"art-settings\">\n              <div class=\"art-setting-inner\">\n                <div class=\"art-setting-body\"></div>\n              </div>\n            </div>\n            <div class=\"art-info\">\n              <div class=\"art-info-panel\">\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Player version:</div>\n                  <div class=\"art-info-content\">5.0.0</div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video url:</div>\n                  <div class=\"art-info-content\" data-video=\"src\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video volume:</div>\n                  <div class=\"art-info-content\" data-video=\"volume\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video time:</div>\n                  <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video duration:</div>\n                  <div class=\"art-info-content\" data-video=\"duration\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video resolution:</div>\n                  <div class=\"art-info-content\">\n                    <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"art-info-close\">[x]</div>\n            </div>\n            <div class=\"art-mini-header\">\n              <div class=\"art-mini-title\"></div>\n              <div class=\"art-mini-close\">\xD7</div>\n            </div>\n            <div class=\"art-contextmenus\"></div>\n          </div>\n        ";
+        return "\n          <div class=\"art-video-player art-subtitle-show art-layer-show\">\n            <video class=\"art-video\"></video>\n            <div class=\"art-poster\"></div>\n            <div class=\"art-subtitle\"></div>\n            <div class=\"art-danmuku\"></div>\n            <div class=\"art-layers\"></div>\n            <div class=\"art-mask\">\n              <div class=\"art-state\"></div>\n            </div>\n            <div class=\"art-bottom\">\n              <div class=\"art-progress\"></div>\n              <div class=\"art-controls\">\n                <div class=\"art-controls-left\"></div>\n                <div class=\"art-controls-right\"></div>\n              </div>\n            </div>\n            <div class=\"art-loading\"></div>\n            <div class=\"art-notice\">\n              <div class=\"art-notice-inner\"></div>\n            </div>\n            <div class=\"art-settings\">\n              <div class=\"art-setting-inner\">\n                <div class=\"art-setting-body\"></div>\n              </div>\n            </div>\n            <div class=\"art-info\">\n              <div class=\"art-info-panel\">\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Player version:</div>\n                  <div class=\"art-info-content\">4.2.0</div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video url:</div>\n                  <div class=\"art-info-content\" data-video=\"src\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video volume:</div>\n                  <div class=\"art-info-content\" data-video=\"volume\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video time:</div>\n                  <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video duration:</div>\n                  <div class=\"art-info-content\" data-video=\"duration\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video resolution:</div>\n                  <div class=\"art-info-content\">\n                    <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"art-info-close\">[x]</div>\n            </div>\n            <div class=\"art-mini-header\">\n              <div class=\"art-mini-title\"></div>\n              <div class=\"art-mini-close\">\xD7</div>\n            </div>\n            <div class=\"art-contextmenus\"></div>\n          </div>\n        ";
      }
    }]);

@@ -2269,13 +2270,13 @@
    }

    if (option.volume) {
-      art.volume = clamp(option.volume, 0, 1);
+      $video.volume = clamp(option.volume, 0, 1);
    }

-    var volume = storage.get('volume');
+    var volumeStorage = storage.get('volume');

-    if (volume) {
-      art.volume = clamp(volume, 0, 1);
+    if (typeof volumeStorage === 'number') {
+      $video.volume = clamp(volumeStorage, 0, 1);
    }

    if (option.poster) {
@@ -3435,7 +3436,7 @@

  function version(option) {
    return _objectSpread$7(_objectSpread$7({}, option), {}, {
-      html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 5.0.0</a>'
+      html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 4.2.0</a>'
    });
  }

@@ -4077,6 +4078,8 @@
            this.keys[key].splice(index, 1);
          }
        }
+
+        return this;
      }
    }]);

@@ -4695,7 +4698,6 @@

  function miniProgressBar(art) {
    var layers = art.layers;
-        art.option;
    layers.add({
      name: 'miniProgressBar',
      style: {
@@ -4969,7 +4971,7 @@
    }, {
      key: "version",
      get: function get() {
-        return '5.0.0';
+        return '4.2.0';
      }
    }, {
      key: "env",
@@ -4979,7 +4981,7 @@
    }, {
      key: "build",
      get: function get() {
-        return '1641548341085';
+        return '1641555243763';
      }
    }, {
      key: "config",
@@ -5086,7 +5088,7 @@

    return Artplayer;
  }(Emitter); // eslint-disable-next-line no-console
-  console.log('%c ArtPlayer %c 5.0.0 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
+  console.log('%c ArtPlayer %c 4.2.0 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');

  return Artplayer;

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/srcLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/srcLine truncated
@@ -702,6 +702,72 @@ art.on('ready', () => {
 });
 ```

+## attr
+
+-   Type: `Function`
+-   Parameter: `String`
+
+Dynamically get and set the properties of the video element
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
+```
+
+## title
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+Dynamic get and set player title
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.title);
+    art.title = 'New Title';
+    console.info(art.title);
+});
+```
+
+## theme
+
+-   Type: `Setter/Getter`
+-   Parameter: `String`
+
+Dynamic get and set player theme color
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
+```
+
 ## destroy

 -   Type: `Function`
@@ -21,7 +21,7 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.play();
-})
+});
 ```

 ## pause
@@ -45,7 +45,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.pause();
    }, 3000);
-})
+});
 ```

 ## toggle
@@ -69,7 +69,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.toggle();
    }, 3000);
-})
+});
 ```

 ## seek
@@ -89,7 +89,7 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.seek = 5;
-})
+});
 ```

 ## forward
@@ -109,7 +109,7 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.forward = 5;
-})
+});
 ```

 ## backward
@@ -133,7 +133,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.backward = 2;
    }, 3000);
-})
+});
 ```

 ## volume
@@ -155,7 +155,7 @@ art.on('ready', () => {
    console.info(art.volume);
    art.volume = 0.5;
    console.info(art.volume);
-})
+});
 ```

 ## url
@@ -177,7 +177,7 @@ art.on('ready', () => {
    console.info(art.url);
    art.url = '/assets/sample/video.mp4?t=0';
    console.info(art.url);
-})
+});
 ```

 ## switchUrl
@@ -202,7 +202,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.switchUrl('/assets/sample/video.mp4?t=0', '新视频名字');
    }, 3000);
-})
+});
 ```

 ## switchQuality
@@ -227,7 +227,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.switchQuality('/assets/sample/video.mp4?t=0', '新视频地址');
    }, 3000);
-})
+});
 ```

 ## muted
@@ -249,7 +249,7 @@ art.on('ready', () => {
    console.info(art.muted);
    art.muted = true;
    console.info(art.muted);
-})
+});
 ```

 ## currentTime
@@ -271,7 +271,7 @@ art.on('ready', () => {
    console.info(art.currentTime);
    art.currentTime = 5;
    console.info(art.currentTime);
-})
+});
 ```

 ## duration
@@ -290,7 +290,7 @@ var art = new Artplayer({

 art.on('ready', () => {
    console.info(art.duration);
-})
+});
 ```

 :::tip 提示
@@ -316,7 +316,7 @@ var art = new Artplayer({
 art.on('ready', () => {
    art.seek = 10;
    art.screenshot();
-})
+});
 ```

 ## getDataURL
@@ -335,8 +335,8 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.seek = 10;
-    art.getDataURL().then(url => console.info(url));
-})
+    art.getDataURL().then((url) => console.info(url));
+});
 ```

 ## getBlobUrl
@@ -355,8 +355,8 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.seek = 10;
-    art.getBlobUrl().then(url => console.info(url));
-})
+    art.getBlobUrl().then((url) => console.info(url));
+});
 ```

 ## fullscreen
@@ -381,7 +381,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.fullscreen = false;
    }, 3000);
-})
+});
 ```

 :::tip 提示
@@ -412,7 +412,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.fullscreenWeb = false;
    }, 3000);
-})
+});
 ```

 ## pip
@@ -437,7 +437,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.pip = false;
    }, 3000);
-})
+});
 ```

 :::tip 提示
@@ -466,7 +466,7 @@ art.on('ready', () => {
    console.info(art.poster);
    art.poster = '/assets/sample/poster.jpg?t=0';
    console.info(art.poster);
-})
+});
 ```

 ## mini
@@ -490,7 +490,7 @@ art.on('ready', () => {
    setTimeout(() => {
        art.mini = false;
    }, 3000);
-})
+});
 ```

 ## playing
@@ -513,7 +513,7 @@ art.on('ready', () => {
    console.info(art.playing);
    art.play();
    console.info(art.playing);
-})
+});
 ```

 ## autoSize
@@ -535,7 +535,7 @@ art.on('ready', () => {
    console.info(art.autoSize);
    art.autoSize = true;
    console.info(art.autoSize);
-})
+});
 ```

 ## rect
@@ -554,7 +554,7 @@ var art = new Artplayer({

 art.on('ready', () => {
    console.info(JSON.stringify(art.rect));
-})
+});
 ```

 :::tip 提示
@@ -579,10 +579,10 @@ var art = new Artplayer({
 });

 art.on('ready', () => {
-    console.info(art.flip)
-    art.flip = 'horizontal'
-    console.info(art.flip)
-})
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
 ```

 ## rotate
@@ -602,10 +602,10 @@ var art = new Artplayer({
 });

 art.on('ready', () => {
-    console.info(art.rotate)
-    art.rotate = 90
-    console.info(art.rotate)
-})
+    console.info(art.rotate);
+    art.rotate = 90;
+    console.info(art.rotate);
+});
 ```

 ## playbackRate
@@ -624,10 +624,10 @@ var art = new Artplayer({
 });

 art.on('ready', () => {
-    console.info(art.playbackRate)
-    art.playbackRate = 2
-    console.info(art.playbackRate)
-})
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
 ```

 ## aspectRatio
@@ -646,10 +646,10 @@ var art = new Artplayer({
 });

 art.on('ready', () => {
-    console.info(art.aspectRatio)
-    art.aspectRatio = '16:9'
-    console.info(art.aspectRatio)
-})
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
 ```

 ## loop
@@ -668,10 +668,10 @@ var art = new Artplayer({
 });

 art.on('ready', () => {
-    console.info(art.loop)
+    console.info(art.loop);
    art.loop = [5, 10];
-    console.info(art.loop)
-})
+    console.info(art.loop);
+});
 ```

 :::tip 提示
@@ -702,6 +702,72 @@ art.on('ready', () => {
 });
 ```

+## attr
+
+-   类型: `Function`
+-   参数: `String`
+
+动态获取和设置 video 元素的属性
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
+```
+
+## title
+
+-   类型: `Setter/Getter`
+-   参数: `String`
+
+动态获取和设置播放器标题
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.title);
+    art.title = '新标题';
+    console.info(art.title);
+});
+```
+
+## theme
+
+-   类型: `Setter/Getter`
+-   参数: `String`
+
+动态获取和设置播放器主题颜色
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
+```
+
 ## destroy

 -   类型: `Function`
@@ -719,5 +785,5 @@ var art = new Artplayer({

 art.on('ready', () => {
    art.destroy();
-})
-```
+});
+```
@@ -1,8 +1,8 @@
 /*!
- * artplayer.js v4.1.4
+ * artplayer.js v4.2.0
 * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2021 Harvey Zack
+ * (c) 2017-2022 Harvey Zack
 * Released under the MIT License.
 */

-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
@@ -1,10 +1,7 @@
 import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent } from '../utils';

 export function getPosFromEvent(art, event) {
-    const {
-        template: { $progress },
-    } = art;
-
+    const { $progress } = art.template;
    const { left } = $progress.getBoundingClientRect();
    const width = clamp(event.pageX - left, 0, $progress.clientWidth);
    const second = (width / $progress.clientWidth) * art.duration;
@@ -69,5 +69,6 @@ export default class Hotkey {
                this.keys[key].splice(index, 1);
            }
        }
+        return this;
    }
 }
@@ -16,12 +16,12 @@ export default function attrInit(art) {
    }

    if (option.volume) {
-        art.volume = clamp(option.volume, 0, 1);
+        $video.volume = clamp(option.volume, 0, 1);
    }

-    const volume = storage.get('volume');
-    if (volume) {
-        art.volume = clamp(volume, 0, 1);
+    const volumeStorage = storage.get('volume');
+    if (typeof volumeStorage === 'number') {
+        $video.volume = clamp(volumeStorage, 0, 1);
    }

    if (option.poster) {
@@ -1,5 +1,5 @@
 export default function miniProgressBar(art) {
-    const { layers, option } = art;
+    const { layers } = art;

    layers.add({
        name: 'miniProgressBar',
@@ -3,27 +3,28 @@ import { errorHandle, query, addClass, replaceElement, isMobile } from './utils'
 export default class Template {
    constructor(art) {
        this.art = art;
+        const { option, constructor, whitelist } = art;

-        this.query = this.query.bind(this);
-
-        if (art.option.container instanceof Element) {
-            this.$container = art.option.container;
+        if (option.container instanceof Element) {
+            this.$container = option.container;
        } else {
-            this.$container = query(art.option.container);
-            errorHandle(this.$container, `No container element found by ${art.option.container}`);
+            this.$container = query(option.container);
+            errorHandle(this.$container, `No container element found by ${option.container}`);
        }

        const type = this.$container.tagName.toLowerCase();
        errorHandle(type === 'div', `Unsupported container element type, only support 'div' but got '${type}'`);

        errorHandle(
-            art.constructor.instances.every((ins) => ins.template.$container !== this.$container),
+            constructor.instances.every((ins) => ins.template.$container !== this.$container),
            'Cannot mount multiple instances on the same dom element',
        );

+        this.query = this.query.bind(this);
+        this.$container.dataset.artId = art.id;
        this.$original = this.$container.cloneNode(true);

-        if (art.whitelist.state) {
+        if (whitelist.state) {
            this.desktop();
        } else {
            this.mobile();
@@ -102,9 +103,9 @@ export default class Template {
    }

    desktop() {
-        const { backdrop, useSSR } = this.art.option;
+        const { option } = this.art;

-        if (!useSSR) {
+        if (!option.useSSR) {
            this.$container.innerHTML = Template.html;
        }

@@ -135,9 +136,7 @@ export default class Template {
        this.$miniClose = this.query('.art-mini-close');
        this.$contextmenu = this.query('.art-contextmenus');

-        this.$container.dataset.artId = this.art.id;
-
-        if (backdrop) {
+        if (option.backdrop) {
            addClass(this.$settingInner, 'art-backdrop-filter');
            addClass(this.$contextmenu, 'art-backdrop-filter');
            addClass(this.$info, 'art-backdrop-filter');
				`@@ -1 +0,0 @@`
				"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document\|\|[]).push([[941],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0\|\|(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]\|\|m[c]\|\|u[c]\|\|l;return n?a.createElement(k,i(i({ref:t},d),{},{components:n})):a.createElement(k,i({ref:t},d))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e\|\|r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7498:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",isDocsHomePage:!1,title:"Common properties",description:"play",source:"@site/docs/en/Properties.md",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},d=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],u={toc:d};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Play video"),(0,l.kt)("div",{cLine truncated
				`@@ -0,0 +1 @@`
				"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document\|\|[]).push([[941],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0\|\|(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]\|\|m[c]\|\|u[c]\|\|l;return n?a.createElement(k,i(i({ref:t},d),{},{components:n})):a.createElement(k,i({ref:t},d))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e\|\|r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7498:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",isDocsHomePage:!1,title:"Common properties",description:"play",source:"@site/docs/en/Properties.md",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},d=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"attr",id:"attr",children:[],level:2},{value:"title",id:"title",children:[],level:2},{value:"theme",id:"theme",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],u={toc:d};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.Line truncated
				`@@ -1 +0,0 @@`
				{"version":"2.3.9","fields":["title","content","keywords"],"fieldVectors":[["title/0",[0,764.803,1,392.147]],["content/0",[]],["keywords/0",[]],["title/1",[2,697.546]],["content/1",[1,5.08,2,9.046,3,1.873,4,8.668,5,10.92,6,4.99,7,5.733,8,12.05,9,8.343,10,10.92,11,9.24,12,5.3,13,0.126,14,0.551,15,0.551,16,0.66,17,0.646,18,0.66,19,0.789,20,0.638,21,0.638,22,0.572,23,0.792,24,2.155,25,1.615,26,9.907,27,0.441]],["keywords/1",[]],["title/2",[28,982.19]],["content/2",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,28,13.03,29,5.563,30,9.054,31,6.18,32,13.971]],["keywords/2",[]],["title/3",[33,1053.139]],["content/3",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,29,5.563,30,9.054,34,15.4,35,15.4,36,13.971]],["keywords/3",[]],["title/4",[37,982.19]],["content/4",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,37,13.238,38,4.704,39,13.238,40,14.195]],["keywords/4",[]],["title/5",[41,851.66]],["content/5",[1,7.052,3,2.601,13,0.095,14,0.765,15,0.765,27,0.612,38,4.558,42,15.161,43,12.827,44,7.583,45,4.803,46,13.754]],["keywords/5",[]],["title/6",[47,982.19]],["content/6",[3,2.642,6,5.104,13,0.096,14,0.777,15,0.777,27,0.621,38,4.63,47,13.03,48,15.4,49,8.692,50,13.971]],["keywords/6",[]],["title/7",[51,982.19]],["content/7",[3,2.918,6,5.638,49,9.601,51,14.392,52,4.081]],["keywords/7",[]],["title/8",[49,655.232]],["content/8",[3,2.684,6,5.186,13,0.098,14,0.79,15,0.79,27,0.631,38,4.704,49,8.832,53,8.506,54,14.195]],["keywords/8",[]],["title/9",[55,395.69]],["content/9",[3,2.522,6,4.874,13,0.092,14,0.742,15,0.742,27,0.593,29,6.611,53,7.994,55,5.012,56,14.704,57,7.034,58,11.77,59,13.339]],["keywords/9",[]],["title/10",[60,1053.139]],["content/10",[3,3.139,13,0.092,14,0.742,15,0.742,27,0.593,52,4.39,61,13.339,62,14.704,63,13.339,64,13.339,65,16.602]],["keywords/10",[]],["title/11",[66,281.456,67,397.686,68,241.492]],["content/11",[12,7.642,13,0.137,14,0.467,15,0.467,16,0.81,17,0.547,18,0.56,19,0.702,20,0.541,21,0.541,22,0.486,23,0.672,27,0.374,38,2.785,52,2.222,55,3.157,66,3.939,67,5.566,68,4.89,69,6.157,70,3.987,71,4.088,72,8.403,73,8.403,74,8.403,75,5.699,76,7.414,77,6.602,78,5.835,79,7.414,80,4.947,81,7.414]],["keywords/11",[]],["title/12",[82,559.968,83,600.417,84,406.938]],["content/12",[1,2.089,2,2.698,9,3.431,11,3.799,13,0.134,14,0.227,15,0.227,16,0.984,17,0.265,18,0.272,19,0.397,20,0.262,21,0.262,22,0.235,23,0.326,24,0.886,25,0.664,27,0.181,44,4.916,55,3.934,57,4.701,66,3.222,68,3.586,70,3.261,71,1.982,82,3.799,83,4.074,84,9.613,85,2.761,86,5.343,87,6.043,88,3.861,89,4.49,90,6.649,91,5.522,92,6.936,93,4.49,94,4.074,95,4.49,96,6.081,97,5.189,98,7.576,99,4.49,100,4.49,101,0.848,102,3.594,103,10.471,104,4.074,105,3.594,106,10.471,107,4.074,108,3.594,109,10.471,110,4.074,111,3.594,112,10.471,113,4.074,114,9.239,115,4.074,116,4.074,117,4.074,118,4.074,119,4.49,120,4.49,121,4.49]],["keywords/12",[]],["title/13",[66,281.456,68,241.492,122,600.417]],["content/13",[]],["keywords/13",[]],["title/14",[123,545.05,124,421.686]],["content/14",[13,0.138,14,0.431,15,0.431,16,0.516,17,0.504,18,0.516,19,0.662,20,0.499,21,0.499,22,0.787,23,0.619,27,0.344,52,2.047,53,4.639,55,5.119,68,3.114,70,3.673,71,3.766,75,3.629,91,6.038,101,1.611,124,4.269,125,7.742,126,6.831,127,11.45,128,7.742,129,7.742,130,7.742,131,7.742,132,7.742,133,7.742,134,6.831,135,5.845,136,7.742,137,6.831,138,6.831,139,4.558,140,6.831]],["keywords/14",[]],["title/15",[123,545.05,141,713.279]],["content/15",[13,0.139,14,0.127,15,0.127,16,0.275,17,0.269,18,0.152,19,0.239,20,0.147,21,0.147,22,0.132,23,0.182,27,0.101,45,0.796,52,0.603,55,0.857,68,0.917,70,1.082,71,1.109,126,2.012,134,2.012,135,1.721,139,1.342,140,2.012,141,2.126,142,4.131,143,18.151,144,2.28,145,18.151,146,18.151,147,2.28,148,2.28,149,2.28,150,2.28,151,2.28,152,2.28,153,2.28,154,2.28,155,2.28,156,2.28,157,2.28,158,2.28,159,2.28,160,2.28,161,2.28,162,2.28,163,2.28,164,2.28,165,2.28,166,2.28,167,2.28,168,2.28,169,2.28,170,2.28,171,2.28,172,2.28,173,2.28,174,2.28,175,2.28,176,2.28,177,2.28,178,2.28,179,2.28,180,2.28,181,2.28,182,2.28,183,2.28,184,2.28,185,2.28,186,2.28,187,2.28,188,2.28,189,2.28,190,2.28,191,2.28,192,2.28,193,2.28,194,2.28,195,2.28,196,2.28,197,2.28,198,2.28,199,2.28,200,2.28,201,2.28,202,2.28,203,2.28,204,2.28,205,2.28,206,2.28,207,2.28,208,2.28,209,2.28,210,2.28,211,2.28,212,2.28,213,2.28,214,2.28,215,2.28,216,2.28,217,2.28,218,2.28,219,2.28,220,2.28,221,2.28,222,2.28,223,2.28,224,2.28,225,2.28,226,2.28,227,2.28,228,2.28,229,2.28,230,2.28,231,2.28,232,2.28,233,2.28]],["keywords/15",[]],["title/16",[45,209.672,66,281.456,234,559.968]],["content/16",[8,3.786,13,0.139,14,0.239,15,0.239,16,0.286,17,0.28,18,0.286,19,0.415,20,0.276,21,0.276,22,0.535,24,0.933,25,1.17,27,0.191,30,4.653,38,3.068,45,4.549,52,2.448,55,2.698,66,2.011,68,1.726,70,3.407,71,3.492,75,3.366,86,2.571,101,1.927,135,3.239,138,3.786,234,13.526,235,5.627,236,3.613,237,4.73,238,3.347,239,2.842,240,4.002,241,2.526,242,2.442,243,2.67,244,4.291,245,4.291,246,11.93,247,7.18,248,1.987,249,3.239,250,3.144,251,5.42,252,4.Line truncated
				`@@ -1 +0,0 @@`
				[{"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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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; }, }, ], }); Copy","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, setting, 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) { // } }); art.setting.add({ name: 'setting1', html: 'your-setting', mounted: function($setting1) { // } }); // 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'); var $setting1 = art.query('.art-setting-setting1'); // 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']; var $setting1 = art.setting['setting1']; }); Copy 提示 Note that you can't create components with the same name","keywords":""},{"title":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create selector in the controls","content":"","keywords":""},{"title":"Switch subtitle","type":1,"pageTitle":"Add select in the controls","url":"en/Questions/Create selector in the controls#switch-subtitle","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: 'Subtitle 01', selector: [ { defauLine truncated
				`@@ -0,0 +1 @@`
				[{"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) { // } Copy","keywords":""},{"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; }, }, ], }); Copy","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.length); }); Copy "},{"title":"version","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"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); Copy "},{"title":"scheme","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"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); Copy "},{"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); Copy "},{"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([])); Copy "},{"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: 'https://artplayer.org/assets/sample/video.mp4', muted: true, autoSize: true, autoplay: true, ads: [ { url: '/assets/sample/test1.mp4' }, { url: '/assets/sample/test2.webm' }, ], controls: [ { position: 'right', html: 'Skip The Ads', click: function () { // Skip The Ads art.ads.end(); }, }, ], layers: [ { html: 'Skip The Ads', style: { position: 'absolute', top: '20px', right: '20px', }, click: function () { // Skip The Ads art.ads.end(); }, }, ], }); art.on('ready', function () { // Triggers when each video advertisement is played art.on('ads:start', (item) => { console.info('Ads is playing: ' + item.url); }); // Triggers when all video advertisements are end art.on('ads:end', () => { console.info('Ads is end'); }); // Current advertising index console.info(art.ads.index); // Whether all the advertisements are ended console.info(art.ads.isEnd); // Whether the advertisement is playing console.info(art.ads.playing); // The object of the prev advertisement console.info(art.ads.prev); // The object of the current advertisement console.info(art.ads.current); // The object of the next advertisement console.info(art.ads.next); }); Copy","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, controlLine truncated