build all

docs/document/assets/advanced_built-in.md.eeb4ee36.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673441101000}'),o={name:"advanced/built-in.md"},e=s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-hidden="true">#</a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>，比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>播放器的选项</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673441101000}'),o={name:"advanced/built-in.md"},e=s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-hidden="true">#</a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>，比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>播放器的选项</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>

docs/document/assets/advanced_built-in.md.eeb4ee36.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673441101000}'),o={name:"advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s("",4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673441101000}'),o={name:"advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s("",4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};

docs/document/assets/advanced_class.md.6df32901.js

@@ -1,4 +1,4 @@
-import{_ as s,c as n,o as l,a as e,b as a}from"./app.c821c423.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673441101000}'),i={name:"advanced/class.md"},o=e('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-hidden="true">#</a></Line truncated
+import{_ as s,c as n,o as l,a as e,b as a}from"./app.9e4cc5a4.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673441101000}'),i={name:"advanced/class.md"},o=e('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-hidden="true">#</a></Line truncated
 <span class="line"></span>
 <span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/advanced_class.md.6df32901.lean.js

@@ -1 +1 @@
-import{_ as s,c as n,o as l,a as e,b as a}from"./app.c821c423.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673441101000}'),i={name:"advanced/class.md"},o=e("",5),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=e("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),d=Line truncated
+import{_ as s,c as n,o as l,a as e,b as a}from"./app.9e4cc5a4.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673441101000}'),i={name:"advanced/class.md"},o=e("",5),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=e("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),d=Line truncated

docs/document/assets/advanced_event.md.acb45ca5.js

@@ -1,4 +1,4 @@
-import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.c821c423.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673441101000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",nuLine truncated
+import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.9e4cc5a4.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673441101000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",nuLine truncated
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>

docs/document/assets/advanced_event.md.acb45ca5.lean.js

@@ -1 +1 @@
-import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.c821c423.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673441101000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",nuLine truncated
+import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.9e4cc5a4.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673441101000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",nuLine truncated

docs/document/assets/advanced_plugin.md.99f262f6.js

@@ -1,4 +1,4 @@
-import{_ as l,c as p,o,b as s,d as n,a}from"./app.c821c423.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">        name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/advanced_plugin.md.99f262f6.lean.js

@@ -1 +1 @@
-import{_ as l,c as p,o,b as s,d as n,a}from"./app.c821c423.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};

docs/document/assets/advanced_property.md.c7bb10a6.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673441101000}'),o={name:"advanced/property.md"},e=s('<h1 id="实例属性" tabindex="-1">实例属性 <a class="header-anchor" href="#实例属性" aria-hidden="true">#</a></h1><p>这里的 <code>实例属性</code> 是指挂载在 <code>实例</code> 的 <code>一级属性</code>，比较常用</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</p>',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673441101000}'),o={name:"advanced/property.md"},e=s('<h1 id="实例属性" tabindex="-1">实例属性 <a class="header-anchor" href="#实例属性" aria-hidden="true">#</a></h1><p>这里的 <code>实例属性</code> 是指挂载在 <code>实例</code> 的 <code>一级属性</code>，比较常用</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</p>',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/advanced_property.md.c7bb10a6.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673441101000}'),o={name:"advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",5),ls=n("div",{className:"run-code"},"Line truncated
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673441101000}'),o={name:"advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",5),ls=n("div",{className:"run-code"},"Line truncated

docs/document/assets/app.9e4cc5a4.js

@@ -1,4 +1,4 @@
-function Qs(e,t){const n=Object.create(null),s=e.split(",");for(let o=0;o<s.length;o++)n[s[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}function ts(e){if(Q(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],o=be(s)?tl(s):ts(s);if(o)for(const i in o)t[i]=o[i]}return t}else{if(be(e))return e;if(ve(e))return e}}const Xr=/;(?![^(]*\))/g,Zr=/:([^]+)/,el=/\/\*.*?\*\//gs;function tl(e){const t={};return e.replace(el,"").split(Xr).forEach(n=>{if(n){const s=n.split(Zr);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function pe(e){let t="";if(be(e))t=e;else if(Q(e))for(let n=0;n<e.length;n++){const s=pe(e[n]);s&&(t+=s+" ")}else if(ve(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const nl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",sl=Qs(nl);function Oi(e){return!!e||e===""}const ae=e=>be(e)?e:e==null?"":Q(e)||ve(e)&&(e.toString===Fi||!ne(e.toString))?JSON.stringify(e,Ni,2):String(e),Ni=(e,t)=>t&&t.__v_isRef?Ni(e,t.value):Ht(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o])=>(n[`${s} =>`]=o,n),{})}:Bi(t)?{[`Set(${t.size})`]:[...t.values()]}:ve(t)&&!Q(t)&&!Di(t)?String(t):t,ge={},Bt=[],We=()=>{},ol=()=>!1,il=/^on[^a-z]/,wn=e=>il.test(e),Js=e=>e.startsWith("onUpdate:"),Pe=Object.assign,Xs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},rl=Object.prototype.hasOwnProperty,ce=(e,t)=>rl.call(e,t),Q=Array.isArray,Ht=e=>ns(e)==="[object Map]",Bi=e=>ns(e)==="[object Set]",ne=e=>typeof e=="function",be=e=>typeof e=="string",Zs=e=>typeof e=="symbol",ve=e=>e!==null&&typeof e=="object",Hi=e=>ve(e)&&ne(e.then)&&ne(e.catch),Fi=Object.prototype.toString,ns=e=>Fi.call(e),ll=e=>ns(e).slice(8,-1),Di=e=>ns(e)==="[object Object]",eo=e=>be(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,rn=Qs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),ss=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},cl=/-(\w)/g,st=ss(e=>e.replace(cl,(t,n)=>n?n.toUpperCase():"")),al=/\B([A-Z])/g,Yt=ss(e=>e.replace(al,"-$1").toLowerCase()),os=ss(e=>e.charAt(0).toUpperCase()+e.slice(1)),xs=ss(e=>e?`on${os(e)}`:""),pn=(e,t)=>!Object.is(e,t),Bn=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Rn=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},_n=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Mo;const ul=()=>Mo||(Mo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ne;class fl{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Ne,!t&&Ne&&(this.index=(Ne.scopes||(Ne.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ne;try{return Ne=this,t()}finally{Ne=n}}}on(){Ne=this}off(){Ne=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.scopes)for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const o=this.parent.scopes.pop();o&&o!==this&&(this.parent.scopes[this.index]=o,o.index=this.index)}this.parent=void 0,this.active=!1}}}function dl(e,t=Ne){t&&t.active&&t.effects.push(e)}function hl(){return Ne}function pl(e){Ne&&Ne.cleanups.push(e)}const to=e=>{const t=new Set(e);return t.w=0,t.n=0,t},Ri=e=>(e.w&_t)>0,zi=e=>(e.n&_t)>0,_l=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=_t},ml=e=>{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s<t.length;s++){const o=t[s];Ri(o)&&!zi(o)?o.delete(e):t[n++]=o,o.w&=~_t,o.n&=~_t}t.length=n}},Ms=new WeakMap;let on=0,_t=1;const Is=30;let qe;const Vt=Symbol(""),Os=Symbol("");class no{constructor(t,n=null,s){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,dl(this,s)}run(){if(!this.active)return this.fn();let t=qe,n=ht;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=qe,qe=this,ht=!0,_t=1<<++on,on<=Is?_l(this):Io(this),this.fn()}finally{on<=Is&&ml(this),_t=1<<--on,qe=this.parent,ht=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){qe===this?this.deferStop=!0:this.active&&(Io(this),this.onStop&&this.onStop(),this.active=!1)}}function Io(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let ht=!0;const ji=[];function Qt(){ji.push(ht),ht=!1}function Jt(){const e=ji.pop();ht=e===void 0?!0:e}function Fe(e,t,n){if(ht&&qe){let s=Ms.get(e);s||Ms.set(e,s=new Map);let o=s.get(n);o||s.set(n,o=to()),Ui(o)}}function Ui(e,t){let n=!1;on<=Is?zi(e)||(e.n|=_t,n=!Ri(e)):n=!e.has(qe),n&&(e.add(qe),qe.deps.push(e))}function rt(e,t,n,s,o,i){const r=Ms.get(e);if(!r)return;let l=[];if(t==="clear")l=[...r.values()];else if(n==="length"&&Q(e)){const c=_n(s);r.forEach((a,f)=>{(f==="length"||f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":Q(e)?eo(n)&&l.push(r.get("length")):(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"delete":Q(e)||(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"set":Line truncated
+function Qs(e,t){const n=Object.create(null),s=e.split(",");for(let o=0;o<s.length;o++)n[s[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}function ts(e){if(Q(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],o=be(s)?tl(s):ts(s);if(o)for(const i in o)t[i]=o[i]}return t}else{if(be(e))return e;if(ve(e))return e}}const Xr=/;(?![^(]*\))/g,Zr=/:([^]+)/,el=/\/\*.*?\*\//gs;function tl(e){const t={};return e.replace(el,"").split(Xr).forEach(n=>{if(n){const s=n.split(Zr);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function pe(e){let t="";if(be(e))t=e;else if(Q(e))for(let n=0;n<e.length;n++){const s=pe(e[n]);s&&(t+=s+" ")}else if(ve(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const nl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",sl=Qs(nl);function Oi(e){return!!e||e===""}const ae=e=>be(e)?e:e==null?"":Q(e)||ve(e)&&(e.toString===Fi||!ne(e.toString))?JSON.stringify(e,Ni,2):String(e),Ni=(e,t)=>t&&t.__v_isRef?Ni(e,t.value):Ht(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o])=>(n[`${s} =>`]=o,n),{})}:Bi(t)?{[`Set(${t.size})`]:[...t.values()]}:ve(t)&&!Q(t)&&!Di(t)?String(t):t,ge={},Bt=[],We=()=>{},ol=()=>!1,il=/^on[^a-z]/,wn=e=>il.test(e),Js=e=>e.startsWith("onUpdate:"),Pe=Object.assign,Xs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},rl=Object.prototype.hasOwnProperty,ce=(e,t)=>rl.call(e,t),Q=Array.isArray,Ht=e=>ns(e)==="[object Map]",Bi=e=>ns(e)==="[object Set]",ne=e=>typeof e=="function",be=e=>typeof e=="string",Zs=e=>typeof e=="symbol",ve=e=>e!==null&&typeof e=="object",Hi=e=>ve(e)&&ne(e.then)&&ne(e.catch),Fi=Object.prototype.toString,ns=e=>Fi.call(e),ll=e=>ns(e).slice(8,-1),Di=e=>ns(e)==="[object Object]",eo=e=>be(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,rn=Qs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),ss=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},cl=/-(\w)/g,st=ss(e=>e.replace(cl,(t,n)=>n?n.toUpperCase():"")),al=/\B([A-Z])/g,Yt=ss(e=>e.replace(al,"-$1").toLowerCase()),os=ss(e=>e.charAt(0).toUpperCase()+e.slice(1)),xs=ss(e=>e?`on${os(e)}`:""),pn=(e,t)=>!Object.is(e,t),Bn=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Rn=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},_n=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Mo;const ul=()=>Mo||(Mo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ne;class fl{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Ne,!t&&Ne&&(this.index=(Ne.scopes||(Ne.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ne;try{return Ne=this,t()}finally{Ne=n}}}on(){Ne=this}off(){Ne=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.scopes)for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const o=this.parent.scopes.pop();o&&o!==this&&(this.parent.scopes[this.index]=o,o.index=this.index)}this.parent=void 0,this.active=!1}}}function dl(e,t=Ne){t&&t.active&&t.effects.push(e)}function hl(){return Ne}function pl(e){Ne&&Ne.cleanups.push(e)}const to=e=>{const t=new Set(e);return t.w=0,t.n=0,t},Ri=e=>(e.w&_t)>0,zi=e=>(e.n&_t)>0,_l=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=_t},ml=e=>{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s<t.length;s++){const o=t[s];Ri(o)&&!zi(o)?o.delete(e):t[n++]=o,o.w&=~_t,o.n&=~_t}t.length=n}},Ms=new WeakMap;let on=0,_t=1;const Is=30;let qe;const Vt=Symbol(""),Os=Symbol("");class no{constructor(t,n=null,s){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,dl(this,s)}run(){if(!this.active)return this.fn();let t=qe,n=ht;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=qe,qe=this,ht=!0,_t=1<<++on,on<=Is?_l(this):Io(this),this.fn()}finally{on<=Is&&ml(this),_t=1<<--on,qe=this.parent,ht=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){qe===this?this.deferStop=!0:this.active&&(Io(this),this.onStop&&this.onStop(),this.active=!1)}}function Io(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let ht=!0;const ji=[];function Qt(){ji.push(ht),ht=!1}function Jt(){const e=ji.pop();ht=e===void 0?!0:e}function Fe(e,t,n){if(ht&&qe){let s=Ms.get(e);s||Ms.set(e,s=new Map);let o=s.get(n);o||s.set(n,o=to()),Ui(o)}}function Ui(e,t){let n=!1;on<=Is?zi(e)||(e.n|=_t,n=!Ri(e)):n=!e.has(qe),n&&(e.add(qe),qe.deps.push(e))}function rt(e,t,n,s,o,i){const r=Ms.get(e);if(!r)return;let l=[];if(t==="clear")l=[...r.values()];else if(n==="length"&&Q(e)){const c=_n(s);r.forEach((a,f)=>{(f==="length"||f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":Q(e)?eo(n)&&l.push(r.get("length")):(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"delete":Q(e)||(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"set":Line truncated
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;

docs/document/assets/chunks/virtual_search-data.dc3fa643.js

@@ -1,697 +0,0 @@
-const t={map:'[{"高级属性":["0.0"],"option":["0.1","1.12","12.14"],"whitelist":["0.2","16.36"],"template":["0.3"],"events":["0.4"],"storage":["0.5"],"icons":["0.6","16.40"],"i18n":["0.7","16.44"],"notice":["0.8","1.15"],"layers":["0.9","15.1","16.29"],"controls":["0.10","15.2","16.32"],"contextmenu":["0.11","1.14","15.3","16.31"],"subtitle":["0.12","16.38"],"loading":["0.13"],"hotkey":["0.14","2.5","16.20"],"mask":["0.15"],"setting":["0.16","1.16","1.17","1.18","16.19"],"plugins":["0.17","16.35"],"静态属性":["1.0"],"instances":["1.1"],"version":["1.2"],"env":["1.3"],"build":["1.4"],"config":["1.5","12.11"],"utils":["1.6"],"scheme":["1.7"],"emitter":["1.8"],"validator":["1.9"],"kindof":["1.10"],"html":["1.11"],"debug":["1.13"],"indicator":["1.19","1.20","1.21","1.22"],"volume":["1.23","1.24","1.42","4.8","16.8"],"resize":["1.25","2.15"],"scroll":["1.26","1.27"],"auto":["1.28","1.29","1.30"],"reconnect":["1.31","1.32"],"control":["1.33"],"db":["1.34"],"mobile":["1.35","1.36","1.37"],"info":["1.38"],"fast":["1.39","1.40"],"touch":["1.41"],"seek":["1.43","2.26","4.5"],"progress":["1.44"],"playback":["1.45"],"aspect":["1.46"],"flip":["1.47","2.20","4.26","16.15"],"实例事件":["2.0"],"ready":["2.1"],"restart":["2.2"],"pause":["2.3","4.2"],"play":["2.4","4.1"],"destroy":["2.6","4.4"],"url":["2.7","4.9","16.2"],"focus":["2.8"],"blur":["2.9"],"dblclick":["2.10"],"click":["2.11"],"error":["2.12"],"hover":["2.13"],"mousemove":["2.14"],"view":["2.16"],"aspectratio":["2.17","4.28","16.17"],"autoheight":["2.18","4.30"],"autosize":["2.19","4.24","16.12"],"fullscreen":["2.21","4.18","16.23"],"fullscreenweb":["2.22","4.19","16.24"],"mini":["2.23","4.22"],"pip":["2.24","4.20","16.21"],"screenshot":["2.25","4.15","16.18"],"subtitleoffset":["2.27","16.25"],"subtitleupdate":["2.28"],"subtitleload":["2.29"],"subtitleswitch":["2.30"],"video":["2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","4.40"],"编写插件":["3.0"],"实例属性":["4.0"],"toggle":["4.3"],"forward":["4.6"],"backward":["4.7"],"switchurl":["4.10"],"switchquality":["4.11"],"muted":["4.12","16.10"],"currenttime":["4.13"],"duration":["4.14"],"getdataurl":["4.16"],"getbloburl":["4.17"],"poster":["4.21","16.5"],"playing":["4.23"],"rect":["4.25"],"playbackrate":["4.27","16.16"],"loop":["4.29","16.14"],"attr":["4.31"],"title":["4.32","16.6"],"type":["4.33","16.41"],"theme":["4.34","16.7"],"airplay":["4.35","16.49"],"loaded":["4.36"],"played":["4.37"],"proxy":["4.38"],"query":["4.39"],"wip":["5.0"],"安装使用":["6.0"],"安装":["6.1","10.2","11.2","12.2","13.2","14.3"],"cdn":["6.2","10.3","11.3","12.3","13.3","14.4"],"使用":["6.3","10.4","11.4","14.5"],"vue":["6.4"],"react":["6.5"],"语法提示":["6.6"],"dash":["7.0"],"flv":["8.0"],"hls":["9.0","13.0"],"视频广告":["10.0"],"演示":["10.1","11.1","12.1","13.1","14.2"],"控制器皮肤":["11.0"],"enable":["11.5"],"弹幕库":["12.0"],"选项":["12.4"],"使用弹幕数组":["12.5"],"使用弹幕":["12.6"],"使用异步调用":["12.7"],"hide":["12.8"],"ishide":["12.9"],"emit":["12.10"],"load":["12.12"],"reset":["12.13"],"事件":["12.15"],"iframe":["14.0","14.7"],"说明":["14.1"],"index":["14.6"],"例子":["14.8"],"组件配置":["15.0"],"基础选项":["16.0"],"container":["16.1"],"id":["16.3"],"onready":["16.4"],"islive":["16.9"],"autoplay":["16.11"],"automini":["16.13"],"mutex":["16.22"],"miniprogressbar":["16.26"],"usessr":["16.27"],"playsinline":["16.28"],"settings":["16.30"],"quality":["16.33"],"highlight":["16.34"],"thumbnails":["16.37"],"morevideoattr":["16.39"],"customtype":["16.42"],"lang":["16.43"],"lock":["16.45"],"fastforward":["16.46"],"autoplayback":["16.47"],"autoorientation":["16.48"],"设置面板":["17.0"],"选择列表":["17.1"],"列表嵌套":["17.2"],"切换按钮":["17.3"],"范围滑块":["17.4"]},{"0":["4.36","4.37","16.8"],"1":["12.4"],"4":["15.3"],"5":["12.4","15.1"],"10":["12.4"],"13":["15.3"],"15":["3.0"],"22":["15.1"],"这里的":["0.0","1.0","4.0"],"播放器的选项":["0.1"],"div":["0.1","0.2","0.3","0.5","0.6","0.8","0.14","0.17","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","3.0","4.1","4.2","4.3","4.14","4.25","4.35","7.0","8.0","9.0","10.4","11.4","11.5","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","15.1","15.2","15.3","16.2","16.29","16.30","16.31","16.32","17.2"],"classname":["0.1","0.2","0.3","0.17","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","3.0","7.0","8.0","9.0","10.4","11.4","12.5","12.6","12.7","12.9","12.10","12.12","12.13","12.14","15.1","15.2","15.3","16.2","16.29","16.30","17.2"],"run":["0.1","0.3","2.0"Line truncated
-`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"option",p:`播放器的选项
-<div className="run-code">▶ Run Code&lt ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"whitelist",p:`管理移动设备的白名单功能，只有一个属性 state 返回是否启用播放器功能
-<div className=" ...`,l:"advanced/built-in.html#whitelist",a:"whitelist"},"0.3":{t:"template",p:`管理播放器所有的 DOM 元素
-<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.4":{t:"events",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.5":{t:"storage",p:`管理播放器的本地存储
-
-name 属性用于设置缓存的 key
-set 方法用于设置缓存
-get 方法用于获取缓存
-del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.6":{t:"icons",p:`管理播放器所有的 svg 图标
-<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.7":{t:"i18n",p:`管理播放器的 i18n
-
-get 方法用于获取 i18n 的值
-update 方法用于更新 i18n 对象
-
-<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.8":{t:"notice",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语
-<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.9":{t:"layers",p:`管理播放器的层
-
-add 方法用于动态添加层
-show 属性用于设置是否显示全部层
-toggle 属性用于切换是否显示全部层 ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.10":{t:"controls",p:`管理播放器的控制器
-
-add 方法用于动态添加控制器
-show 属性用于设置是否显示全部控制器
-toggle 属性用于切换是 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.11":{t:"contextmenu",p:`管理播放器的右键菜单
-
-add 方法用于动态添加菜单
-show 属性用于设置是否显示全部菜单
-toggle 属性用于切换是否 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.12":{t:"subtitle",p:`管理播放器的字幕功能
-
-url 属性设置和返回当前字幕地址
-style 方法设置当前字幕的样式
-switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.13":{t:"loading",p:`管理播放器的加载层
-
-show 属性用于设置是否显示加载层
-toggle 属性用于切换是否显示加载层
-
-<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.14":{t:"hotkey",p:`管理播放器的快捷键功能
-
-add 方法用于添加快捷键
-remove 方法用于删除快捷键
-
-<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.15":{t:"mask",p:`管理播放器的遮罩层
-
-show 属性用于设置是否显示遮罩层
-toggle 属性用于切换是否显示遮罩层
-
-<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.16":{t:"setting",p:`管理播放器的设置面板
-
-add 方法用于动态添加设置项
-show 属性用于设置是否显示全部设置项
-toggle 属性用于切换 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.17":{t:"plugins",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件
-<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用
-:::warning 提示
-有些属性是全大写的，说明这些属 ...`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"instances",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
-<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"version",p:`返回播放器的版本信息
-<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"env",p:`返回播放器的环境变量
-<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"build",p:`返回播放器的打包时间
-<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"config",p:`返回视频的默认配置
-<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"utils",p:`返回播放器的工具函数集合
-<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"scheme",p:`返回播放器选项的校验方案
-<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"emitter",p:`返回事件分发器的构造函数
-<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"validator",p:`返回选项的校验函数
-<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"kindof",p:`返回类型检测的函数工具
-<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"html",p:`返回播放器所需的 html 字符串
-<div className="run-code">▶  ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"option",p:`返回播放器的默认选项
-<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"1.13":{t:"debug",p:"\r",l:"advanced/class.html#debug",a:"debug"},"1.14":{t:"contextmenu",p:"\r",l:"advanced/class.html#contextmenu",a:"contextmenu"},"1.15":{t:"notice-time",p:"\r",l:"advanced/class.html#notice-time",a:"notice-time"},"1.16":{t:"setting-width",p:"\r",l:"advanced/class.html#setting-width",a:"setting-width"},"1.17":{t:"setting-item-width",p:"\r",l:"advanced/class.html#setting-item-width",a:"setting-item-width"},"1.18":{t:"setting-item-height",p:"\r",l:"advanced/class.html#setting-item-height",a:"setting-item-height"},"1.19":{t:"indicator-size",p:"\r",l:"advanced/class.html#indicator-size",a:"indicator-size"},"1.20":{t:"indicator-size-icon",p:"\r",l:"advanced/class.html#indicator-size-icon",a:"indicator-size-icon"},"1.21":{t:"indicator-size-mobile",p:"\r",l:"advanced/class.html#indicator-size-mobile",a:"indicator-size-mobile"},"1.22":{t:"indicator-size-mobile-icon",p:"\r",l:"advanced/class.html#indicator-size-mobile-icon",a:"indicator-size-mobile-icon"},"1.23":{t:"volume-panel-width",p:"\r",l:"advanced/class.html#volume-panel-width",a:"volume-panel-width"},"1.24":{t:"volume-handle-width",p:"\r",l:"advanced/class.html#volume-handle-width",a:"volume-handle-width"},"1.25":{t:"resize-time",p:"\r",l:"advanced/class.html#resize-time",a:"resize-time"},"1.26":{t:"scroll-time",p:"\r",l:"advanced/class.html#scroll-time",a:"scroll-time"},"1.27":{t:"scroll-gap",p:"\r",l:"advanced/class.html#scroll-gap",a:"scroll-gap"},"1.28":{t:"auto-playback-max",p:"\r",l:"advanced/class.html#auto-playback-max",a:"auto-playback-max"},"1.29":{t:"auto-playback-min",p:"\r",l:"advanced/class.html#auto-playback-min",a:"auto-playback-min"},"1.30":{t:"auto-playback-timeout",p:"\r",l:"advanced/class.html#auto-playback-timeout",a:"auto-playback-timeout"},"1.31":{t:"reconnect-time-max",p:"\r",l:"advanced/class.html#reconnect-time-max",a:"reconnect-time-max"},"1.32":{t:"reconnect-sleep-time",p:"\r",l:"advanced/class.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"1.33":{t:"control-hide-time",p:"\r",l:"advanced/class.html#control-hide-time",a:"control-hide-time"},"1.34":{t:"db-clice-time",p:"\r",l:"advanced/class.html#db-clice-time",a:"db-clice-time"},"1.35":{t:"mobile-auto-playbackrate",p:"\r",l:"advanced/class.html#mobile-auto-playbackrate",a:"mobile-auto-playbackrate"},"1.36":{t:"mobile-auto-playbackrate-time",p:"\r",l:"advanced/class.html#mobile-auto-playbackrate-time",a:"mobile-auto-playbackrate-time"},"1.37":{t:"mobile-auto-orientation-time",p:"\r",l:"advanced/class.html#mobile-auto-orientation-time",a:"mobile-auto-orientation-time"},"1.38":{t:"info-loop-time",p:"\r",l:"advanced/class.html#info-loop-time",a:"info-loop-time"},"1.39":{t:"fast-forward-value",p:"\r",l:"advanced/class.html#fast-forward-value",a:"fast-forward-value"},"1.40":{t:"fast-forward-time",p:"\r",l:"advanced/class.html#fast-forward-time",a:"fast-forward-time"},"1.41":{t:"touch-move-ratio",p:"\r",l:"advanced/class.html#touch-move-ratio",a:"touch-move-ratio"},"1.42":{t:"volume-step",p:"\r",l:"advanced/class.html#volume-step",a:"volume-step"},"1.43":{t:"seek-step",p:"\r",l:"advanced/class.html#seek-step",a:"seek-step"},"1.44":{t:"progress-height",p:"\r",l:"advanced/class.html#progress-height",a:"progress-height"},"1.45":{t:"playback-rate",p:"\r",l:"advanced/class.html#playback-rate",a:"playback-rate"},"1.46":{t:"aspect-ratio",p:"\r",l:"advanced/class.html#aspect-ratio",a:"aspect-ratio"},"1.47":{t:"flip",p:"",l:"advanced/class.html#flip",a:"flip"},"2.0":{t:"实例事件",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件
-监听事件：
-<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"ready",p:`当播放器首次可以播放器时触发
-<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"restart",p:`当播放器切换地址后并可以播放时触发
-<div className="run-code">▶  ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"pause",p:`当播放器暂停时触发
-<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.4":{t:"play",p:`当播放器播放时触发
-<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.5":{t:"hotkey",p:`当播放器热键被按下时触发
-<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.6":{t:"destroy",p:`当播放器销毁时触发
-<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.7":{t:"url",p:`当视频地址变化时触发
-<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#url",a:"url"},"2.8":{t:"focus",p:`当播放器获得焦点时触发
-<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.9":{t:"blur",p:`当播放器失去焦点时触发
-<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.10":{t:"dblclick",p:`当播放器被双击时触发
-<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.11":{t:"click",p:`当播放器被单击时触发
-<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.12":{t:"error",p:`当播放器加载视频发生错误时触发
-<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.13":{t:"hover",p:`当播放器被鼠标移出或者移入时触发
-<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.14":{t:"mousemove",p:`当播放器被鼠标经过时触发
-<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.15":{t:"resize",p:`当播放器尺寸变化时触发
-<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.16":{t:"view",p:`当播放器出现在视口时触发
-<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.17":{t:"aspectratio",p:`当播放器长宽比变化时触发
-<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.18":{t:"autoheight",p:`当播放器自动设置高度时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.19":{t:"autosize",p:`当播放器自动设置尺寸时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.20":{t:"flip",p:`当播放器发生翻转时触发
-<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.21":{t:"fullscreen",p:`当播放器发生窗口全屏时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.22":{t:"fullscreenweb",p:`当播放器发生网页全屏时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.23":{t:"mini",p:`当播放器进入迷你模式时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#mini",a:"mini"},"2.24":{t:"pip",p:`当播放器进入画中画时触发
-<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.25":{t:"screenshot",p:`当播放器被截图时触发
-<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.26":{t:"seek",p:`当播放器发生时间跳转时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#seek",a:"seek"},"2.27":{t:"subtitleoffset",p:`当播放器发生字幕偏移时触发
-<div className="run-code">▶ Run  ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.28":{t:"subtitleupdate",p:`当字幕更新时触发
-<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.29":{t:"subtitleload",p:`当字幕加载时触发
-<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.30":{t:"subtitleswitch",p:`当字幕切换时触发
-<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.31":{t:"video-canplay",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
-`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.32":{t:"video-canplaythrough",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
-`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.33":{t:"video-complete",p:`OfflineAudioContext 渲染完成
-`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.34":{t:"video-durationchange",p:`duration 属性的值改变时触发
-`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.35":{t:"video-emptied",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.36":{t:"video-ended",p:`视频停止播放，因为 media 已经到达结束点
-`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.37":{t:"video-error",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式
-`,l:"advanced/event.html#video-error",a:"video-error"},"2.38":{t:"video-loadeddata",p:`media 中的首帧已经完成加载
-`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.39":{t:"video-loadedmetadata",p:`已加载元数据
-`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.40":{t:"video-pause",p:`播放已暂停
-`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.41":{t:"video-play",p:`播放已开始
-`,l:"advanced/event.html#video-play",a:"video-play"},"2.42":{t:"video-playing",p:`由于缺乏数据而暂停或延迟后，播放准备开始
-`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.43":{t:"video-progress",p:`在浏览器加载资源时周期性触发
-`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.44":{t:"video-ratechange",p:`播放速率发生变化
-`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.45":{t:"video-seeked",p:`跳帧（seek）操作完成
-`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.46":{t:"video-seeking",p:`跳帧（seek）操作开始
-`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.47":{t:"video-stalled",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
-`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.48":{t:"video-suspend",p:`媒体数据加载已暂停
-`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.49":{t:"video-timeupdate",p:`currentTime 属性指定的时间发生变化
-`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.50":{t:"video-volumechange",p:`音量发生变化
-`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.51":{t:"video-waiting",p:`由于暂时缺少数据，播放已停止
-`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"编写插件",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事
-可以在实例化的时候加载插件的函数
-<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"4.0":{t:"实例属性",p:`这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用
-`,l:"advanced/property.html",a:"实例属性"},"4.1":{t:"play",p:`
-Type: Function
-
-播放视频
-<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"4.2":{t:"pause",p:`
-Type: Function
-
-暂停视频
-<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"4.3":{t:"toggle",p:`
-Type: Function
-
-切换视频的播放和暂停
-<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"4.4":{t:"destroy",p:`
-Type: Function
-Parameter: Boolean
-
-销毁播放器，接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"4.5":{t:"seek",p:`
-Type: Setter
-Parameter: Number
-
-视频时间跳转，单位秒
-<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"4.6":{t:"forward",p:`
-Type: Setter
-Parameter: Number
-
-视频时间快进，单位秒
-<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"4.7":{t:"backward",p:`
-Type: Setter
-Parameter: Number
-
-视频时间快退，单位秒
-<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"4.8":{t:"volume",p:`
-Type: Setter/Getter
-Parameter: Number
-
-设置和获取视频音量，范围在：[0, 1]
-& ...`,l:"advanced/property.html#volume",a:"volume"},"4.9":{t:"url",p:`
-Type: Setter/Getter
-Parameter: String
-
-设置和获取视频地址
-<div clas ...`,l:"advanced/property.html#url",a:"url"},"4.10":{t:"switchurl",p:`
-Type: Function
-Parameter: String
-
-设置视频地址，设置时和 url 类似，但会执行一些优化 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"4.11":{t:"switchquality",p:`
-Type: Function
-Parameter: String
-
-设置视频画质地址，和 switchUrl 类似，但会带 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"4.12":{t:"muted",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置和获取视频是否静音
-<div c ...`,l:"advanced/property.html#muted",a:"muted"},"4.13":{t:"currenttime",p:`
-Type: Setter/Getter
-Parameter: Number
-
-设置和获取视频当前时间，设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"4.14":{t:"duration",p:`
-Type: Getter
-
-获取视频时长
-<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"4.15":{t:"screenshot",p:`
-Type: Function
-
-下载当前视频帧的截图
-<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"4.16":{t:"getdataurl",p:`
-Type: Function
-
-获取当前视频帧的截图的base64地址，返回的是一个 Promise
-<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"4.17":{t:"getbloburl",p:`
-Type: Function
-
-获取当前视频帧的截图的blob地址，返回的是一个 Promise
-<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"4.18":{t:"fullscreen",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置和获取播放器窗口全屏
-<div  ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"4.19":{t:"fullscreenweb",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置和获取播放器网页全屏
-<div  ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"4.20":{t:"pip",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置和获取播放器画中画模式
-<div ...`,l:"advanced/property.html#pip",a:"pip"},"4.21":{t:"poster",p:`
-Type: Setter/Getter
-Parameter: String
-
-设置和获取视频海报，只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"4.22":{t:"mini",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置和获取播放器迷你模式
-<div  ...`,l:"advanced/property.html#mini",a:"mini"},"4.23":{t:"playing",p:`
-Type: Getter
-Parameter: Boolean
-
-获取视频是否正在播放中
-<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"4.24":{t:"autosize",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-设置视频是否自适应尺寸，设置为 true  ...`,l:"advanced/property.html#autosize",a:"autosize"},"4.25":{t:"rect",p:`
-Type: Getter
-
-获取播放器的尺寸和坐标信息
-<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"4.26":{t:"flip",p:`
-Type: Setter/Getter
-Parameter: String
-
-设置和获取播放器翻转，支持normal,   ...`,l:"advanced/property.html#flip",a:"flip"},"4.27":{t:"playbackrate",p:`
-Type: Setter/Getter
-Parameter: Number
-
-设置和获取播放器播放速度
-<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"4.28":{t:"aspectratio",p:`
-Type: Setter/Getter
-Parameter: String
-
-设置和获取播放器长宽比
-<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"4.29":{t:"loop",p:`
-Type: Setter/Getter
-Parameter: Array
-
-设置和获取区间循序播放，单位秒
-<div ...`,l:"advanced/property.html#loop",a:"loop"},"4.30":{t:"autoheight",p:`
-Type: Setter/Getter
-Parameter: Boolean
-
-当容器只有宽度，该属性可以自动计算出并设置 ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"4.31":{t:"attr",p:`
-Type: Function
-Parameter: String
-
-动态获取和设置 video 元素的属性
-<div ...`,l:"advanced/property.html#attr",a:"attr"},"4.32":{t:"title",p:`
-Type: Setter/Getter
-Parameter: String
-
-动态获取和设置播放器标题
-<div c ...`,l:"advanced/property.html#title",a:"title"},"4.33":{t:"type",p:`
-Type: Setter/Getter
-Parameter: String
-
-动态获取和设置视频类型
-<div cl ...`,l:"advanced/property.html#type",a:"type"},"4.34":{t:"theme",p:`
-Type: Setter/Getter
-Parameter: String
-
-动态获取和设置播放器主题颜色
-<div ...`,l:"advanced/property.html#theme",a:"theme"},"4.35":{t:"airplay",p:`
-Type: Function
-
-开启隔空播放
-<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"4.36":{t:"loaded",p:`
-Type: Getter
-
-视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
-&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"4.37":{t:"played",p:`
-Type: Getter
-
-视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
-&l ...`,l:"advanced/property.html#played",a:"played"},"4.38":{t:"proxy",p:`
-Type: Function
-
-DOM 事件的代理函数，实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"4.39":{t:"query",p:`
-Type: Function
-
-DOM 的查询函数，类似 document.querySelector，但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"4.40":{t:"video",p:`
-Type: Element
-
-快捷返回播放器的 video 元素
-<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.0":{t:"wip",p:"",l:"en/index.html",a:"wip"},"6.0":{t:"安装使用",p:"\r",l:"index.html",a:"安装使用"},"6.1":{t:"安装",p:`::: code-group
-npm install artplayer
-
-yarn add artplayer
-
-pnpm ...`,l:"index.html#安装",a:"安装"},"6.2":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"6.3":{t:"使用",p:`::: code-group
-import Artplayer from 'artplayer';
-
-const art = ...`,l:"index.html#使用",a:"使用"},"6.4":{t:"vue-js",p:`::: code-group
-<template>
-  <div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"6.5":{t:"react-js",p:`::: code-group
-import { useEffect, useRef } from 'react';
-impo ...`,l:"index.html#react-js",a:"react-js"},"6.6":{t:"语法提示",p:`有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型
-变量：
-/**
- * @type { ...`,l:"index.html#语法提示",a:"语法提示"},"7.0":{t:"dash-js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js
-<div clas ...`,l:"library/dash.html",a:"dash-js"},"8.0":{t:"flv-js",p:`👉 https://github.com/Bilibili/flv.js
-<div className=" ...`,l:"library/flv.html",a:"flv-js"},"9.0":{t:"hls-js",p:`👉 https://github.com/video-dev/hls.js
-<div className=&quot ...`,l:"library/hls.html",a:"hls-js"},"10.0":{t:"视频广告",p:"\r",l:"plugin/ads.html",a:"视频广告"},"10.1":{t:"演示",p:`👉 查看完整演示
-`,l:"plugin/ads.html#演示",a:"演示"},"10.2":{t:"安装",p:`::: code-group
-npm install artplayer-plugin-ads
-
-yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"10.3":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"10.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"11.0":{t:"控制器皮肤",p:"\r",l:"plugin/control-ui.html",a:"控制器皮肤"},"11.1":{t:"演示",p:`👉 查看完整演示
-`,l:"plugin/control-ui.html#演示",a:"演示"},"11.2":{t:"安装",p:`::: code-group
-npm install artplayer-plugin-control
-
-yarn add  ...`,l:"plugin/control-ui.html#安装",a:"安装"},"11.3":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer-plugin-c ...`,l:"plugin/control-ui.html#cdn",a:"cdn"},"11.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/control-ui.html#使用",a:"使用"},"11.5":{t:"enable",p:`
-Type: Getter/Setter
-Parameter: Boolean
-
-是否启用新的控制器皮肤
-<div c ...`,l:"plugin/control-ui.html#enable",a:"enable"},"12.0":{t:"弹幕库",p:"\r",l:"plugin/danmuku.html",a:"弹幕库"},"12.1":{t:"演示",p:`👉 查看完整演示
-`,l:"plugin/danmuku.html#演示",a:"演示"},"12.2":{t:"安装",p:`::: code-group
-npm install artplayer-plugin-danmuku
-
-yarn add  ...`,l:"plugin/danmuku.html#安装",a:"安装"},"12.3":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"12.4":{t:"选项",p:`{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"12.5":{t:"使用弹幕数组",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"12.6":{t:"使用弹幕-xml",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"12.7":{t:"使用异步调用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"12.8":{t:"hide-show",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕
-<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"12.9":{t:"ishide",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示
-<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"12.10":{t:"emit",p:`通过方法 emit 发送一条实时弹幕
-<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"12.11":{t:"config",p:`通过方法 config 实时改变弹幕配置，支持属性有：
-
-danmuku
-speed
-opacity
-fontSize
-co ...`,l:"plugin/danmuku.html#config",a:"config"},"12.12":{t:"load",p:`通过 load 方法可以重载弹幕源，或者切换新弹幕
-<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"12.13":{t:"reset",p:`用于清空当前显示的弹幕
-<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"12.14":{t:"option",p:`用于获取当前弹幕配置
-<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"12.15":{t:"事件",p:`var art = new Artplayer({
-    container: '.artplayer-app',
-    ...`,l:"plugin/danmuku.html#事件",a:"事件"},"13.0":{t:"hls-画质",p:"\r",l:"plugin/hls-quality.html",a:"hls-画质"},"13.1":{t:"演示",p:`👉 查看完整演示
-`,l:"plugin/hls-quality.html#演示",a:"演示"},"13.2":{t:"安装",p:`::: code-group
-npm install artplayer-plugin-hls-quality
-
-yarn  ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"13.3":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"14.0":{t:"iframe-控制",p:"\r",l:"plugin/iframe.html",a:"iframe-控制"},"14.1":{t:"说明",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"14.2":{t:"演示",p:`👉 查看完整演示
-`,l:"plugin/iframe.html#演示",a:"演示"},"14.3":{t:"安装",p:`::: code-group
-npm install artplayer-plugin-iframe
-
-yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"14.4":{t:"cdn",p:`::: code-group
-https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"14.5":{t:"使用",p:`::: code-group
-<!DOCTYPE html>
-<html>
-    <head ...`,l:"plugin/iframe.html#使用",a:"使用"},"14.6":{t:"index-html-接口",p:`commit
-从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行， ...`,l:"plugin/iframe.html#index-html-接口",a:"index-html-接口"},"14.7":{t:"iframe-html-接口",p:`:::warning 提示
-iframe.html 接口 只能运行在 iframe.html 里
-:::
-inject
-注入 ...`,l:"plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"14.8":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听  ...",l:"plugin/iframe.html#例子",a:"例子"},"15.0":{t:"组件配置",p:`这里所说的组件配置主要是指：layers , controls , contextmenu 这三个共用的配置:
-
-
-
-属性
- ...`,l:"start/component.html",a:"组件配置"},"15.1":{t:"layers",p:`实例化时添加一个层，例如可以添加 logo 或者 广告 等等
-<div className="run-cod ...`,l:"start/component.html#layers",a:"layers"},"15.2":{t:"controls",p:`实例化时添加一个控制器
-:::warning controls 还有三个额外的选项
-
-position: left 和 ri ...`,l:"start/component.html#controls",a:"controls"},"15.3":{t:"contextmenu",p:`实例化时添加一个右键菜单
-<div className="run-code">▶ Run C ...`,l:"start/component.html#contextmenu",a:"contextmenu"},"16.0":{t:"基础选项",p:"\r",l:"start/option.html",a:"基础选项"},"16.1":{t:"container",p:`
-Type: String, Element
-Default: #artplayer
-
-播放器挂载的 DOM 容器
-< ...`,l:"start/option.html#container",a:"container"},"16.2":{t:"url",p:`
-Type: String
-Default: ''
-
-视频源地址
-<div className="run-c ...`,l:"start/option.html#url",a:"url"},"16.3":{t:"id",p:`
-Type: String
-Default: ''
-
-播放器的唯一标识，目前只用于记忆播放 autoplayback
-&lt ...`,l:"start/option.html#id",a:"id"},"16.4":{t:"onready",p:`
-Type: Function
-Default: undefined
-
-构造函数接受一个函数作为第二个参数，播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"16.5":{t:"poster",p:`
-Type: String
-Default: ''
-
-视频的海报，只会出现在播放器初始化且未播放的状态下
-<div c ...`,l:"start/option.html#poster",a:"poster"},"16.6":{t:"title",p:`
-Type: String
-Default: ''
-
-视频标题，目前会出现在 视频截图 和 迷你模式 下
-<div c ...`,l:"start/option.html#title",a:"title"},"16.7":{t:"theme",p:`
-Type: String
-Default: #f00
-
-播放器主题颜色，目前作用于 进度条 和 高亮元素 上
-<di ...`,l:"start/option.html#theme",a:"theme"},"16.8":{t:"volume",p:`
-Type: Number
-Default: 0.7
-
-播放器的默认音量
-<div className="r ...`,l:"start/option.html#volume",a:"volume"},"16.9":{t:"islive",p:`
-Type: Boolean
-Default: false
-
-使用直播模式，会隐藏进度条和播放时间
-<div clas ...`,l:"start/option.html#islive",a:"islive"},"16.10":{t:"muted",p:`
-Type: Boolean
-Default: false
-
-是否默认静音
-<div className=" ...`,l:"start/option.html#muted",a:"muted"},"16.11":{t:"autoplay",p:`
-Type: Boolean
-Default: false
-
-是否自动播放
-<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"16.12":{t:"autosize",p:`
-Type: Boolean
-Default: false
-
-播放器的尺寸默认会填充整个 container 容器尺寸，所以 ...`,l:"start/option.html#autosize",a:"autosize"},"16.13":{t:"automini",p:`
-Type: Boolean
-Default: false
-
-当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
-&l ...`,l:"start/option.html#automini",a:"automini"},"16.14":{t:"loop",p:`
-Type: Boolean
-Default: false
-
-是否循环播放
-<div className=" ...`,l:"start/option.html#loop",a:"loop"},"16.15":{t:"flip",p:`
-Type: Boolean
-Default: false
-
-是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"16.16":{t:"playbackrate",p:`
-Type: Boolean
-Default: false
-
-是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"16.17":{t:"aspectratio",p:`
-Type: Boolean
-Default: false
-
-是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
- ...`,l:"start/option.html#aspectratio",a:"aspectratio"},"16.18":{t:"screenshot",p:`
-Type: Boolean
-Default: false
-
-是否在底部控制栏里显示 视频截图 功能
-<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"16.19":{t:"setting",p:`
-Type: Boolean
-Default: false
-
-是否在底部控制栏里显示 设置面板 的开关按钮
-<div  ...`,l:"start/option.html#setting",a:"setting"},"16.20":{t:"hotkey",p:`
-Type: Boolean
-Default: true
-
-是否使用快捷键
-<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"16.21":{t:"pip",p:`
-Type: Boolean
-Default: false
-
-是否在底部控制栏里显示 画中画 的开关按钮
-<div c ...`,l:"start/option.html#pip",a:"pip"},"16.22":{t:"mutex",p:`
-Type: Boolean
-Default: true
-
-假如页面里同时存在多个播放器，是否只能让一个播放器播放
-< ...`,l:"start/option.html#mutex",a:"mutex"},"16.23":{t:"fullscreen",p:`
-Type: Boolean
-Default: false
-
-是否在底部控制栏里显示播放器 窗口全屏 按钮
-<div  ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"16.24":{t:"fullscreenweb",p:`
-Type: Boolean
-Default: false
-
-是否在底部控制栏里显示播放器 网页全屏 按钮
-<div  ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"16.25":{t:"subtitleoffset",p:`
-Type: Boolean
-Default: false
-
-字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"16.26":{t:"miniprogressbar",p:`
-Type: Boolean
-Default: false
-
-迷你进度条，只在播放器失去焦点后且正在播放时出现
-<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"16.27":{t:"usessr",p:`
-Type: Boolean
-Default: false
-
-是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"16.28":{t:"playsinline",p:`
-Type: Boolean
-Default: true
-
-在移动端是否使用 playsInline 模式
-<div  ...`,l:"start/option.html#playsinline",a:"playsinline"},"16.29":{t:"layers",p:`
-Type: Array
-Default: []
-
-初始化自定义的 层
-<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"16.30":{t:"settings",p:`
-Type: Array
-Default: []
-
-初始化自定义的 设置面板
-<div className=&quot ...`,l:"start/option.html#settings",a:"settings"},"16.31":{t:"contextmenu",p:`
-Type: Array
-Default: []
-
-初始化自定义的 右键菜单
-<div className=&quot ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"16.32":{t:"controls",p:`
-Type: Array
-Default: []
-
-初始化自定义的底部 控制栏
-<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"16.33":{t:"quality",p:`
-Type: Array
-Default: []
-
-是否在底部控制栏里显示 画质选择 列表
-
-
-
-属性
-类型
-描述
-
-
-
-
- ...`,l:"start/option.html#quality",a:"quality"},"16.34":{t:"highlight",p:`
-Type: Array
-Default: []
-
-在进度条上显示 高亮信息
-
-
-
-属性
-类型
-描述
-
-
-
-
-time
-Nu ...`,l:"start/option.html#highlight",a:"highlight"},"16.35":{t:"plugins",p:`
-Type: Array
-Default: []
-
-初始化自定义的 插件
-<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"16.36":{t:"whitelist",p:`
-Type: Array
-Default: []
-
-因为不同的移动设备存在多种差异和限制，有时候你希望在某些移动设备上不使用 ...`,l:"start/option.html#whitelist",a:"whitelist"},"16.37":{t:"thumbnails",p:`
-Type: Object
-Default: {}
-
-在进度条上设置 预览图
-
-
-
-属性
-类型
-描述
-
-
-
-
-url
-Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"16.38":{t:"subtitle",p:`
-Type: Object
-Default: {}
-
-设置视频的字幕，支持字幕格式：vtt, srt, ass
-
-
-
-属性
- ...`,l:"start/option.html#subtitle",a:"subtitle"},"16.39":{t:"morevideoattr",p:`
-Type: Object
-Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"16.40":{t:"icons",p:`
-Type: Object
-Default: {}
-
-用于替换默认图标，支持 Html 字符串和 HTMLElement
-& ...`,l:"start/option.html#icons",a:"icons"},"16.41":{t:"type",p:`
-Type: String
-Default: ''
-
-用于指明视频的格式，需要配合 customType 一起使用，默认视频 ...`,l:"start/option.html#type",a:"type"},"16.42":{t:"customtype",p:`
-Type: Object
-Default: {}
-
-通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处 ...`,l:"start/option.html#customtype",a:"customtype"},"16.43":{t:"lang",p:`
-Type: String
-Default: navigator.language.toLowerCase()
-
-默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"16.44":{t:"i18n",p:`
-Type: Object
-Default: {}
-
-自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并
-新增 ...`,l:"start/option.html#i18n",a:"i18n"},"16.45":{t:"lock",p:`
-Type: Boolean
-Default: false
-
-是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
-&lt ...`,l:"start/option.html#lock",a:"lock"},"16.46":{t:"fastforward",p:`
-Type: Boolean
-Default: false
-
-是否在移动端添加长按视频快进功能
-<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"16.47":{t:"autoplayback",p:`
-Type: Boolean
-Default: false
-
-是否使用自动 回放功能
-<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"16.48":{t:"autoorientation",p:`
-Type: Boolean
-Default: false
-
-是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
- ...`,l:"start/option.html#autoorientation",a:"autoorientation"},"16.49":{t:"airplay",p:`
-Type: Boolean
-Default: false
-
-是否显示 airplay 按钮，当前只有部分浏览器支持该功能
- ...`,l:"start/option.html#airplay",a:"airplay"},"17.0":{t:"设置面板",p:"需先打开设置面板，播放器默认自带四个设置项：flip, playbackRate, aspectRatio, subtitl ...",l:"start/setting.html",a:"设置面板"},"17.1":{t:"选择列表",p:`
-
-
-属性
-类型
-描述
-
-
-
-
-html
-String, Element
-元素的 DOM 元素
-
-
-icon
-String, ...`,l:"start/setting.html#选择列表",a:"选择列表"},"17.2":{t:"列表嵌套",p:"<div className="run-code">▶ Run Code</div&g ...",l:"start/setting.html#列表嵌套",a:"列表嵌套"},"17.3":{t:"切换按钮",p:`
-
-
-属性
-类型
-描述
-
-
-
-
-html
-String, Element
-元素的 DOM 元素
-
-
-icon
-String, ...`,l:"start/setting.html#切换按钮",a:"切换按钮"},"17.4":{t:"范围滑块",p:`
-
-
-属性
-类型
-描述
-
-
-
-
-html
-String, Element
-元素的 DOM 元素
-
-
-icon
-String, ...`,l:"start/setting.html#范围滑块",a:"范围滑块"}},a={previewLength:62,buttonLabel:"Search",placeholder:"Search docs"},n={INDEX_DATA:t,PREVIEW_LOOKUP:e,Options:a};export{n as default};

docs/document/assets/en_advanced_built-in.md.d2e09d26.js

@@ -0,0 +1,211 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"en/advanced/built-in.md","lastUpdated":1673692792000}'),o={name:"en/advanced/built-in.md"},e=s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-hidden="true">#</a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>，比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>播放器的选项</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如直接修改这个 <code>option</code> 对象，播放器不会马上做出响应</p></div><h2 id="whitelist" tabindex="-1"><code>whitelist</code> <a class="header-anchor" href="#whitelist" aria-hidden="true">#</a></h2><p>管理移动设备的白名单功能，只有一个属性 <code>state</code> 返回是否启用播放器功能</p>`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">whitelist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ua</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">iPhone</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">gi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">(ua)]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">whitelist</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">state)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>在上面这个例子中，当使用 <code>iPhone</code> 访问播放器时，<code>art.whitelist.state</code> 会返回 <code>false</code>，即使用原生的播放器，而不是 <code>Artplayer</code> 播放器</p></div><h2 id="template" tabindex="-1"><code>template</code> <a class="header-anchor" href="#template" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 元素</p>`,4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$video)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>为了方便区别 <code>DOM</code> 元素和普通对象，播放器里的所有 <code>DOM</code> 元素都是以 <code>$</code> 开头命名的</p><p>这是所有 <code>DOM</code> 元素的定义：<a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts" target="_blank" rel="noreferrer">artplayer/types/template.d.ts</a></p></div><h2 id="events" tabindex="-1"><code>events</code> <a class="header-anchor" href="#events" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 事件，实质上是代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件</p><ul><li><code>proxy</code> 方法用于代理 <code>DOM</code> 事件</li><li><code>hover</code> 方法用于代理自定义的 <code>hover</code> 事件</li><li><code>loadImg</code> 方法用于监听图片的 <code>load</code> 加载事件</li></ul>`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">hover</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mouseenter</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mouseleave</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadImg</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">img</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">loadImg</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">img</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏</p></div><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-hidden="true">#</a></h2><p>管理播放器的本地存储</p><ul><li><code>name</code> 属性用于设置缓存的 <code>key</code></li><li><code>set</code> 方法用于设置缓存</li><li><code>get</code> 方法用于获取缓存</li><li><code>del</code> 方法用于删除缓存</li><li><code>clear</code> 方法用于清空缓存</li></ul>`,5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> test </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(test)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">del</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>默认所有播放器实例都是共享同一个 <code>localStorage</code> 的，而且默认的 <code>key</code> 是 <code>artplayer_settings</code></p><p>如果你想不同的播放器使用不同的 <code>localStorage</code>，你可以修改 <code>art.storage.name</code> 即可</p></div>`,2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-storage-key</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>svg</code> 图标</p>`,3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">icons</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">这是所有图标的定义：</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-hidden="true">#</a></h2><p>管理播放器的 <code>i18n</code></p><ul><li><code>get</code> 方法用于获取 <code>i18n</code> 的值</li><li><code>update</code> 方法用于更新 <code>i18n</code> 对象</li></ul>`,5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">zh-cn</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>art.i18n.update</code> 只能更新实例化之后的 <code>i18n</code>，假如想在实例化之前更新 <code>i18n</code>，请使用基础选项的 <code>i18n</code> 来更新</p></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-hidden="true">#</a></h2><p>管理播放器的提示语，只有一个 <code>show</code> 属性用于显示提示语</p>`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Video Ready To Play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果想马上隐藏 <code>notice</code> 的显示：<code>art.notice.show = &#39;&#39;;</code></p></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>管理播放器的层</p><ul><li><code>add</code> 方法用于动态添加层</li><li><code>show</code> 属性用于设置是否显示全部层</li><li><code>toggle</code> 属性用于切换是否显示全部层</li></ul>`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址：</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-hidden="true">#</a></h2><p>管理播放器的控制器</p><ul><li><code>add</code> 方法用于动态添加控制器</li><li><code>show</code> 属性用于设置是否显示全部控制器</li><li><code>toggle</code> 属性用于切换是否显示全部控制器</li></ul>`,5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址：</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><p>管理播放器的右键菜单</p><ul><li><code>add</code> 方法用于动态添加菜单</li><li><code>show</code> 属性用于设置是否显示全部菜单</li><li><code>toggle</code> 属性用于切换是否显示全部菜单</li></ul>`,5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址：</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-hidden="true">#</a></h2><p>管理播放器的字幕功能</p><ul><li><code>url</code> 属性设置和返回当前字幕地址</li><li><code>style</code> 方法设置当前字幕的样式</li><li><code>switch</code> 方法设置当前字幕地址和选项</li></ul>`,5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">style</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="loading" tabindex="-1"><code>loading</code> <a class="header-anchor" href="#loading" aria-hidden="true">#</a></h2><p>管理播放器的加载层</p><ul><li><code>show</code> 属性用于设置是否显示加载层</li><li><code>toggle</code> 属性用于切换是否显示加载层</li></ul>`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>管理播放器的快捷键功能</p><ul><li><code>add</code> 方法用于添加快捷键</li><li><code>remove</code> 方法用于删除快捷键</li></ul>`,4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hotkeyEvent</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效</p></div><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-hidden="true">#</a></h2><p>管理播放器的遮罩层</p><ul><li><code>show</code> 属性用于设置是否显示遮罩层</li><li><code>toggle</code> 属性用于切换是否显示遮罩层</li></ul>`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-hidden="true">#</a></h2><p>管理播放器的设置面板</p><ul><li><code>add</code> 方法用于动态添加设置项</li><li><code>show</code> 属性用于设置是否显示全部设置项</li><li><code>toggle</code> 属性用于切换是否显示全部设置项</li><li><code>update</code> 方法动态更新设置项</li></ul>`,4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">playbackRate</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>设置面板</code> 请参考以下地址</p><p><a href="/document/start/setting.html">/start/setting.html</a></p></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-hidden="true">#</a></h2><p>管理播放器的插件功能，只有一个方法 <code>add</code> 用于动态添加插件</p>`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};

docs/document/assets/en_advanced_built-in.md.d2e09d26.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"en/advanced/built-in.md","lastUpdated":1673692792000}'),o={name:"en/advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s("",4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};

docs/document/assets/en_advanced_class.md.749356e7.js

@@ -0,0 +1,20 @@
+import{_ as s,c as n,o as l,a as e,b as a}from"./app.9e4cc5a4.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"en/advanced/class.md","lastUpdated":1673692792000}'),i={name:"en/advanced/class.md"},o=e('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-hidden="true">#Line truncated
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instances])</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="version" tabindex="-1"><code>version</code> <a class="header-anchor" href="#version" aria-hidden="true">#</a></h2><p>返回播放器的版本信息</p>`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),d=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">version)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="env" tabindex="-1"><code>env</code> <a class="header-anchor" href="#env" aria-hidden="true">#</a></h2><p>返回播放器的环境变量</p>`,3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="build" tabindex="-1"><code>build</code> <a class="header-anchor" href="#build" aria-hidden="true">#</a></h2><p>返回播放器的打包时间</p>`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),u=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">build)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="config" tabindex="-1"><code>config</code> <a class="header-anchor" href="#config" aria-hidden="true">#</a></h2><p>返回视频的默认配置</p>`,3),A=a("div",{className:"run-code"},"▶ Run Code",-1),m=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="utils" tabindex="-1"><code>utils</code> <a class="header-anchor" href="#utils" aria-hidden="true">#</a></h2><p>返回播放器的工具函数集合</p>`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),b=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">utils)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部工具函数请参考以下地址：</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts" target="_blank" rel="noreferrer">artplayer/types/utils.d.ts</a></p></div><h2 id="scheme" tabindex="-1"><code>scheme</code> <a class="header-anchor" href="#scheme" aria-hidden="true">#</a></h2><p>返回播放器选项的校验方案</p>`,4),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scheme)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="emitter" tabindex="-1"><code>Emitter</code> <a class="header-anchor" href="#emitter" aria-hidden="true">#</a></h2><p>返回事件分发器的构造函数</p>`,3),T=a("div",{className:"run-code"},"▶ Run Code",-1),v=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Emitter)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="validator" tabindex="-1"><code>validator</code> <a class="header-anchor" href="#validator" aria-hidden="true">#</a></h2><p>返回选项的校验函数</p>`,3),F=a("div",{className:"run-code"},"▶ Run Code",-1),g=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">validator)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="kindof" tabindex="-1"><code>kindOf</code> <a class="header-anchor" href="#kindof" aria-hidden="true">#</a></h2><p>返回类型检测的函数工具</p>`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),I=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">kindOf)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="html" tabindex="-1"><code>html</code> <a class="header-anchor" href="#html" aria-hidden="true">#</a></h2><p>返回播放器所需的 <code>html</code> 字符串</p>`,3),f=a("div",{className:"run-code"},"▶ Run Code",-1),k=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>返回播放器的默认选项</p>`,3),O=a("div",{className:"run-code"},"▶ Run Code",-1),S=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="debug" tabindex="-1"><code>DEBUG</code> <a class="header-anchor" href="#debug" aria-hidden="true">#</a></h2><h2 id="contextmenu" tabindex="-1"><code>CONTEXTMENU</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><h2 id="notice-time" tabindex="-1"><code>NOTICE_TIME</code> <a class="header-anchor" href="#notice-time" aria-hidden="true">#</a></h2><h2 id="setting-width" tabindex="-1"><code>SETTING_WIDTH</code> <a class="header-anchor" href="#setting-width" aria-hidden="true">#</a></h2><h2 id="setting-item-width" tabindex="-1"><code>SETTING_ITEM_WIDTH</code> <a class="header-anchor" href="#setting-item-width" aria-hidden="true">#</a></h2><h2 id="setting-item-height" tabindex="-1"><code>SETTING_ITEM_HEIGHT</code> <a class="header-anchor" href="#setting-item-height" aria-hidden="true">#</a></h2><h2 id="indicator-size" tabindex="-1"><code>INDICATOR_SIZE</code> <a class="header-anchor" href="#indicator-size" aria-hidden="true">#</a></h2><h2 id="indicator-size-icon" tabindex="-1"><code>INDICATOR_SIZE_ICON</code> <a class="header-anchor" href="#indicator-size-icon" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile" tabindex="-1"><code>INDICATOR_SIZE_MOBILE</code> <a class="header-anchor" href="#indicator-size-mobile" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile-icon" tabindex="-1"><code>INDICATOR_SIZE_MOBILE_ICON</code> <a class="header-anchor" href="#indicator-size-mobile-icon" aria-hidden="true">#</a></h2><h2 id="volume-panel-width" tabindex="-1"><code>VOLUME_PANEL_WIDTH</code> <a class="header-anchor" href="#volume-panel-width" aria-hidden="true">#</a></h2><h2 id="volume-handle-width" tabindex="-1"><code>VOLUME_HANDLE_WIDTH</code> <a class="header-anchor" href="#volume-handle-width" aria-hidden="true">#</a></h2><h2 id="resize-time" tabindex="-1"><code>RESIZE_TIME</code> <a class="header-anchor" href="#resize-time" aria-hidden="true">#</a></h2><h2 id="scroll-time" tabindex="-1"><code>SCROLL_TIME</code> <a class="header-anchor" href="#scroll-time" aria-hidden="true">#</a></h2><h2 id="scroll-gap" tabindex="-1"><code>SCROLL_GAP</code> <a class="header-anchor" href="#scroll-gap" aria-hidden="true">#</a></h2><h2 id="auto-playback-max" tabindex="-1"><code>AUTO_PLAYBACK_MAX</code> <a class="header-anchor" href="#auto-playback-max" aria-hidden="true">#</a></h2><h2 id="auto-playback-min" tabindex="-1"><code>AUTO_PLAYBACK_MIN</code> <a class="header-anchor" href="#auto-playback-min" aria-hidden="true">#</a></h2><h2 id="auto-playback-timeout" tabindex="-1"><code>AUTO_PLAYBACK_TIMEOUT</code> <a class="header-anchor" href="#auto-playback-timeout" aria-hidden="true">#</a></h2><h2 id="reconnect-time-max" tabindex="-1"><code>RECONNECT_TIME_MAX</code> <a class="header-anchor" href="#reconnect-time-max" aria-hidden="true">#</a></h2><h2 id="reconnect-sleep-time" tabindex="-1"><code>RECONNECT_SLEEP_TIME</code> <a class="header-anchor" href="#reconnect-sleep-time" aria-hidden="true">#</a></h2><h2 id="control-hide-time" tabindex="-1"><code>CONTROL_HIDE_TIME</code> <a class="header-anchor" href="#control-hide-time" aria-hidden="true">#</a></h2><h2 id="db-clice-time" tabindex="-1"><code>DB_CLICE_TIME</code> <a class="header-anchor" href="#db-clice-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE</code> <a class="header-anchor" href="#mobile-auto-playbackrate" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate-time" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE_TIME</code> <a class="header-anchor" href="#mobile-auto-playbackrate-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-orientation-time" tabindex="-1"><code>MOBILE_AUTO_ORIENTATION_TIME</code> <a class="header-anchor" href="#mobile-auto-orientation-time" aria-hidden="true">#</a></h2><h2 id="info-loop-time" tabindex="-1"><code>INFO_LOOP_TIME</code> <a class="header-anchor" href="#info-loop-time" aria-hidden="true">#</a></h2><h2 id="fast-forward-value" tabindex="-1"><code>FAST_FORWARD_VALUE</code> <a class="header-anchor" href="#fast-forward-value" aria-hidden="true">#</a></h2><h2 id="fast-forward-time" tabindex="-1"><code>FAST_FORWARD_TIME</code> <a class="header-anchor" href="#fast-forward-time" aria-hidden="true">#</a></h2><h2 id="touch-move-ratio" tabindex="-1"><code>TOUCH_MOVE_RATIO</code> <a class="header-anchor" href="#touch-move-ratio" aria-hidden="true">#</a></h2><h2 id="volume-step" tabindex="-1"><code>VOLUME_STEP</code> <a class="header-anchor" href="#volume-step" aria-hidden="true">#</a></h2><h2 id="seek-step" tabindex="-1"><code>SEEK_STEP</code> <a class="header-anchor" href="#seek-step" aria-hidden="true">#</a></h2><h2 id="progress-height" tabindex="-1"><code>PROGRESS_HEIGHT</code> <a class="header-anchor" href="#progress-height" aria-hidden="true">#</a></h2><h2 id="playback-rate" tabindex="-1Line truncated

docs/document/assets/en_advanced_class.md.749356e7.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as n,o as l,a as e,b as a}from"./app.9e4cc5a4.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"en/advanced/class.md","lastUpdated":1673692792000}'),i={name:"en/advanced/class.md"},o=e("",5),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=e("",3),c=a("div",{className:"run-code"},"▶ Run Code",Line truncated

docs/document/assets/en_advanced_event.md.03132fdc.js

@@ -0,0 +1,321 @@
+import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.9e4cc5a4.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"en/advanced/event.md","lastUpdated":1673692792000}'),o={name:"en/advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("coLine truncated
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>只监听一次事件：</p>`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>手动触发事件：</p>`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>移除事件：</p>`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),u=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onReady</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> onReady)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部事件请参考以下地址：</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts" target="_blank" rel="noreferrer">artplayer/types/events.d.ts</a></p></div><h2 id="ready" tabindex="-1"><code>ready</code> <a class="header-anchor" href="#ready" aria-hidden="true">#</a></h2><p>当播放器首次可以播放器时触发</p>`,4),b=s("div",{className:"run-code"},"▶ Run Code",-1),h=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="restart" tabindex="-1"><code>restart</code> <a class="header-anchor" href="#restart" aria-hidden="true">#</a></h2><p>当播放器切换地址后并可以播放时触发</p>`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><p>当播放器暂停时触发</p>`,3),v=s("div",{className:"run-code"},"▶ Run Code",-1),g=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><p>当播放器播放时触发</p>`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>当播放器热键被按下时触发</p>`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><p>当播放器销毁时触发</p>`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),w=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><p>当视频地址变化时触发</p>`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="focus" tabindex="-1"><code>focus</code> <a class="header-anchor" href="#focus" aria-hidden="true">#</a></h2><p>当播放器获得焦点时触发</p>`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),P=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="blur" tabindex="-1"><code>blur</code> <a class="header-anchor" href="#blur" aria-hidden="true">#</a></h2><p>当播放器失去焦点时触发</p>`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="dblclick" tabindex="-1"><code>dblclick</code> <a class="header-anchor" href="#dblclick" aria-hidden="true">#</a></h2><p>当播放器被双击时触发</p>`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="click" tabindex="-1"><code>click</code> <a class="header-anchor" href="#click" aria-hidden="true">#</a></h2><p>当播放器被单击时触发</p>`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="error" tabindex="-1"><code>error</code> <a class="header-anchor" href="#error" aria-hidden="true">#</a></h2><p>当播放器加载视频发生错误时触发</p>`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/404.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">reconnectTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reconnectTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="hover" tabindex="-1"><code>hover</code> <a class="header-anchor" href="#hover" aria-hidden="true">#</a></h2><p>当播放器被鼠标移出或者移入时触发</p>`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="mousemove" tabindex="-1"><code>mousemove</code> <a class="header-anchor" href="#mousemove" aria-hidden="true">#</a></h2><p>当播放器被鼠标经过时触发</p>`,3),B=s("div",{className:"run-code"},"▶ Run Code",-1),J=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="resize" tabindex="-1"><code>resize</code> <a class="header-anchor" href="#resize" aria-hidden="true">#</a></h2><p>当播放器尺寸变化时触发</p>`,3),q=s("div",{className:"run-code"},"▶ Run Code",-1),G=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="view" tabindex="-1"><code>view</code> <a class="header-anchor" href="#view" aria-hidden="true">#</a></h2><p>当播放器出现在视口时触发</p>`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><p>当播放器长宽比变化时触发</p>`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">aspectRatio</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><p>当播放器自动设置高度时触发</p>`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">height</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">height</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><p>当播放器自动设置尺寸时触发</p>`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),ns=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><p>当播放器发生翻转时触发</p>`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ls=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">flip</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><p>当播放器发生窗口全屏时触发</p>`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),es=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><p>当播放器发生网页全屏时触发</p>`,3),os=s("div",{className:"run-code"},"▶ Run Code",-1),rs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><p>当播放器进入迷你模式时触发</p>`,3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><p>当播放器进入画中画时触发</p>`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">pip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><p>当播放器被截图时触发</p>`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">dataUri</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dataUri</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><p>当播放器发生时间跳转时触发</p>`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">currentTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="subtitleoffset" tabindex="-1"><code>subtitleOffset</code> <a class="header-anchor" href="#subtitleoffset" aria-hidden="true">#</a></h2><p>当播放器发生字幕偏移时触发</p>`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),us=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">offset</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">offset</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="subtitleupdate" tabindex="-1"><code>subtitleUpdate</code> <a class="header-anchor" href="#subtitleupdate" aria-hidden="true">#</a></h2><p>当字幕更新时触发</p>`,3),bs=s("div",{className:"run-code"},"▶ Run Code",-1),hs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">text</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleload" tabindex="-1"><code>subtitleLoad</code> <a class="header-anchor" href="#subtitleload" aria-hidden="true">#</a></h2><p>当字幕加载时触发</p>`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleswitch" tabindex="-1"><code>subtitleSwitch</code> <a class="header-anchor" href="#subtitleswitch" aria-hidden="true">#</a></h2><p>当字幕切换时触发</p>`,3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),gs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.ass</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-hidden="true">#</a></h2><p>浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-hidden="true">#</a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-hidden="true">#</a></h2><p>OfflineAudioContext 渲染完成</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-hidden="true">#</a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-hidden="true">#</a></h2><p>媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它</p><h2 id="video-ended" tabindex="-1"><code>video:ended</code> <a class="header-anchor" href="#video-ended" aria-hidden="true">#</a></h2><p>视频停止播放，因为 media 已经到达结束点</p><h2 id="video-error" tabindex="-1"><code>video:error</code> <a class="header-anchor" href="#video-error" aria-hidden="true">#</a></h2><p>获取媒体数据时出错，或者资源类型不是受支持的媒体格式</p><h2 id="video-loadeddata" tabindex="-1"><code>video:loadeddata</code> <a class="header-anchor" href="#video-loadeddata" aria-hidden="true">#</a></h2><p>media 中的首帧已经完成加载</p><h2 id="video-loadedmetadata" tabindex="-1"><code>video:loadedmetadata</code> <a class="header-anchor" href="#video-loadedmetadata" aria-hidden="true">#</a></h2><p>已加载元数据</p><h2 id="video-pause" tabindex="-1"><code>video:pause</code> <a class="header-anchor" href="#video-pause" aria-hidden="true">#</a></h2><p>播放已暂停</p><h2 id="video-play" tabindex="-1"><code>video:play</code> <a class="header-anchor" href="#video-play" aria-hidden="true">#</a></h2><p>播放已开始</p><h2 id="video-playing" tabindex="-1"><code>video:playing</code> <a class="header-anchor" href="#video-playing" aria-hidden="true">#</a></h2><p>由于缺乏数据而暂停或延迟后，播放准备开始</p><h2 id="video-progress" tabindex="-1"><code>video:progress</code> <a class="header-anchor" href="#video-progress" aria-hidden="true">#</a></h2><p>在浏览器加载资源时周期性触发</p><h2 id="video-ratechange" tabindex="-1"><code>video:ratechange</code> <a class="header-anchor" href="#video-ratechange" aria-hidden="true">#</a></h2><p>播放速率发生变化</p><h2 id="video-seeked" tabindex="-1"><code>video:seeked</code> <a class="header-anchor" href="#video-seeked" aria-hidden="true">#</a></h2><p>跳帧（seek）操作完成</p><h2 id="video-seeking" tabindex="-1"><code>video:seeking</code> <a class="header-anchor" href="#video-seeking" aria-hidden="true">#</a></h2><p>跳帧（seek）操作开始</p><h2 id="video-stalled" tabindex="-1"><code>video:stalled</code> <a class="header-anchor" href="#video-stalled" aria-hidden="true">#</a></h2><p>用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现</p><h2 id="video-suspend" tabindex="-1"><code>video:suspend</code> <a class="header-anchor" href="#video-suspend" aria-hidden="true">#</a></h2><p>媒体数据加载已暂停</p><h2 id="video-timeupdate" tabindex="-1"><code>video:timeupdate</code> <a class="header-anchor" href="#video-timeupdate" aria-hidden="true">#</a></h2><p>currentTime 属性指定的时间发生变化</p><h2 id="video-volumechange" tabindex="-1"><code>video:volumechange</code> <a class="header-anchor" href="#video-volumechange" aria-hidden="true">#</a></h2><p>音量发生变化</p><h2 id="video-waiting" tabindex="-1"><code>video:waiting</code> <a class="header-anchor" href="#video-waiting" aria-hidden="true">#</a></h2><p>由于暂时缺少数据，播放已停止</p>`,43),Es=[r,c,t,D,y,F,i,A,C,d,u,b,h,m,_,v,g,E,T,f,k,S,w,R,N,V,P,j,I,x,z,O,U,H,W,L,$,B,J,q,G,Line truncated

docs/document/assets/en_advanced_event.md.03132fdc.lean.js

@@ -0,0 +1 @@
+import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.9e4cc5a4.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"en/advanced/event.md","lastUpdated":1673692792000}'),o={name:"en/advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("coLine truncated

docs/document/assets/en_advanced_plugin.md.05db8487.js

@@ -0,0 +1,102 @@
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","lastUpdated":1673692792000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [myPlugin]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>可以在实例化之后再加载插件的函数</p>`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(myPlugin)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>例如我想写一个在视频暂停后，显示一个图片广告的插件</p>`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">&lt;img style=&quot;width: 100px&quot; src=&quot;</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">&quot;&gt;</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                right</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">show</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">block</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">hide</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hide-ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                marginRight</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">show-ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">adsPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">hide</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div>`,1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};

docs/document/assets/en_advanced_plugin.md.05db8487.lean.js

@@ -0,0 +1 @@
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","lastUpdated":1673692792000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};

docs/document/assets/en_advanced_property.md.f81a5597.js

@@ -0,0 +1,394 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"en/advanced/property.md","lastUpdated":1673692792000}'),o={name:"en/advanced/property.md"},e=s('<h1 id="实例属性" tabindex="-1">实例属性 <a class="header-anchor" href="#实例属性" aria-hidden="true">#</a></h1><p>这里的 <code>实例属性</code> 是指挂载在 <code>实例</code> 的 <code>一级属性</code>，比较常用</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</p>',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>暂停视频</p>`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pause</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="toggle" tabindex="-1"><code>toggle</code> <a class="header-anchor" href="#toggle" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>切换视频的播放和暂停</p>`,4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>Boolean</code></li></ul><p>销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 <code>html</code>，默认为 <code>true</code></p>`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间跳转，单位秒</p>`,4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="forward" tabindex="-1"><code>forward</code> <a class="header-anchor" href="#forward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快进，单位秒</p>`,4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">forward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="backward" tabindex="-1"><code>backward</code> <a class="header-anchor" href="#backward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快退，单位秒</p>`,4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">backward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="volume" tabindex="-1"><code>volume</code> <a class="header-anchor" href="#volume" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频音量，范围在：<code>[0, 1]</code></p>`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频地址</p>`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="switchurl" tabindex="-1"><code>switchUrl</code> <a class="header-anchor" href="#switchurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频地址，设置时和 <code>url</code> 类似，但会执行一些优化操作</p><p>函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字</p>`,5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchUrl</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">新视频名字</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="switchquality" tabindex="-1"><code>switchQuality</code> <a class="header-anchor" href="#switchquality" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频画质地址，和 <code>switchUrl</code> 类似，但会带上之前的播放进度</p><p>函数支持两个参数，第一个为新的视频地址，第二个为可选新的视频名字</p>`,5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchQuality</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">新视频地址</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="muted" tabindex="-1"><code>muted</code> <a class="header-anchor" href="#muted" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取视频是否静音</p>`,4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="currenttime" tabindex="-1"><code>currentTime</code> <a class="header-anchor" href="#currenttime" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频当前时间，设置时间时和 <code>seek</code> 类似，但它不会触发额外的事件</p>`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="duration" tabindex="-1"><code>duration</code> <a class="header-anchor" href="#duration" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取视频时长</p>`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 <code>0</code></p></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>下载当前视频帧的截图</p>`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">screenshot</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="getdataurl" tabindex="-1"><code>getDataURL</code> <a class="header-anchor" href="#getdataurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>base64</code>地址，返回的是一个 <code>Promise</code></p>`,4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getDataURL</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="getbloburl" tabindex="-1"><code>getBlobUrl</code> <a class="header-anchor" href="#getbloburl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>blob</code>地址，返回的是一个 <code>Promise</code></p>`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getBlobUrl</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器窗口全屏</p>`,4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">全屏开关</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）</p></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器网页全屏</p>`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器画中画模式</p>`,4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">PIP</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）</p></div><h2 id="poster" tabindex="-1"><code>poster</code> <a class="header-anchor" href="#poster" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频海报，只有在视频播放前才能看到海报效果</p>`,5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">poster</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/poster.jpg?t=0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器迷你模式</p>`,4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="playing" tabindex="-1"><code>playing</code> <a class="header-anchor" href="#playing" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>获取视频是否正在播放中</p>`,4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playing</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置视频是否自适应尺寸，设置为 <code>true</code> 之后它会只执行一次</p>`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="rect" tabindex="-1"><code>rect</code> <a class="header-anchor" href="#rect" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取播放器的尺寸和坐标信息</p>`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rect</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>尺寸和坐标信息是通过 <code>getBoundingClientRect</code> 获取的</p></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器翻转，支持<code>normal</code>, <code>horizontal</code>, <code>vertical</code></p>`,5),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">horizontal</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="playbackrate" tabindex="-1"><code>playbackRate</code> <a class="header-anchor" href="#playbackrate" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取播放器播放速度</p>`,4),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器长宽比</p>`,4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">16:9</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="loop" tabindex="-1"><code>loop</code> <a class="header-anchor" href="#loop" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Array</code></li></ul><p>设置和获取区间循序播放，单位秒</p>`,4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>删除区间循环播放，只需要设置 <code>loop</code> 为 <code>[]</code> 即可</p><p><code>art.loop</code> 与 <code>art.option.loop</code> 是两个不同的东西，请勿弄乱</p></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>当容器只有宽度，该属性可以自动计算出并设置视频的高度，设置为 <code>true</code> 之后它会只执行一次</p>`,5),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机</p></div><h2 id="attr" tabindex="-1"><code>attr</code> <a class="header-anchor" href="#attr" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置 video 元素的属性</p>`,5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="title" tabindex="-1"><code>title</code> <a class="header-anchor" href="#title" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器标题</p>`,4),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">新标题</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="type" tabindex="-1"><code>type</code> <a class="header-anchor" href="#type" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置视频类型</p>`,4),us=n("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器主题颜色</p>`,4),hs=n("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#000</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="airplay" tabindex="-1"><code>airplay</code> <a class="header-anchor" href="#airplay" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>开启隔空播放</p>`,4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">AirPlay</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">airplay</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="loaded" tabindex="-1"><code>loaded</code> <a class="header-anchor" href="#loaded" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频缓存的比例，范围是 <code>[0, 1]</code>，常配合 <code>video:timeupdate</code> 事件使用</p>`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loaded</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="played" tabindex="-1"><code>played</code> <a class="header-anchor" href="#played" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频播放的比例，范围是 <code>[0, 1]</code>，常配合 <code>video:timeupdate</code> 事件使用</p>`,4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">played</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="proxy" tabindex="-1"><code>proxy</code> <a class="header-anchor" href="#proxy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 事件的代理函数，实质上代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用 <code>proxy</code> 来处理事件，播放器销毁时也会自动销毁该事件</p>`,4),ks=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏</p></div><h2 id="query" tabindex="-1"><code>query</code> <a class="header-anchor" href="#query" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 的查询函数，类似 <code>document.querySelector</code>，但被查询的对象局限于当前播放器内，可以避免同类名的错误</p>`,5),ws=n("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">query</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.art-video</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="video" tabindex="-1"><code>video</code> <a class="header-anchor" href="#video" aria-hidden="true">#</a></h2><ul><li>Type: <code>Element</code></li></ul><p>快捷返回播放器的 <code>video</code> 元素</p>`,4),Rs=n("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">video)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div>`,1),Is=[e,r,c,t,D,y,F,i,A,C,d,u,b,h,m,_,g,v,T,E,S,k,f,w,P,R,N,I,V,j,x,G,B,q,z,U,L,O,W,H,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,us,bs,hs,ms,_s,gs,vs,Ts,Es,Ss,ks,fs,ws,Ps,Rs,Ns];function Vs(js,xs,Gs,Bs,qs,zs){return p(),l("div",null,Is)}const Os=a(o,[["render",Vs]]);export{Ls as __pageData,Os as default};

docs/document/assets/en_advanced_property.md.f81a5597.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"en/advanced/property.md","lastUpdated":1673692792000}'),o={name:"en/advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",5),ls=n("div",{className:"run-codLine truncated

docs/document/assets/en_index.md.17d62a2a.js

@@ -1 +0,0 @@
-import{_ as t,c as a,o as n,b as e,d as s}from"./app.c821c423.js";const x=JSON.parse('{"title":"WIP...","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","lastUpdated":1673441101000}'),r={name:"en/index.md"},d=e("h1",{id:"wip",tabindex:"-1"},[s("WIP... "),e("a",{class:"header-anchor",href:"#wip","aria-hidden":"true"},"#")],-1),o=[d];function c(i,_,p,h,l,f){return n(),a("div",null,o)}const u=t(r,[["render",c]]);export{x as __pageData,u as default};

docs/document/assets/en_index.md.17d62a2a.lean.js

@@ -1 +0,0 @@
-import{_ as t,c as a,o as n,b as e,d as s}from"./app.c821c423.js";const x=JSON.parse('{"title":"WIP...","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","lastUpdated":1673441101000}'),r={name:"en/index.md"},d=e("h1",{id:"wip",tabindex:"-1"},[s("WIP... "),e("a",{class:"header-anchor",href:"#wip","aria-hidden":"true"},"#")],-1),o=[d];function c(i,_,p,h,l,f){return n(),a("div",null,o)}const u=t(r,[["render",c]]);export{x as __pageData,u as default};

docs/document/assets/en_index.md.7d8df1fe.js

@@ -0,0 +1,161 @@
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const C=JSON.parse('{"title":"Install","description":"","frontmatter":{},"headers":[{"level":2,"title":"Install","slug":"install-1","link":"#install-1","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"Use","slug":"use","link":"#use","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"Syntax hint","slug":"syntax-hint","link":"#syntax-hint","children":[]}],"relativePath":"en/index.md","lastUpdated":1673692792000}'),p={name:"en/index.md"},e=l(`<h1 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-hidden="true">#</a></h1><h2 id="install-1" tabindex="-1">Install <a class="header-anchor" href="#install-1" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-3bWAK" id="tab-4jJRPmg" checked="checked"><label for="tab-4jJRPmg">npm</label><input type="radio" name="group-3bWAK" id="tab-qFqR39I"><label for="tab-qFqR39I">yarn</label><input type="radio" name="group-3bWAK" id="tab-lNeb7Av"><label for="tab-lNeb7Av">pnpm</label><input type="radio" name="group-3bWAK" id="tab-_VRv8r8"><label for="tab-_VRv8r8">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5Z7ZN" id="tab-TcSaurW" checked="checked"><label for="tab-TcSaurW">jsdelivr.net</label><input type="radio" name="group-5Z7ZN" id="tab-K4RE5jz"><label for="tab-K4RE5jz">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer/dist/artplayer.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="use" tabindex="-1">Use <a class="header-anchor" href="#use" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-q5a2X" id="tab-22Xnq5v" checked="checked"><label for="tab-22Xnq5v">index.js</label><input type="radio" name="group-q5a2X" id="tab-xwTPkA9"><label for="tab-xwTPkA9">index.html</label></div><div class="blocks"><div class="language-js active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer Demo</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">artplayer-app</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">400px</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300px</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artplayer-app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>The size of the player depends on the size of the <code>container</code>, so your <code>container</code> must have a size</p></div><div class="tip custom-block"><p class="custom-block-title">The following links can see more use examples</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template" target="_blank" rel="noreferrer">/packages/artplayer-template</a></p></div><h2 id="vue-js" tabindex="-1"><code>Vue.js</code> <a class="header-anchor" href="#vue-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-lagRo" id="tab-jLnkakg" checked="checked"><label for="tab-jLnkakg">Artplayer.vue</label><input type="radio" name="group-lagRo" id="tab-SCWwLVQ"><label for="tab-SCWwLVQ">app.vue</label></div><div class="blocks"><div class="language-vue active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artRef</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      instance</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">props</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">option</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#F07178;">required</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">mounted</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">...this.</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">      container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$refs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$nextTick</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$emit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">get-instance</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">beforeUnmount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">destroy</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">Artplayer</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@get-instance</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">getInstance</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:option</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">option</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">style</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./Artplayer.vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      option</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">      style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        width</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">600px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        height</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        margin</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">60px auto 0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    Artplayer</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">getInstance</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>Modifying <code>option</code> directly in <code>Vue.js</code> will not change the player</p></div><h2 id="react-js" tabindex="-1"><code>React.js</code> <a class="header-anchor" href="#react-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-f9FUv" id="tab-o18Zrv_" checked="checked"><label for="tab-o18Zrv_">Artplayer.jsx</label><input type="radio" name="group-f9FUv" id="tab--5gB3vW"><label for="tab--5gB3vW">app.jsx</label></div><div class="blocks"><div class="language-jsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Player</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">getInstance</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;font-style:italic;">rest</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">artRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRef</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">useEffect</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">            container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">current</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">getInstance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">getInstance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">getInstance</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">destroy</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> [])</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">} {...</span><span style="color:#A6ACCD;">rest</span><span style="color:#89DDFF;">}&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./ArtPlayer.jsx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Artplayer</span></span>
+<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#C792EA;">option</span><span style="color:#89DDFF;">={{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://artplayer.org/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">}}</span></span>
+<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">={{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">600px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">60px auto 0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">}}</span></span>
+<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#C792EA;">getInstance</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art)</span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">            /&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#F07178;">    )</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> App</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>Modifying <code>option</code> directly in <code>React.js</code> will not change the player</p></div><h2 id="syntax-hint" tabindex="-1">Syntax hint <a class="header-anchor" href="#syntax-hint" aria-hidden="true">#</a></h2><p>Sometimes your <code>js</code> file will lose the type prompt of <code>TypeScript</code>. At this time, you can manually import the type</p><p>Variable:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import(&quot;artplayer&quot;)</span><span style="color:#89DDFF;font-style:italic;">}</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
+<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Parameters:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import(&quot;artplayer&quot;)</span><span style="color:#89DDFF;font-style:italic;">}</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
+<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getInstance</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>Properties:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#676E95;font-style:italic;">/**</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">       * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import(&quot;artplayer&quot;)</span><span style="color:#89DDFF;font-style:italic;">}</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">       */</span></span>
+<span class="line"><span style="color:#F07178;">      art</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,23),o=[e];function t(r,c,y,F,i,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};

docs/document/assets/en_index.md.7d8df1fe.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const C=JSON.parse('{"title":"Install","description":"","frontmatter":{},"headers":[{"level":2,"title":"Install","slug":"install-1","link":"#install-1","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"Use","slug":"use","link":"#use","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"Syntax hint","slug":"syntax-hint","link":"#syntax-hint","children":[]}],"relativePath":"en/index.md","lastUpdated":1673692792000}'),p={name:"en/index.md"},e=l("",23),o=[e];function t(r,c,y,F,i,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};

docs/document/assets/en_library_dash.md.b9a37b53.js

@@ -0,0 +1,27 @@
+import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","lastUpdated":1673692792000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playMpd</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">supportsMediaSource</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MediaPlayer</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initialize</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoplay</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Unsupported playback format: mpd</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mpd</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">mpd</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playMpd</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div>`,1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/en_library_dash.md.b9a37b53.lean.js

@@ -0,0 +1 @@
+import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","lastUpdated":1673692792000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/en_library_flv.md.328c7eb7.js

@@ -0,0 +1,28 @@
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","lastUpdated":1673692792000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playFlv</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createPlayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">flv</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachMediaElement</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">load</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Unsupported playback format: flv</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.flv</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">flv</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">flv</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playFlv</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div>`,1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};

docs/document/assets/en_library_flv.md.328c7eb7.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","lastUpdated":1673692792000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};

docs/document/assets/en_library_hls.md.3767fae9.js

@@ -0,0 +1,30 @@
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","lastUpdated":1673692792000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playM3u8</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">Hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Hls</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadSource</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachMedia</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">canPlayType</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">application/vnd.apple.mpegurl</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Unsupported playback format: m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">m3u8</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playM3u8</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div>`,1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/en_library_hls.md.3767fae9.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","lastUpdated":1673692792000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/en_plugin_ads.md.664aa7ae.js

@@ -0,0 +1,55 @@
+import{_ as a,c as n,o as l,a as s,b as p}from"./app.9e4cc5a4.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"en/plugin/ads.md","lastUpdated":1673692792000}'),e={name:"en/plugin/ads.md"},o=s(`<h1 id="视频广告" tabindex="-1">视频广告 <a class="header-anchor" href="#视频广告" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&amp;example=ads" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Y5wJQ" id="tab-d5_ZWhB" checked="checked"><label for="tab-d5_ZWhB">npm</label><input type="radio" name="group-Y5wJQ" id="tab-j8f8kmi"><label for="tab-j8f8kmi">yarn</label><input type="radio" name="group-Y5wJQ" id="tab-Tc3JKiS"><label for="tab-Tc3JKiS">pnpm</label><input type="radio" name="group-Y5wJQ" id="tab-3mCdquk"><label for="tab-3mCdquk">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-ads.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-zvBQZ" id="tab-M3B9P8T" checked="checked"><label for="tab-M3B9P8T">jsdelivr.net</label><input type="radio" name="group-zvBQZ" id="tab-_yndPRI"><label for="tab-_yndPRI">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">artplayerPluginAds</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// html广告，假如是视频广告则忽略该值</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;img src=&quot;/assets/sample/poster.jpg&quot;&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 视频广告的地址</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/test1.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 广告跳转网址，为空则不跳转</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">http://artplayer.org</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 必须观看的时长，期间不能被跳过，单位为秒</span></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 当该值大于或等于totalDuration时，不能提前关闭广告</span></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 当该值等于或小于0时，则随时都可以关闭广告</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">playDuration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 广告总时长，单位为秒</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">totalDuration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 视频广告是否默认静音</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 多语言支持</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">close</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">关闭广告</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">countdown</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">%s秒</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">detail</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">查看详情</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">canBeClosed</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">%s秒后可关闭广告</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// ad is clicked</span></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayerPluginAds:click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ads</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">ads</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// Ad skipped</span></span>
+<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayerPluginAds:skip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ads</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">ads</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div>`,1),t=[o,r,c];function i(y,D,F,d,C,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};

docs/document/assets/en_plugin_ads.md.664aa7ae.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as n,o as l,a as s,b as p}from"./app.9e4cc5a4.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"en/plugin/ads.md","lastUpdated":1673692792000}'),e={name:"en/plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s("",1),t=[o,r,c];function i(y,D,F,d,C,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};

docs/document/assets/en_plugin_control-ui.md.d912bbeb.js

@@ -0,0 +1,35 @@
+import{_ as n,c as l,o as p,a as s,b as a}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"en/plugin/control-ui.md","lastUpdated":1673692792000}'),e={name:"en/plugin/control-ui.md"},o=s(`<h1 id="控制器皮肤" tabindex="-1">控制器皮肤 <a class="header-anchor" href="#控制器皮肤" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&amp;example=control" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Ku1Ie" id="tab-p2JQqZf" checked="checked"><label for="tab-p2JQqZf">npm</label><input type="radio" name="group-Ku1Ie" id="tab-gx97wq2"><label for="tab-gx97wq2">yarn</label><input type="radio" name="group-Ku1Ie" id="tab--XaaQFe"><label for="tab--XaaQFe">pnpm</label><input type="radio" name="group-Ku1Ie" id="tab--fpLXWb"><label for="tab--fpLXWb">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-control.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-J15GA" id="tab-Fw0UR_h" checked="checked"><label for="tab-Fw0UR_h">jsdelivr.net</label><input type="radio" name="group-J15GA" id="tab-Vafmw1Z"><label for="tab-Vafmw1Z">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">artplayerPluginControl</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="enable" tabindex="-1"><code>enable</code> <a class="header-anchor" href="#enable" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter/Setter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>是否启用新的控制器皮肤</p>`,4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;button type=&quot;button&quot;&gt;Switch UI&lt;/button&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enable</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginControl</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginControl</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">enable</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">enable</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">artplayerPluginControl</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};

docs/document/assets/en_plugin_control-ui.md.d912bbeb.lean.js

@@ -0,0 +1 @@
+import{_ as n,c as l,o as p,a as s,b as a}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"en/plugin/control-ui.md","lastUpdated":1673692792000}'),e={name:"en/plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};

docs/document/assets/en_plugin_hls-quality.md.f2e77a76.js

@@ -0,0 +1,7 @@
+import{_ as a,c as s,o as l,a as e}from"./app.9e4cc5a4.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"en/plugin/hls-quality.md","lastUpdated":1673692792000}'),n={name:"en/plugin/hls-quality.md"},p=e(`<h1 id="hls-画质" tabindex="-1">HLS 画质 <a class="header-anchor" href="#hls-画质" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&amp;example=hls.quality" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5rW3_" id="tab-GEV465H" checked="checked"><label for="tab-GEV465H">npm</label><input type="radio" name="group-5rW3_" id="tab-A6Yjufx"><label for="tab-A6Yjufx">yarn</label><input type="radio" name="group-5rW3_" id="tab-SSpMJ9I"><label for="tab-SSpMJ9I">pnpm</label><input type="radio" name="group-5rW3_" id="tab-Im1avES"><label for="tab-Im1avES">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-hls-quality.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-noRuV" id="tab-mX_CJVY" checked="checked"><label for="tab-mX_CJVY">jsdelivr.net</label><input type="radio" name="group-noRuV" id="tab-YcgBAUN"><label for="tab-YcgBAUN">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div>`,7),t=[p];function i(r,o,c,d,u,h){return l(),s("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default};

docs/document/assets/en_plugin_hls-quality.md.f2e77a76.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as s,o as l,a as e}from"./app.9e4cc5a4.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"en/plugin/hls-quality.md","lastUpdated":1673692792000}'),n={name:"en/plugin/hls-quality.md"},p=e("",7),t=[p];function i(r,o,c,d,u,h){return l(),s("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default};

docs/document/assets/en_plugin_iframe.md.b6decbc6.js

@@ -0,0 +1,184 @@
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"en/plugin/iframe.md","lastUpdated":1673692792000}'),p={name:"en/plugin/iframe.md"},e=l(`<h1 id="iframe-控制" tabindex="-1">Iframe 控制 <a class="header-anchor" href="#iframe-控制" aria-hidden="true">#</a></h1><h2 id="说明" tabindex="-1">说明 <a class="header-anchor" href="#说明" aria-hidden="true">#</a></h2><p>通过该插件，你可以轻松在 <code>index.html</code> 里控制跨域 <code>iframe.html</code> 页面里的播放器，如在 <code>index.html</code> 里通过代码控制 <code>iframe.html</code> 播放器的功能，或者获取 <code>iframe.html</code> 播放器的值</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&amp;example=iframe" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-a-huR" id="tab-mtiOARL" checked="checked"><label for="tab-mtiOARL">npm</label><input type="radio" name="group-a-huR" id="tab-JG9XiDI"><label for="tab-JG9XiDI">yarn</label><input type="radio" name="group-a-huR" id="tab-3ntg8pl"><label for="tab-3ntg8pl">pnpm</label><input type="radio" name="group-a-huR" id="tab-qoUAQKX"><label for="tab-qoUAQKX">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-QnHZi" id="tab-yXfTh7v" checked="checked"><label for="tab-yXfTh7v">jsdelivr.net</label><input type="radio" name="group-QnHZi" id="tab-_ui7T1E"><label for="tab-_ui7T1E">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-YCM93" id="tab-FNpzjTs" checked="checked"><label for="tab-FNpzjTs">index.html</label><input type="radio" name="group-YCM93" id="tab-d4W2l7e"><label for="tab-d4W2l7e">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iframe</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iframe </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ArtplayerPluginIframe</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// Iframe element</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#iframe</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// Iframe url</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/iframe.html</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// Send message to iframe</span></span>
+<span class="line"><span style="color:#A6ACCD;">            iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                    container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                    url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">html</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">body</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artplayer-app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width: 100%; height: 100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// Inject scripts to receive messages from instances</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ArtplayerPluginIframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">inject</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div></div><h2 id="index-html-接口" tabindex="-1"><code>index.html</code> 接口 <a class="header-anchor" href="#index-html-接口" aria-hidden="true">#</a></h2><h3 id="commit" tabindex="-1"><code>commit</code> <a class="header-anchor" href="#commit" aria-hidden="true">#</a></h3><p>从 <code>index.html</code> 将消息推送到 <code>iframe.html</code>，该函数将在 <code>iframe.html</code> 内部运行，同时它也能用于异步获取 <code>iframe.html</code> 里的值</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// Get the value from the iframe.html</span></span>
+<span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// Use the return keyword</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// or use the resolve method</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentTime2</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="message" tabindex="-1"><code>message</code> <a class="header-anchor" href="#message" aria-hidden="true">#</a></h3><p>在 <code>index.html</code> 接收来自 <code>iframe.html</code> 的消息</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">message</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h3><p>销毁后 <code>index.html</code> 无法与 <code>iframe.html</code> 通信</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="iframe-html-接口" tabindex="-1"><code>iframe.html</code> 接口 <a class="header-anchor" href="#iframe-html-接口" aria-hidden="true">#</a></h2><div class="warning custom-block"><p class="custom-block-title">提示</p><p><code>iframe.html</code> 接口 只能运行在 <code>iframe.html</code> 里</p></div><h3 id="inject" tabindex="-1"><code>inject</code> <a class="header-anchor" href="#inject" aria-hidden="true">#</a></h3><p>注入脚本，接收来自 <code>index.html</code> 的消息</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">ArtplayerPluginIframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">inject</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="postmessage" tabindex="-1"><code>postMessage</code> <a class="header-anchor" href="#postmessage" aria-hidden="true">#</a></h3><p>将消息推送到 <code>index.html</code></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">message</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">ArtplayerPluginIframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">postMessage</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">currentTime</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="例子" tabindex="-1">例子 <a class="header-anchor" href="#例子" aria-hidden="true">#</a></h2><p>最常遇到的问题是，播放器在 <code>iframe.html</code> 里进行网页全屏，但在 <code>index.html</code> 是不生效的，这时候只要监听 <code>iframe.html</code> 里的 <code>fullscreenWeb</code> 事件并通知到 <code>index.html</code> 即可</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-kQANe" id="tab-U8lWHlm" checked="checked"><label for="tab-U8lWHlm">index.html</label><input type="radio" name="group-kQANe" id="tab-59-aic2"><label for="tab-59-aic2">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iframe</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">fullscreenWeb</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">9999</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">bottom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iframe </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ArtplayerPluginIframe</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">iframe</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#iframe</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/iframe.html</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">            iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">message</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">type</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">switch</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                            </span><span style="color:#A6ACCD;">$iframe</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">classList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                            </span><span style="color:#A6ACCD;">$iframe</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">classList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">:</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">            iframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                    container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                    url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">ArtplayerPluginIframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">postMessage</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                        type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                        data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">html</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">body</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artplayer-app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width: 100%; height: 100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">        &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ArtplayerPluginIframe</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">inject</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div></div></div>`,32),o=[e];function r(t,c,F,D,y,i){return a(),n("div",null,o)}const b=s(p,[["render",r]]);export{A as __pageData,b as default};

docs/document/assets/en_plugin_iframe.md.b6decbc6.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"en/plugin/iframe.md","lastUpdated":1673692792000}'),p={name:"en/plugin/iframe.md"},e=l("",32),o=[e];function r(t,c,F,D,y,i){return a(),n("div",null,o)}const b=s(p,[["render",r]]);export{A as __pageData,b as default};

docs/document/assets/en_start_component.md.4d3c9392.js

@@ -0,0 +1,147 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"en/start/component.md","lastUpdated":1673692792000}'),o={name:"en/start/component.md"},e=s('<h1 id="组件配置" tabindex="-1">组件配置 <a class="header-anchor" href="#组件配置" aria-hidden="true">#</a></h1><p>这里所说的组件配置主要是指：<code>layers</code> , <code>controls</code> , <code>contextmenu</code> 这三个共用的配置:</p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>disable</code></td><td><code>Boolean</code></td><td>是否禁用组件</td></tr><tr><td><code>name</code></td><td><code>String</code></td><td>组件唯一名称，用于标记类名</td></tr><tr><td><code>index</code></td><td><code>Number</code></td><td>组件索引，用于显示的优先级</td></tr><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>组件的 DOM 元素</td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>组件样式对象</td></tr><tr><td><code>click</code></td><td><code>Function</code></td><td>组件点击事件</td></tr><tr><td><code>mounted</code></td><td><code>Function</code></td><td>组件挂载后触发</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>组件的提示文本</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">提示</p><ul><li>当前组件只能添加，并没有销毁的功能</li><li>通过 <code>name</code> 选项可以快速获取组件的 <code>DOM</code> 元素</li><li>通过 <code>index</code> 选项可以控制组件出现的顺序</li></ul></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>实例化时添加一个层，例如可以添加 <code>logo</code> 或者 <code>广告</code> 等等</p>',6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> img </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">layers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">potser</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">&lt;img style=&quot;width: 100px&quot; src=&quot;</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">img</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">&quot;&gt;</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Potser Tip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">50px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">50px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mounted</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">potser)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>也可以实例化之后添加一个层</p>`,2),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> img </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">potser</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">&lt;img style=&quot;width: 100px&quot; src=&quot;</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">img</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">&quot;&gt;</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Potser Tip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">50px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">50px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mounted</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">potser)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-hidden="true">#</a></h2><p>实例化时添加一个控制器</p><div class="warning custom-block"><p class="custom-block-title">controls 还有三个额外的选项</p><ul><li><code>position</code>: <code>left</code> 和 <code>right</code> 控制控制器出现的左右位置</li><li><code>selector</code>: 快速创建选择列表的对象数组</li><li><code>onSelect</code>: 选择列表的元素被点击时触发的函数</li></ul></div>`,4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mounted</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">subtitle</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Subtitle</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">default</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;span style=&quot;color:red&quot;&gt;subtitle 01&lt;/span&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;span style=&quot;color:yellow&quot;&gt;subtitle 02&lt;/span&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><p>也可以实例化之后添加一个控制器</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">button1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mounted</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">button1)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><p>实例化时添加一个右键菜单</p>`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">contextmenu</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>也可以实例化之后添加一个右键菜单</p>`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div>`,1),b=[e,c,r,t,D,F,y,i,A,C,d];function h(u,m,g,_,E,f){return p(),l("div",null,b)}const x=a(o,[["render",h]]);export{T as __pageData,x as default};

docs/document/assets/en_start_component.md.4d3c9392.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"en/start/component.md","lastUpdated":1673692792000}'),o={name:"en/start/component.md"},e=s("",6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",1),b=[e,c,r,t,D,F,y,i,A,C,d];function h(u,m,g,_,E,f){return p(),l("div",null,b)}const x=a(o,[["render",h]]);export{T as __pageData,x as default};

docs/document/assets/en_start_option.md.a841fbfc.js

@@ -0,0 +1,435 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Dn=JSON.parse('{"title":"Option","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"en/start/option.md","lastUpdated":1673692792000}'),e={name:"en/start/option.md"},o=s('<h1 id="option" tabindex="-1">Option <a class="header-anchor" href="#option" aria-hidden="true">#</a></h1><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-hidden="true">#</a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>The <code>DOM</code> container attached to the player</p>',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;"
Line truncated
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// container: document.querySelector(&#39;.artplayer-app&#39;),</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>You may need to initialize the size of container elements, such as:</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">artplayer-app</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">400px</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300px</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>Of all options, only <code>container</code> is required</p></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>Video source address</p>`,7),c=n("div",{className:"run-code"},"▶ Run Code",-1),i=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Sometimes the <code>url</code> address is not known so quickly. At this time, you can set the <code>url</code> asynchronously</p>`,2),D=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#82AAFF;">setTimeout</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>Three video file formats are supported by default: <code>.mp4</code>, <code>.ogg</code>, and <code>.webm</code></p><p>If you need to play <code>.m3u8</code> or <code>.flv</code> or other formats, please refer to the <code>Libraries</code> on the left</p></div><h2 id="id" tabindex="-1"><code>id</code> <a class="header-anchor" href="#id" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>The unique identifier of the player, currently only used for <code>autoplayback</code></p>`,5),F=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-url-id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="onready" tabindex="-1"><code>onReady</code> <a class="header-anchor" href="#onready" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Default: <code>undefined</code></li></ul><p>The constructor accepts a function as the second parameter, which is triggered when the player is initialized successfully and the video can be played, just like the <code>ready</code> event</p>`,4),d=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">onReady</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>Equivalent to:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>The <code>this</code> in the callback function is the player instance, but if the callback function uses the arrow function, the <code>this</code> will not point to the player instance</p></div><h2 id="poster" tabindex="-1"><code>poster</code> <a class="header-anchor" href="#poster" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>Video posters will only appear when the player is initialized and not played</p>`,7),h=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">poster</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="title" tabindex="-1"><code>title</code> <a class="header-anchor" href="#title" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>Video title, which currently appears in <code>video screenshot</code> and <code>mini mode</code></p>`,4),b=n("div",{className:"run-code"},"▶ Run Code",-1),m=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-video-title</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>#f00</code></li></ul><p>The player theme color is currently used on the <code>progress bar</code> and <code>highlighted element</code></p>`,4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#ffad00</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="volume" tabindex="-1"><code>volume</code> <a class="header-anchor" href="#volume" aria-hidden="true">#</a></h2><ul><li>Type: <code>Number</code></li><li>Default: <code>0.7</code></li></ul><p>Default volume of player</p>`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">volume</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>The player will cache the size of the last volume, and the player will read the cache value at the next initialization (such as refreshing the page)</p></div><h2 id="islive" tabindex="-1"><code>isLive</code> <a class="header-anchor" href="#islive" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>When using live mode, the progress bar and playback time will be hidden</p>`,5),f=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">isLive</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="muted" tabindex="-1"><code>muted</code> <a class="header-anchor" href="#muted" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to mute by default</p>`,4),S=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="autoplay" tabindex="-1"><code>autoplay</code> <a class="header-anchor" href="#autoplay" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to play automatically</p>`,4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoplay</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>If you want to enter the page by default to automatically play the video, <code>muted</code> must be <code>true</code>. For more information, please read <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" target="_blank" rel="noreferrer">Autoplay Policy Changes</a></p></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>The size of the player will fill the entire <code>container</code> size by default, so black edges often appear. This value can automatically adjust the size of the player to hide the black edges, similar to the <code>object-fit: contain</code> of <code>css</code></p>`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),R=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="automini" tabindex="-1"><code>autoMini</code> <a class="header-anchor" href="#automini" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>When the player scrolls outside the viewport, it automatically enters the <code>mini mode</code></p>`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoMini</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="loop" tabindex="-1"><code>loop</code> <a class="header-anchor" href="#loop" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to play in a loop</p>`,4),N=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">loop</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the video flip function currently only appears in the <code>Setting</code> and <code>Contextmenu</code></p>`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="playbackrate" tabindex="-1"><code>playbackRate</code> <a class="header-anchor" href="#playbackrate" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the video playback speed function will appear in the <code>Setting</code> and <code>Contextmenu</code></p>`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">playbackRate</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the video aspect ratio function will appear in the <code>Setting</code> and <code>Contextmenu</code></p>`,4),W=n("div",{className:"run-code"},"▶ Run Code",-1),M=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the <code>video screenshot</code> function in the bottom control bar</p>`,4),L=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>Due to the browser security policy, if the video source address and website are cross-domain, the screenshot may fail</p></div><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the switch button of <code>Setting</code> in the bottom control bar</p>`,5),H=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>true</code></li></ul><p>Whether to use shortcut keys</p>`,4),U=n("div",{className:"run-code"},"▶ Run Code",-1),J=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">hotkey</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><table><thead><tr><th>Hotkeys</th><th>Sescribe</th></tr></thead><tbody><tr><td><code>↑</code></td><td>Volume Up</td></tr><tr><td><code>↓</code></td><td>Volume Down</td></tr><tr><td><code>←</code></td><td>Fast forward</td></tr><tr><td><code>→</code></td><td>Fast rewind</td></tr><tr><td><code>space</code></td><td>Toggle play/pause</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">Tip</p><p>These shortcut keys will only take effect after the player gets the focus (such as clicking the player)</p></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the <code>picture in picture</code> switch button in the bottom control bar</p>`,6),G=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">pip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="mutex" tabindex="-1"><code>mutex</code> <a class="header-anchor" href="#mutex" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>true</code></li></ul><p>If there are multiple players in the page at the same time, can only one player play</p>`,4),Q=n("div",{className:"run-code"},"▶ Run Code",-1),X=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">mutex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the player <code>window full screen</code> button in the bottom control bar</p>`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to display the player <code>full screen web page</code> button in the bottom control bar</p>`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="subtitleoffset" tabindex="-1"><code>subtitleOffset</code> <a class="header-anchor" href="#subtitleoffset" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Subtitle time offset, with the range of <code>[-5s, 5s]</code>, appears in the <code>Settings</code></p>`,4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="miniprogressbar" tabindex="-1"><code>miniProgressBar</code> <a class="header-anchor" href="#miniprogressbar" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Mini progress bar, only appears when the player loses focus and is playing</p>`,4),es=n("div",{className:"run-code"},"▶ Run Code",-1),os=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">miniProgressBar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="usessr" tabindex="-1"><code>useSSR</code> <a class="header-anchor" href="#usessr" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Whether to use the <code>SSR</code> mount mode is useful if you want to render the <code>HTML</code> required by the player in advance before the player is mounted</p><p>You can access the <code>HTML</code> required by the player through <code>Artplayer.html</code></p>`,5),ts=n("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> $container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">$container</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> $container</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">useSSR</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="playsinline" tabindex="-1"><code>playsInline</code> <a class="header-anchor" href="#playsinline" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>true</code></li></ul><p>Whether to use the <code>playsInline</code> mode on the mobile end</p>`,4),cs=n("div",{className:"run-code"},"▶ Run Code",-1),is=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">playsInline</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>Initialize the customized <code>layers</code></p>`,4),Ds=n("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> img </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">layers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">potser</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">&lt;img style=&quot;width: 100px&quot; src=&quot;</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">img</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">&quot;&gt;</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.9</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mounted</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Please refer to the following address for <code>Component</code>:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="settings" tabindex="-1"><code>settings</code> <a class="header-anchor" href="#settings" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>Initialize the customized <code>Setting</code></p>`,5),Fs=n("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">settings</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting01-01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting01-02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting02-01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setting02-02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Please refer to the following address for <code>Setting</code></p><p><a href="/document/start/setting.html">/start/setting.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>初始化自定义的 <code>右键菜单</code></p>`,5),ds=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">contextmenu</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-menu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址：</p><p><a href="/document/start/component.html">/start/component.html</a>- Type:</p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>初始化自定义的底部 <code>控制栏</code></p>`,5),hs=n("div",{className:"run-code"},"▶ Run Code",-1),us=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-control</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Control</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">green</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">args</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址：</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="quality" tabindex="-1"><code>quality</code> <a class="header-anchor" href="#quality" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>是否在底部控制栏里显示 <code>画质选择</code> 列表</p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>Boolean</code></td><td>默认画质</td></tr><tr><td><code>html</code></td><td><code>String</code></td><td>画质名字</td></tr><tr><td><code>url</code></td><td><code>String</code></td><td>画质地址</td></tr></tbody></table>`,6),bs=n("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">quality</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">default</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">SD 480P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">HD 720P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="highlight" tabindex="-1"><code>highlight</code> <a class="header-anchor" href="#highlight" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>在进度条上显示 <code>高亮信息</code></p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>time</code></td><td><code>Number</code></td><td>高亮时间（单位秒）</td></tr><tr><td><code>text</code></td><td><code>String</code></td><td>高亮文本</td></tr></tbody></table>`,5),gs=n("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">highlight</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">60</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">One more chance</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">谁でもいいはずなのに</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">180</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">夏の想い出がまわる</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">240</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">こんなとこにあるはずもないのに</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">－－终わり－－</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>初始化自定义的 <code>插件</code></p>`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [myPlugin]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="whitelist" tabindex="-1"><code>whitelist</code> <a class="header-anchor" href="#whitelist" aria-hidden="true">#</a></h2><ul><li>Type: <code>Array</code></li><li>Default: <code>[]</code></li></ul><p>因为不同的移动设备存在多种差异和限制，有时候你希望在某些移动设备上不使用本播放器，而是直接使用原生的功能时，可以通过该选项控制</p><p>白名单是一个数组类型，分别与 <code>window.navigator.userAgent</code> 进行匹配，只要其中一项匹配成功则启用播放器</p><p>支持 <code>字符串</code> 匹配, <code>函数</code> 匹配, <code>正则</code> 匹配</p>`,6),fs=n("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">whitelist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ua</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">iPhone OS 11</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">gi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">(ua)]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// whitelist: [/iPhone OS 11/gi],</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// whitelist: [&#39;iPhone OS 11&#39;],</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如该选项不填，则默认使用本播放器</p></div><h2 id="thumbnails" tabindex="-1"><code>thumbnails</code> <a class="header-anchor" href="#thumbnails" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>在进度条上设置 <code>预览图</code></p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>预览图地址</td></tr><tr><td><code>number</code></td><td><code>Number</code></td><td>预览图数量</td></tr><tr><td><code>column</code></td><td><code>Number</code></td><td>预览图列数</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>预览图宽度</td></tr><tr><td><code>height</code></td><td><code>Number</code></td><td>预览图高度</td></tr></tbody></table>`,6),Ss=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">thumbnails</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/thumbnails.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">number</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">column</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">在线生成预览图</p><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&amp;example=thumbnail" target="_blank" rel="noreferrer">artplayer-tool-thumbnail</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>设置视频的字幕，支持字幕格式：<code>vtt</code>, <code>srt</code>, <code>ass</code></p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>字幕地址</td></tr><tr><td><code>type</code></td><td><code>String</code></td><td>字幕类型，可选 <code>vtt</code>, <code>srt</code>, <code>ass</code></td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>字幕样式</td></tr><tr><td><code>encoding</code></td><td><code>String</code></td><td>字幕编码，默认 <code>utf-8</code></td></tr></tbody></table>`,6),ws=n("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">srt</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">encoding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">utf-8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#03A9F4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">font-size</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">30px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="morevideoattr" tabindex="-1"><code>moreVideoAttr</code> <a class="header-anchor" href="#morevideoattr" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{&#39;controls&#39;: false,&#39;preload&#39;: &#39;metadata&#39;}</code></li></ul><p>更多视频属性，这些属性将直接写入视频元素里</p>`,4),js=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">moreVideoAttr</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">webkit-playsinline</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">playsInline</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>用于替换默认图标，支持 <code>Html</code> 字符串和 <code>HTMLElement</code></p>`,4),Is=n("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">icons</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">loading</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;img src=&quot;/assets/img/ploading.gif&quot;&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">state</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;img src=&quot;/assets/img/state.png&quot;&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部图标的定义</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="type" tabindex="-1"><code>type</code> <a class="header-anchor" href="#type" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>用于指明视频的格式，需要配合 <code>customType</code> 一起使用，默认视频的格式就是视频地址的后缀（如 <code>.m3u8</code>, <code>.mkv</code>, <code>.ts</code>），但有时候视频地地址没有正确的后缀，所以需要特别指明</p>`,5),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">后缀的识别</p><p>播放器只能解析这种后缀：<code>/assets/sample/video.m3u8</code></p><p>但无法解析这种后缀：<code>/assets/sample/video?type=m3u8</code></p><p>所以假如你使用了 <code>customType</code>，最好同时要指明 <code>type</code></p></div><h2 id="customtype" tabindex="-1"><code>customType</code> <a class="header-anchor" href="#customtype" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>通过视频的 <code>type</code> 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数</p><ul><li><code>video</code> : 视频 <code>DOM</code> 元素</li><li><code>url</code> : 视频地址</li><li><code>art</code> : 当前实例</li></ul>`,6),Bs=n("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.m3u8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">m3u8</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//</span></span>
+<span class="line highlighted"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="lang" tabindex="-1"><code>lang</code> <a class="header-anchor" href="#lang" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>navigator.language.toLowerCase()</code></li></ul><p>默认显示语言，目前支持：<code>en</code>, <code>zh-cn</code>, <code>zh-tw</code>, <code>cs</code>, <code>pl</code>, <code>es</code>, <code>fa</code></p>`,4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Os=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">lang</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-hidden="true">#</a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>自定义 <code>i18n</code> 配置，该配置会和自带的 <code>i18n</code> 进行深度合并</p><p>新增你的语言:</p>`,5),Ws=n("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">lang</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-lang</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">your-lang</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>修改现有的语言</p>`,2),Ls=n("div",{className:"run-code"},"▶ Run Code",-1),$s=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">zh-cn</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">zh-tw</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">i18n 写法参考</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts" target="_blank" rel="noreferrer">artplayer/types/i18n.d.ts</a></p></div><h2 id="lock" tabindex="-1"><code>lock</code> <a class="header-anchor" href="#lock" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在移动端显示一个 <code>锁定按钮</code> ，用于隐藏底部 <code>控制栏</code></p>`,5),Hs=n("div",{className:"run-code"},"▶ Run Code",-1),Ys=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">lock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="fastforward" tabindex="-1"><code>fastForward</code> <a class="header-anchor" href="#fastforward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在移动端添加长按视频快进功能</p>`,4),Us=n("div",{className:"run-code"},"▶ Run Code",-1),Js=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">fastForward</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="autoplayback" tabindex="-1"><code>autoPlayback</code> <a class="header-anchor" href="#autoplayback" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否使用自动 <code>回放功能</code></p>`,4),Gs=n("div",{className:"run-code"},"▶ Run Code",-1),Ks=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">gb</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-url-id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoPlayback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>因为播放器默认使用 <code>url</code> 作为 <code>key</code> 来缓存播放进度的</p><p>但假如你的同一个视频的 <code>url</code> 是不同的话，那么你需要使用 <code>id</code> 来标识视频的唯一 <code>key</code></p></div><h2 id="autoorientation" tabindex="-1"><code>autoOrientation</code> <a class="header-anchor" href="#autoorientation" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器</p>`,5),Qs=n("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoOrientation</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="airplay" tabindex="-1"><code>airplay</code> <a class="header-anchor" href="#airplay" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否显示 <code>airplay</code> 按钮，当前只有部分浏览器支持该功能</p>`,4),Zs=n("div",{className:"run-code"},"▶ Run Code",-1),sn=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">airplay</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,1),nn=[o,t,r,c,i,D,y,F,C,d,A,h,u,b,m,g,_,v,T,f,E,S,k,w,P,j,R,I,V,N,x,B,z,q,O,W,M,L,$,H,Y,U,J,G,K,Q,X,Z,ss,ns,as,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,ds,As,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ks,ws,Ps,js,Rs,Is,Vs,Ns,xs,Bs,zs,qs,Os,Ws,Ms,Ls,$s,Hs,Ys,Us,Js,Gs,Ks,Qs,Xs,Zs,sn];function an(ln,pn,en,on,tn,rn){return p(),l("div",null,nn)}const yn=a(e,[["render",an]]);export{Dn as __pageData,yn as default};

docs/document/assets/en_start_option.md.a841fbfc.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Dn=JSON.parse('{"title":"Option","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"en/start/option.md","lastUpdated":1673692792000}'),e={name:"en/start/option.md"},o=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",7),c=n("div",{className:"run-code"},"▶ Run Code",-1),i=s("",2),D=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),d=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",7),h=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),f=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",4),S=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),j=n("div",{cLine truncated

docs/document/assets/en_start_setting.md.ef6e700c.js

@@ -0,0 +1,149 @@
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"en/start/setting.md","lastUpdated":1673692792000}'),e={name:"en/start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line highlighted"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">playbackRate</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="选择列表" tabindex="-1">选择列表 <a class="header-anchor" href="#选择列表" aria-hidden="true">#</a></h2><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>元素的 DOM 元素</td></tr><tr><td><code>icon</code></td><td><code>String</code>, <code>Element</code></td><td>元素的图标</td></tr><tr><td><code>selector</code></td><td><code>Array</code></td><td>元素列表</td></tr><tr><td><code>onSelect</code></td><td><code>Function</code></td><td>元素点击事件</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>列表宽度</td></tr><tr><td><code>default</code></td><td><code>Boolean</code></td><td>是否默认选中</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>提示文本</td></tr></tbody></table>`,3),y=s("div",{className:"run-code"},"▶ Run Code",-1),F=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">settings</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Subtitle</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">250</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Subtitle 01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">default</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;span style=&quot;color:red&quot;&gt;Subtitle 01&lt;/span&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt?id=1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;span style=&quot;color:yellow&quot;&gt;Subtitle 02&lt;/span&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt?id=2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Quality</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1080P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">default</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1080P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?id=1080</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">720P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?id=720</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">360P</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4?id=360</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchQuality</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br></div></div><h2 id="列表嵌套" tabindex="-1">列表嵌套 <a class="header-anchor" href="#列表嵌套" aria-hidden="true">#</a></h2>`,2),C=s("div",{className:"run-code"},"▶ Run Code",-1),A=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">settings</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Multi-level</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 01 - 01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 01 - 02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">selector</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 02 - 01</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Setting 02 - 02</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#82AAFF;">onSelect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">            ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><h2 id="切换按钮" tabindex="-1">切换按钮 <a class="header-anchor" href="#切换按钮" aria-hidden="true">#</a></h2><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>元素的 DOM 元素</td></tr><tr><td><code>icon</code></td><td><code>String</code>, <code>Element</code></td><td>元素的图标</td></tr><tr><td><code>switch</code></td><td><code>Boolean</code></td><td>按钮默认状态</td></tr><tr><td><code>onSwitch</code></td><td><code>Function</code></td><td>按钮切换事件</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>提示文本</td></tr></tbody></table>`,3),i=s("div",{className:"run-code"},"▶ Run Code",-1),d=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">settings</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">PIP Mode</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Close</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;img width=&quot;22&quot; heigth=&quot;22&quot; src=&quot;/assets/img/state.svg&quot;&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">switch</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onSwitch</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">nextState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">switch</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">nextState</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tooltip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">nextState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Open</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Close</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">nextState</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="范围滑块" tabindex="-1">范围滑块 <a class="header-anchor" href="#范围滑块" aria-hidden="true">#</a></h2><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>元素的 DOM 元素</td></tr><tr><td><code>icon</code></td><td><code>String</code>, <code>Element</code></td><td>元素的图标</td></tr><tr><td><code>range</code></td><td><code>Array</code></td><td>默认状态数组</td></tr><tr><td><code>onRange</code></td><td><code>Function</code></td><td>完成时触发的事件</td></tr><tr><td><code>onChange</code></td><td><code>Function</code></td><td>变化时触发的事件</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>提示文本</td></tr></tbody></table><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> range </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> range[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> min </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> range[</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> max </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> range[</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> step </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> range[</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,4),b=s("div",{className:"run-code"},"▶ Run Code",-1),u=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">settings</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Slider</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">5x</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">&lt;img width=&quot;22&quot; heigth=&quot;22&quot; src=&quot;/assets/img/state.svg&quot;&gt;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">range</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">onChange</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$dom</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">range</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">x</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div>`,1),m=[t,c,r,D,y,F,C,A,i,d,b,u];function h(_,g,E,v,f,S){return o(),p("div",null,m)}const P=l(e,[["render",h]]);export{w as __pageData,P as default};

docs/document/assets/en_start_setting.md.ef6e700c.lean.js

@@ -0,0 +1 @@
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"en/start/setting.md","lastUpdated":1673692792000}'),e={name:"en/start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",3),y=s("div",{className:"run-code"},"▶ Run Code",-1),F=a("",2),C=s("div",{className:"run-code"},"▶ Run Code",-1),A=a("",3),i=s("div",{className:"run-code"},"▶ Run Code",-1),d=a("",4),b=s("div",{className:"run-code"},"▶ Run Code",-1),u=a("",1),m=[t,c,r,D,y,F,C,A,i,d,b,u];function h(_,g,E,v,f,S){return o(),p("div",null,m)}const P=l(e,[["render",h]]);export{w as __pageData,P as default};

docs/document/assets/index.md.a33913b3.js

@@ -1,10 +1,10 @@
-import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673441101000}'),p={name:"index.md"},e=l(`<h1 id="安装使用" tabindex="-1">安装使用 <a class="header-anchor" href="#安装使用" aria-hidden="true">#</a></h1><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-V6H1X" id="tab-gi-TzqU" checked="checked"><label for="tab-gi-TzqU">npm</label><input type="radio" name="group-V6H1X" id="tab-ksJiPxB"><label for="tab-ksJiPxB">yarn</label><input type="radio" name="group-V6H1X" id="tab--ruP6zH"><label for="tab--ruP6zH">pnpm</label><input type="radio" name="group-V6H1X" id="tab-EpkqsJ2"><label for="tab-EpkqsJ2">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673441101000}'),p={name:"index.md"},e=l(`<h1 id="安装使用" tabindex="-1">安装使用 <a class="header-anchor" href="#安装使用" aria-hidden="true">#</a></h1><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-AXknI" id="tab-VkmA94M" checked="checked"><label for="tab-VkmA94M">npm</label><input type="radio" name="group-AXknI" id="tab-tE0_kwf"><label for="tab-tE0_kwf">yarn</label><input type="radio" name="group-AXknI" id="tab-aiyZnxg"><label for="tab-aiyZnxg">pnpm</label><input type="radio" name="group-AXknI" id="tab-qR-yziE"><label for="tab-qR-yziE">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-dKCH8" id="tab-6s-Gm6F" checked="checked"><label for="tab-6s-Gm6F">jsdelivr.net</label><input type="radio" name="group-dKCH8" id="tab-8HPS1wI"><label for="tab-8HPS1wI">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-oizfF" id="tab-Wcw--uk" checked="checked"><label for="tab-Wcw--uk">jsdelivr.net</label><input type="radio" name="group-oizfF" id="tab-t16EtK4"><label for="tab-t16EtK4">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer/dist/artplayer.js</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-xo0go" id="tab-kYWn8lL" checked="checked"><label for="tab-kYWn8lL">index.js</label><input type="radio" name="group-xo0go" id="tab-Rtija2E"><label for="tab-Rtija2E">index.html</label></div><div class="blocks"><div class="language-js active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-bGJ1B" id="tab-O36JWhW" checked="checked"><label for="tab-O36JWhW">index.js</label><input type="radio" name="group-bGJ1B" id="tab-Ochbpef"><label for="tab-Ochbpef">index.html</label></div><div class="blocks"><div class="language-js active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
@@ -25,7 +25,7 @@ import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const C=JSON.parse('{
 <span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artplayer-app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>播放器的尺寸依赖于容器 <code>container</code> 的尺寸，所以你的容器 <code>container</code> 必须是有尺寸的</p></div><div class="tip custom-block"><p class="custom-block-title">以下链接可以看到更多的使用例子</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template" target="_blank" rel="noreferrer">/packages/artplayer-template</a></p></div><h2 id="vue-js" tabindex="-1"><code>Vue.js</code> <a class="header-anchor" href="#vue-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-KkRKk" id="tab-jVC7Oht" checked="checked"><label for="tab-jVC7Oht">Artplayer.vue</label><input type="radio" name="group-KkRKk" id="tab-52rYEku"><label for="tab-52rYEku">app.vue</label></div><div class="blocks"><div class="language-vue active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>播放器的尺寸依赖于容器 <code>container</code> 的尺寸，所以你的容器 <code>container</code> 必须是有尺寸的</p></div><div class="tip custom-block"><p class="custom-block-title">以下链接可以看到更多的使用例子</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template" target="_blank" rel="noreferrer">/packages/artplayer-template</a></p></div><h2 id="vue-js" tabindex="-1"><code>Vue.js</code> <a class="header-anchor" href="#vue-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-MMsqn" id="tab-XabVmya" checked="checked"><label for="tab-XabVmya">Artplayer.vue</label><input type="radio" name="group-MMsqn" id="tab-PrnJFrY"><label for="tab-PrnJFrY">app.vue</label></div><div class="blocks"><div class="language-vue active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">artRef</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"></span>
@@ -91,7 +91,7 @@ import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const C=JSON.parse('{
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
 <span class="line"><span style="color:#89DDFF;">};</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Artplayer 非响应式：</p><p>在 <code>Vue.js</code> 里直接修改 <code>option</code> 是不会改变播放器的</p></div><h2 id="react-js" tabindex="-1"><code>React.js</code> <a class="header-anchor" href="#react-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-PUf2I" id="tab-udCyQ2u" checked="checked"><label for="tab-udCyQ2u">Artplayer.jsx</label><input type="radio" name="group-PUf2I" id="tab-aKTi3IN"><label for="tab-aKTi3IN">app.jsx</label></div><div class="blocks"><div class="language-jsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Artplayer 非响应式：</p><p>在 <code>Vue.js</code> 里直接修改 <code>option</code> 是不会改变播放器的</p></div><h2 id="react-js" tabindex="-1"><code>React.js</code> <a class="header-anchor" href="#react-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-tzghl" id="tab-cj43ouN" checked="checked"><label for="tab-cj43ouN">Artplayer.jsx</label><input type="radio" name="group-tzghl" id="tab-FPDAKXo"><label for="tab-FPDAKXo">app.jsx</label></div><div class="blocks"><div class="language-jsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Player</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">getInstance</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;font-style:italic;">rest</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>

docs/document/assets/index.md.a33913b3.lean.js

@@ -1 +1 @@
-import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673441101000}'),p={name:"index.md"},e=l("",23),o=[e];function t(r,c,y,F,i,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673441101000}'),p={name:"index.md"},e=l("",23),o=[e];function t(r,c,y,F,i,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};

docs/document/assets/library_dash.md.1b8b1427.js

@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.c821c423.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673441101000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playMpd</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673441101000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playMpd</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">supportsMediaSource</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MediaPlayer</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initialize</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoplay</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>

docs/document/assets/library_dash.md.1b8b1427.lean.js

@@ -1 +1 @@
-import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.c821c423.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673441101000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};
+import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673441101000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/library_flv.md.90784b7c.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.c821c423.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673441101000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playFlv</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673441101000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playFlv</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createPlayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">flv</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachMediaElement</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>

docs/document/assets/library_flv.md.90784b7c.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.c821c423.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673441101000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673441101000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};

docs/document/assets/library_hls.md.54a25dea.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.c821c423.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673441101000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playM3u8</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673441101000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playM3u8</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">Hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Hls</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadSource</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>

docs/document/assets/library_hls.md.54a25dea.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.c821c423.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673441101000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};
+import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673441101000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};

docs/document/assets/plugin_ads.md.3f828a6b.js

@@ -1,8 +1,8 @@
-import{_ as a,c as n,o as l,a as s,b as p}from"./app.c821c423.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s(`<h1 id="视频广告" tabindex="-1">视频广告 <a class="header-anchor" href="#视频广告" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&amp;example=ads" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-WhHRy" id="tab-UnvR0wn" checked="checked"><label for="tab-UnvR0wn">npm</label><input type="radio" name="group-WhHRy" id="tab-Nf1Q3mT"><label for="tab-Nf1Q3mT">yarn</label><input type="radio" name="group-WhHRy" id="tab-qgs7izp"><label for="tab-qgs7izp">pnpm</label><input type="radio" name="group-WhHRy" id="tab-61djtX8"><label for="tab-61djtX8">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
+import{_ as a,c as n,o as l,a as s,b as p}from"./app.9e4cc5a4.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s(`<h1 id="视频广告" tabindex="-1">视频广告 <a class="header-anchor" href="#视频广告" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&amp;example=ads" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-JjwZg" id="tab-yUvW4i7" checked="checked"><label for="tab-yUvW4i7">npm</label><input type="radio" name="group-JjwZg" id="tab-r076RDU"><label for="tab-r076RDU">yarn</label><input type="radio" name="group-JjwZg" id="tab-08Xr44D"><label for="tab-08Xr44D">pnpm</label><input type="radio" name="group-JjwZg" id="tab-JwPeW5t"><label for="tab-JwPeW5t">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-ads.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-hJQK5" id="tab-dtulj2D" checked="checked"><label for="tab-dtulj2D">jsdelivr.net</label><input type="radio" name="group-hJQK5" id="tab-axczRQh"><label for="tab-axczRQh">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-arT2j" id="tab-WNHbIkV" checked="checked"><label for="tab-WNHbIkV">jsdelivr.net</label><input type="radio" name="group-arT2j" id="tab-ZcVLQEK"><label for="tab-ZcVLQEK">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
@@ -52,4 +52,4 @@ import{_ as a,c as n,o as l,a as s,b as p}from"./app.c821c423.js";const u=JSON.p
 <span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayerPluginAds:skip</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ads</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">ads</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div>`,1),t=[o,r,c];function i(y,D,F,d,C,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div>`,1),t=[o,r,c];function i(y,D,F,C,d,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};

docs/document/assets/plugin_ads.md.3f828a6b.lean.js

@@ -1 +1 @@
-import{_ as a,c as n,o as l,a as s,b as p}from"./app.c821c423.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s("",1),t=[o,r,c];function i(y,D,F,d,C,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};
+import{_ as a,c as n,o as l,a as s,b as p}from"./app.9e4cc5a4.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s("",1),t=[o,r,c];function i(y,D,F,C,d,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};

docs/document/assets/plugin_control-ui.md.ee1f723f.js

@@ -1,8 +1,8 @@
-import{_ as n,c as l,o as p,a as s,b as a}from"./app.c821c423.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s(`<h1 id="控制器皮肤" tabindex="-1">控制器皮肤 <a class="header-anchor" href="#控制器皮肤" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&amp;example=control" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Z8YYn" id="tab-kvCoub_" checked="checked"><label for="tab-kvCoub_">npm</label><input type="radio" name="group-Z8YYn" id="tab-fI60HwS"><label for="tab-fI60HwS">yarn</label><input type="radio" name="group-Z8YYn" id="tab-r1jzeXe"><label for="tab-r1jzeXe">pnpm</label><input type="radio" name="group-Z8YYn" id="tab-ShBOjgk"><label for="tab-ShBOjgk">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
+import{_ as n,c as l,o as p,a as s,b as a}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s(`<h1 id="控制器皮肤" tabindex="-1">控制器皮肤 <a class="header-anchor" href="#控制器皮肤" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&amp;example=control" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-WQbxc" id="tab-VolxnhJ" checked="checked"><label for="tab-VolxnhJ">npm</label><input type="radio" name="group-WQbxc" id="tab-0Wtxn8M"><label for="tab-0Wtxn8M">yarn</label><input type="radio" name="group-WQbxc" id="tab-7tMP0Le"><label for="tab-7tMP0Le">pnpm</label><input type="radio" name="group-WQbxc" id="tab-DiOjI_0"><label for="tab-DiOjI_0">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-control.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Q9M9t" id="tab-zV83lE7" checked="checked"><label for="tab-zV83lE7">jsdelivr.net</label><input type="radio" name="group-Q9M9t" id="tab-q8jRj7q"><label for="tab-q8jRj7q">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-CddBD" id="tab-V9r2xJ_" checked="checked"><label for="tab-V9r2xJ_">jsdelivr.net</label><input type="radio" name="group-CddBD" id="tab-RS3zLPH"><label for="tab-RS3zLPH">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
@@ -32,4 +32,4 @@ import{_ as n,c as l,o as p,a as s,b as a}from"./app.c821c423.js";const m=JSON.p
 <span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">artplayerPluginControl</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    ]</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1),y=[o,r,t,c,i];function D(d,F,C,b,u,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};

docs/document/assets/plugin_control-ui.md.ee1f723f.lean.js

@@ -1 +1 @@
-import{_ as n,c as l,o as p,a as s,b as a}from"./app.c821c423.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};
+import{_ as n,c as l,o as p,a as s,b as a}from"./app.9e4cc5a4.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(d,F,C,b,u,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};

docs/document/assets/plugin_danmuku.md.cff07d78.js

@@ -1,8 +1,8 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673441101000}'),o={name:"plugin/danmuku.md"},e=s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&amp;example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-qbxq1" id="tab--38txJs" checked="checked"><label for="tab--38txJs">npm</label><input type="radio" name="group-qbxq1" id="tab-Sh6v-zT"><label for="tab-Sh6v-zT">yarn</label><input type="radio" name="group-qbxq1" id="tab-JzcnjWi"><label for="tab-JzcnjWi">pnpm</label><input type="radio" name="group-qbxq1" id="tab-wTNn3B5"><label for="tab-wTNn3B5">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const R=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673441101000}'),o={name:"plugin/danmuku.md"},e=s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&amp;example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-s-tOR" id="tab-NkeGXYq" checked="checked"><label for="tab-NkeGXYq">npm</label><input type="radio" name="group-s-tOR" id="tab-YKAtMKO"><label for="tab-YKAtMKO">yarn</label><input type="radio" name="group-s-tOR" id="tab-NMaJbDK"><label for="tab-NMaJbDK">pnpm</label><input type="radio" name="group-s-tOR" id="tab-2HJxPhO"><label for="tab-2HJxPhO">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-danmuku.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-9SH6j" id="tab-jdu3ihx" checked="checked"><label for="tab-jdu3ihx">jsdelivr.net</label><input type="radio" name="group-9SH6j" id="tab-Pxah2Xf"><label for="tab-Pxah2Xf">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Yk_QI" id="tab-11Hcn6c" checked="checked"><label for="tab-11Hcn6c">jsdelivr.net</label><input type="radio" name="group-Yk_QI" id="tab-XvWlxjY"><label for="tab-XvWlxjY">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="选项" tabindex="-1">选项 <a class="header-anchor" href="#选项" aria-hidden="true">#</a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> []</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕库，支持数组, xml 地址, Promise返回数组</span></span>
@@ -298,4 +298,4 @@ import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const V=JSON.p
 <span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">artplayerPluginDanmuku:destroy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">弹幕销毁</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div>`,3),x=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function T(P,B,j,S,w,N){return p(),l("div",null,x)}const q=a(o,[["render",T]]);export{V as __pageData,q as default};
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div>`,3),x=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function T(P,B,j,w,S,N){return p(),l("div",null,x)}const V=a(o,[["render",T]]);export{R as __pageData,V as default};

docs/document/assets/plugin_danmuku.md.cff07d78.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673441101000}'),o={name:"plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s("",3),k=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),x=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function T(P,B,j,S,w,N){return p(),l("div",null,x)}const q=a(o,[["render",T]]);export{V as __pageData,q as default};
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const R=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673441101000}'),o={name:"plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s("",3),k=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),x=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function T(P,B,j,w,S,N){return p(),l("div",null,x)}const V=a(o,[["render",T]]);export{R as __pageData,V as default};

docs/document/assets/plugin_hls-quality.md.8d3d8aba.js

@@ -1,7 +1,7 @@
-import{_ as a,c as s,o as l,a as e}from"./app.c821c423.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},p=e(`<h1 id="hls-画质" tabindex="-1">HLS 画质 <a class="header-anchor" href="#hls-画质" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&amp;example=hls.quality" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-i25Jq" id="tab-_U9CrQg" checked="checked"><label for="tab-_U9CrQg">npm</label><input type="radio" name="group-i25Jq" id="tab-nSCzm9i"><label for="tab-nSCzm9i">yarn</label><input type="radio" name="group-i25Jq" id="tab-b0blDdu"><label for="tab-b0blDdu">pnpm</label><input type="radio" name="group-i25Jq" id="tab-UAi26nR"><label for="tab-UAi26nR">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
+import{_ as a,c as s,o as l,a as e}from"./app.9e4cc5a4.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},p=e(`<h1 id="hls-画质" tabindex="-1">HLS 画质 <a class="header-anchor" href="#hls-画质" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&amp;example=hls.quality" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-kPLXP" id="tab-TqcMd5_" checked="checked"><label for="tab-TqcMd5_">npm</label><input type="radio" name="group-kPLXP" id="tab-GoDk6ei"><label for="tab-GoDk6ei">yarn</label><input type="radio" name="group-kPLXP" id="tab-Dfqt6Xh"><label for="tab-Dfqt6Xh">pnpm</label><input type="radio" name="group-kPLXP" id="tab-eP9QBx0"><label for="tab-eP9QBx0">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-hls-quality</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-hls-quality.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-SwH2v" id="tab-8MdNg_G" checked="checked"><label for="tab-8MdNg_G">jsdelivr.net</label><input type="radio" name="group-SwH2v" id="tab-hhiRR4d"><label for="tab-hhiRR4d">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Yu7nI" id="tab-cDhaajc" checked="checked"><label for="tab-cDhaajc">jsdelivr.net</label><input type="radio" name="group-Yu7nI" id="tab-tsWnwqy"><label for="tab-tsWnwqy">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div>`,7),i=[p];function t(r,o,c,d,u,h){return l(),s("div",null,i)}const m=a(n,[["render",t]]);export{y as __pageData,m as default};
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div>`,7),t=[p];function i(r,o,c,d,u,h){return l(),s("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default};

docs/document/assets/plugin_hls-quality.md.8d3d8aba.lean.js

@@ -1 +1 @@
-import{_ as a,c as s,o as l,a as e}from"./app.c821c423.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},p=e("",7),i=[p];function t(r,o,c,d,u,h){return l(),s("div",null,i)}const m=a(n,[["render",t]]);export{y as __pageData,m as default};
+import{_ as a,c as s,o as l,a as e}from"./app.9e4cc5a4.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]}],"relativePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},p=e("",7),t=[p];function i(r,o,c,d,u,h){return l(),s("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default};

docs/document/assets/plugin_iframe.md.ddafd3d1.js

@@ -1,10 +1,10 @@
-import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"plugin/iframe.md","lastUpdated":1673488264000}'),p={name:"plugin/iframe.md"},e=l(`<h1 id="iframe-控制" tabindex="-1">Iframe 控制 <a class="header-anchor" href="#iframe-控制" aria-hidden="true">#</a></h1><h2 id="说明" tabindex="-1">说明 <a class="header-anchor" href="#说明" aria-hidden="true">#</a></h2><p>通过该插件，你可以轻松在 <code>index.html</code> 里控制跨域 <code>iframe.html</code> 页面里的播放器，如在 <code>index.html</code> 里通过代码控制 <code>iframe.html</code> 播放器的功能，或者获取 <code>iframe.html</code> 播放器的值</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&amp;example=iframe" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Ie4q0" id="tab-0L_GZ5J" checked="checked"><label for="tab-0L_GZ5J">npm</label><input type="radio" name="group-Ie4q0" id="tab-44onj4A"><label for="tab-44onj4A">yarn</label><input type="radio" name="group-Ie4q0" id="tab-3riWJZ_"><label for="tab-3riWJZ_">pnpm</label><input type="radio" name="group-Ie4q0" id="tab--MN2eK5"><label for="tab--MN2eK5">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"plugin/iframe.md","lastUpdated":1673665918000}'),p={name:"plugin/iframe.md"},e=l(`<h1 id="iframe-控制" tabindex="-1">Iframe 控制 <a class="header-anchor" href="#iframe-控制" aria-hidden="true">#</a></h1><h2 id="说明" tabindex="-1">说明 <a class="header-anchor" href="#说明" aria-hidden="true">#</a></h2><p>通过该插件，你可以轻松在 <code>index.html</code> 里控制跨域 <code>iframe.html</code> 页面里的播放器，如在 <code>index.html</code> 里通过代码控制 <code>iframe.html</code> 播放器的功能，或者获取 <code>iframe.html</code> 播放器的值</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&amp;example=iframe" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-2-lnn" id="tab-s8kJRHR" checked="checked"><label for="tab-s8kJRHR">npm</label><input type="radio" name="group-2-lnn" id="tab-png196D"><label for="tab-png196D">yarn</label><input type="radio" name="group-2-lnn" id="tab-VD3gq7S"><label for="tab-VD3gq7S">pnpm</label><input type="radio" name="group-2-lnn" id="tab--O0Yhja"><label for="tab--O0Yhja">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-iframe</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path/to/artplayer-plugin-iframe.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-3sjly" id="tab-C3GqJmG" checked="checked"><label for="tab-C3GqJmG">jsdelivr.net</label><input type="radio" name="group-3sjly" id="tab-jrx7Of4"><label for="tab-jrx7Of4">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-tORxK" id="tab-mkM_MRH" checked="checked"><label for="tab-mkM_MRH">jsdelivr.net</label><input type="radio" name="group-tORxK" id="tab-LYE_zIC"><label for="tab-LYE_zIC">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js</span></span>
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-89Vgp" id="tab-mGADNYi" checked="checked"><label for="tab-mGADNYi">index.html</label><input type="radio" name="group-89Vgp" id="tab-GdOnxNE"><label for="tab-GdOnxNE">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-WLfSI" id="tab-GohtFTi" checked="checked"><label for="tab-GohtFTi">index.html</label><input type="radio" name="group-WLfSI" id="tab-pvhNubd"><label for="tab-pvhNubd">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">ArtPlayer</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
@@ -96,7 +96,7 @@ import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const A=JSON.parse('{
 <span class="line"><span style="color:#F07178;">        data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="例子" tabindex="-1">例子 <a class="header-anchor" href="#例子" aria-hidden="true">#</a></h2><p>最常遇到的问题是，播放器在 <code>iframe.html</code> 里进行网页全屏，但在 <code>index.html</code> 是不生效的，这时候只要监听 <code>iframe.html</code> 里的 <code>fullscreenWeb</code> 事件并通知到 <code>index.html</code> 即可</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-2uGID" id="tab-csxVcFx" checked="checked"><label for="tab-csxVcFx">index.html</label><input type="radio" name="group-2uGID" id="tab-DmO38CX"><label for="tab-DmO38CX">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="例子" tabindex="-1">例子 <a class="header-anchor" href="#例子" aria-hidden="true">#</a></h2><p>最常遇到的问题是，播放器在 <code>iframe.html</code> 里进行网页全屏，但在 <code>index.html</code> 是不生效的，这时候只要监听 <code>iframe.html</code> 里的 <code>fullscreenWeb</code> 事件并通知到 <code>index.html</code> 即可</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5Un_c" id="tab-4ufEgmM" checked="checked"><label for="tab-4ufEgmM">index.html</label><input type="radio" name="group-5Un_c" id="tab-U-ofi4z"><label for="tab-U-ofi4z">iframe.html</label></div><div class="blocks"><div class="language-html active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"></span>
 <span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>

docs/document/assets/plugin_iframe.md.ddafd3d1.lean.js

@@ -1 +1 @@
-import{_ as s,c as n,o as a,a as l}from"./app.c821c423.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"plugin/iframe.md","lastUpdated":1673488264000}'),p={name:"plugin/iframe.md"},e=l("",32),o=[e];function r(t,c,F,D,y,i){return a(),n("div",null,o)}const b=s(p,[["render",r]]);export{A as __pageData,b as default};
+import{_ as s,c as n,o as a,a as l}from"./app.9e4cc5a4.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[{"level":2,"title":"说明","slug":"说明","link":"#说明","children":[]},{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"index.html 接口","slug":"index-html-接口","link":"#index-html-接口","children":[{"level":3,"title":"commit","slug":"commit","link":"#commit","children":[]},{"level":3,"title":"message","slug":"message","link":"#message","children":[]},{"level":3,"title":"destroy","slug":"destroy","link":"#destroy","children":[]}]},{"level":2,"title":"iframe.html 接口","slug":"iframe-html-接口","link":"#iframe-html-接口","children":[{"level":3,"title":"inject","slug":"inject","link":"#inject","children":[]},{"level":3,"title":"postMessage","slug":"postmessage","link":"#postmessage","children":[]}]},{"level":2,"title":"例子","slug":"例子","link":"#例子","children":[]}],"relativePath":"plugin/iframe.md","lastUpdated":1673665918000}'),p={name:"plugin/iframe.md"},e=l("",32),o=[e];function r(t,c,F,D,y,i){return a(),n("div",null,o)}const b=s(p,[["render",r]]);export{A as __pageData,b as default};

docs/document/assets/start_component.md.8366f7f2.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"start/component.md","lastUpdated":1673441101000}'),o={name:"start/component.md"},e=s('<h1 id="组件配置" tabindex="-1">组件配置 <a class="header-anchor" href="#组件配置" aria-hidden="true">#</a></h1><p>这里所说的组件配置主要是指：<code>layers</code> , <code>controls</code> , <code>contextmenu</code> 这三个共用的配置:</p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>disable</code></td><td><code>Boolean</code></td><td>是否禁用组件</td></tr><tr><td><code>name</code></td><td><code>String</code></td><td>组件唯一名称，用于标记类名</td></tr><tr><td><code>index</code></td><td><code>Number</code></td><td>组件索引，用于显示的优先级</td></tr><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>组件的 DOM 元素</td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>组件样式对象</td></tr><tr><td><code>click</code></td><td><code>Function</code></td><td>组件点击事件</td></tr><tr><td><code>mounted</code></td><td><code>Function</code></td><td>组件挂载后触发</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>组件的提示文本</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">提示</p><ul><li>当前组件只能添加，并没有销毁的功能</li><li>通过 <code>name</code> 选项可以快速获取组件的 <code>DOM</code> 元素</li><li>通过 <code>index</code> 选项可以控制组件出现的顺序</li></ul></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>实例化时添加一个层，例如可以添加 <code>logo</code> 或者 <code>广告</code> 等等</p>',6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> img </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"start/component.md","lastUpdated":1673441101000}'),o={name:"start/component.md"},e=s('<h1 id="组件配置" tabindex="-1">组件配置 <a class="header-anchor" href="#组件配置" aria-hidden="true">#</a></h1><p>这里所说的组件配置主要是指：<code>layers</code> , <code>controls</code> , <code>contextmenu</code> 这三个共用的配置:</p><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>disable</code></td><td><code>Boolean</code></td><td>是否禁用组件</td></tr><tr><td><code>name</code></td><td><code>String</code></td><td>组件唯一名称，用于标记类名</td></tr><tr><td><code>index</code></td><td><code>Number</code></td><td>组件索引，用于显示的优先级</td></tr><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>组件的 DOM 元素</td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>组件样式对象</td></tr><tr><td><code>click</code></td><td><code>Function</code></td><td>组件点击事件</td></tr><tr><td><code>mounted</code></td><td><code>Function</code></td><td>组件挂载后触发</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>组件的提示文本</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">提示</p><ul><li>当前组件只能添加，并没有销毁的功能</li><li>通过 <code>name</code> 选项可以快速获取组件的 <code>DOM</code> 元素</li><li>通过 <code>index</code> 选项可以控制组件出现的顺序</li></ul></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>实例化时添加一个层，例如可以添加 <code>logo</code> 或者 <code>广告</code> 等等</p>',6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> img </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/start_component.md.8366f7f2.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"start/component.md","lastUpdated":1673441101000}'),o={name:"start/component.md"},e=s("",6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",1),b=[e,c,r,t,D,F,y,i,A,C,d];function h(u,m,g,_,E,f){return p(),l("div",null,b)}const x=a(o,[["render",h]]);export{T as __pageData,x as default};
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const T=JSON.parse('{"title":"组件配置","description":"","frontmatter":{},"headers":[{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]}],"relativePath":"start/component.md","lastUpdated":1673441101000}'),o={name:"start/component.md"},e=s("",6),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",1),b=[e,c,r,t,D,F,y,i,A,C,d];function h(u,m,g,_,E,f){return p(),l("div",null,b)}const x=a(o,[["render",h]]);export{T as __pageData,x as default};

docs/document/assets/start_option.md.564fb18a.js

@@ -1,4 +1,4 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Dn=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"start/option.md","lastUpdated":1673487424000}'),e={name:"start/option.md"},o=s('<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-hidden="true">#</a></h1><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-hidden="true">#</a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>播放器挂载的 <code>DOM</code> 容器</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#8
Line truncated
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Dn=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"start/option.md","lastUpdated":1673692792000}'),e={name:"start/option.md"},o=s('<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-hidden="true">#</a></h1><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-hidden="true">#</a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>播放器挂载的 <code>DOM</code> 容器</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#8
Line truncated
 <span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span></span>
 <span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// container: document.querySelector(&#39;.artplayer-app&#39;),</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
@@ -53,7 +53,7 @@ import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Dn=JSON.
 <span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">your-video-title</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>#f00</code></li></ul><p>播放器主题颜色，目前作用于 <code>进度条</code> 和 <code>高亮元素</code> 上</p>`,4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>String</code></li><li>Default: <code>#f00</code></li></ul><p>播放器主题颜色，目前用于 <code>进度条</code> 和 <code>高亮元素</code> 上</p>`,4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#ffad00</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
@@ -127,7 +127,7 @@ import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Dn=JSON.
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">hotkey</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><table><thead><tr><th>热键</th><th>描述</th></tr></thead><tbody><tr><td><code>↑</code></td><td>增加音量</td></tr><tr><td><code>↓</code></td><td>降低音量</td></tr><tr><td><code>←</code></td><td>快进 5 秒</td></tr><tr><td><code>→</code></td><td>快退 5 秒</td></tr><tr><td><code>space</code></td><td>切换播放/暂停</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效</p></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在底部控制栏里显示 <code>画中画</code> 的开关按钮</p>`,6),G=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><table><thead><tr><th>热键</th><th>描述</th></tr></thead><tbody><tr><td><code>↑</code></td><td>增加音量</td></tr><tr><td><code>↓</code></td><td>降低音量</td></tr><tr><td><code>←</code></td><td>视频快进</td></tr><tr><td><code>→</code></td><td>视频快退</td></tr><tr><td><code>space</code></td><td>切换播放/暂停</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效</p></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在底部控制栏里显示 <code>画中画</code> 的开关按钮</p>`,6),G=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line highlighted"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">pip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/start_option.md.564fb18a.lean.js

@@ -1 +1 @@
-import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const Dn=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"start/option.md","lastUpdated":1673487424000}'),e={name:"start/option.md"},o=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",7),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),d=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",7),h=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),S=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),R=n("div",{cLine truncated
+import{_ as a,c as l,o as p,a as s,b as n}from"./app.9e4cc5a4.js";const Dn=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"start/option.md","lastUpdated":1673692792000}'),e={name:"start/option.md"},o=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",7),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),d=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",7),h=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),S=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),R=n("div",{cLine truncated

docs/document/assets/start_setting.md.189105cd.js

@@ -1,4 +1,4 @@
-import{_ as l,c as p,o,b as s,d as n,a}from"./app.c821c423.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"start/setting.md","lastUpdated":1673441101000}'),e={name:"start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"start/setting.md","lastUpdated":1673441101000}'),e={name:"start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line highlighted"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>

docs/document/assets/start_setting.md.189105cd.lean.js

@@ -1 +1 @@
-import{_ as l,c as p,o,b as s,d as n,a}from"./app.c821c423.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"start/setting.md","lastUpdated":1673441101000}'),e={name:"start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",3),y=s("div",{className:"run-code"},"▶ Run Code",-1),F=a("",2),C=s("div",{className:"run-code"},"▶ Run Code",-1),A=a("",3),i=s("div",{className:"run-code"},"▶ Run Code",-1),d=a("",4),b=s("div",{className:"run-code"},"▶ Run Code",-1),u=a("",1),m=[t,c,r,D,y,F,C,A,i,d,b,u];function h(_,g,E,v,f,S){return o(),p("div",null,m)}const P=l(e,[["render",h]]);export{w as __pageData,P as default};
+import{_ as l,c as p,o,b as s,d as n,a}from"./app.9e4cc5a4.js";const w=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[{"level":2,"title":"选择列表","slug":"选择列表","link":"#选择列表","children":[]},{"level":2,"title":"列表嵌套","slug":"列表嵌套","link":"#列表嵌套","children":[]},{"level":2,"title":"切换按钮","slug":"切换按钮","link":"#切换按钮","children":[]},{"level":2,"title":"范围滑块","slug":"范围滑块","link":"#范围滑块","children":[]}],"relativePath":"start/setting.md","lastUpdated":1673441101000}'),e={name:"start/setting.md"},t=s("h1",{id:"设置面板",tabindex:"-1"},[n("设置面板 "),s("a",{class:"header-anchor",href:"#设置面板","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("需先打开设置面板，播放器默认自带四个设置项："),s("code",null,"flip"),n(", "),s("code",null,"playbackRate"),n(", "),s("code",null,"aspectRatio"),n(", "),s("code",null,"subtitleOffset")],-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",3),y=s("div",{className:"run-code"},"▶ Run Code",-1),F=a("",2),C=s("div",{className:"run-code"},"▶ Run Code",-1),A=a("",3),i=s("div",{className:"run-code"},"▶ Run Code",-1),d=a("",4),b=s("div",{className:"run-code"},"▶ Run Code",-1),u=a("",1),m=[t,c,r,D,y,F,C,A,i,d,b,u];function h(_,g,E,v,f,S){return o(),p("div",null,m)}const P=l(e,[["render",h]]);export{w as __pageData,P as default};