x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-09 20:09:57 -08:00
Code Issues Packages Projects Releases Wiki Activity

docs(core): [SITE-04] document event payloads and synchronous dispatch

Browse Source
This commit is contained in:
Harvey Zhao committed 2026-09-16 08:00:16 +08:00
1 parent 0a060e6088
commit 8d2ec199d7
96 files changed
+5823 -2965
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/document/assets/advanced_class.md.DALYnkKc.js → docs/document/assets/advanced_class.md.BqWvhhN6.js
+1 -1
View File
@@ -1,4 +1,4 @@
import{_ as e,o as t,c as n,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1789514854000}'),l={name:"advanced/class.md"};function d(h,a,p,r,k,o){return t(),n("div",null,a[0]||(a[0]=[s('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to &quot;静态属性&quot;">​</a></h1><p>这里的 <code>静态属性</code> 是指挂载在 <code>构造函数</code> 的 <code>一级属性</code>，非常少使用</p><h2 id="instances" tabindex="-1"><code>instances</code> <a class="header-anchor" href="#instances" aria-label="Permalink to &quot;`instances`&quot;">​</a></h2><p>返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span>
import{_ as e,o as t,c as n,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1789515495000}'),l={name:"advanced/class.md"};function d(h,a,p,r,k,o){return t(),n("div",null,a[0]||(a[0]=[s('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to &quot;静态属性&quot;">​</a></h1><p>这里的 <code>静态属性</code> 是指挂载在 <code>构造函数</code> 的 <code>一级属性</code>，非常少使用</p><h2 id="instances" tabindex="-1"><code>instances</code> <a class="header-anchor" href="#instances" aria-label="Permalink to &quot;`instances`&quot;">​</a></h2><p>返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
docs/document/assets/advanced_class.md.DALYnkKc.lean.js → docs/document/assets/advanced_class.md.BqWvhhN6.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as e,o as t,c as n,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1789514854000}'),l={name:"advanced/class.md"};function d(h,a,p,r,k,o){return t(),n("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",20),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=e(l,[["render",d]]);export{E as __pageData,g as default};
import{_ as e,o as t,c as n,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1789515495000}'),l={name:"advanced/class.md"};function d(h,a,p,r,k,o){return t(),n("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",20),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=e(l,[["render",d]]);export{E as __pageData,g as default};
docs/document/assets/advanced_event.md.DoIgqIU9.js → docs/document/assets/advanced_event.md.BrEo8qsb.js
+15 -3
View File
@@ -1,4 +1,4 @@
import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件：",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件：",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
@@ -27,7 +27,19 @@ import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></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-label="Permalink to &quot;\`ready\`&quot;">​</a></h2><p>当播放器首次可以播放器时触发</p>`,4),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></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="emitter-contract" tabindex="-1">订阅与同步派发 <a class="header-anchor" href="#emitter-contract" aria-label="Permalink to &quot;订阅与同步派发 {#emitter-contract}&quot;">​</a></h2><p>播放器继承 <code>Artplayer.Emitter</code>。<code>on(name, callback, ctx?)</code>、<code>once</code>、<code>off</code>、<code>emit(name, ...args)</code> 都返回当前实例；它们不是 DOM addEventListener，也不是返回 Promise 的消息队列。</p><ul><li>on 按注册顺序保存监听器，重复注册同一函数会重复调用。ctx 原样作为普通函数的 this；未传时以 undefined 调用，不自动绑定播放器，箭头函数仍使用词法 this。</li><li>emit 同步遍历派发开始时的监听器快照。过程中新增的监听器不参加这次派发；移除的普通监听器若已在快照里，仍会执行。回调参数按原引用传递，回调返回值被忽略。</li><li>once 在调用用户回调前移除，并防止嵌套派发重复消费同一注册；即使回调抛错也已消费。off(name, callback) 移除该函数的全部普通/once注册，不按ctx区分；off(name) 移除该名称的全部监听器。</li><li>回调同步抛错会终止当次后续监听器并沿调用栈传播；async回调的Promise不被等待，调用者应处理异步失败。error只是普通事件名，不具备Node EventEmitter的特殊错误规则。</li><li>e是延迟创建的监听器表，保存fn和ctx，属于可见的历史接口；新建独立Emitter时可能不存在。用on/off维护订阅，不直接修改这个内部表。数字名称与对应字符串共享对象key，Symbol是独立key；根播放器类型的旧名称重载更窄，准确入口/独立泛型Emitter可表达更多名称。</li></ul><p>手动emit只发通知，不替代播放器方法；伪造内置事件还可能触发核心内部监听器。销毁会清理核心拥有的DOM/内部订阅，但不等于清空用户事件表；用户保留实例时仍应移除不再需要的订阅。与DOM事件资源管理器 <code>art.events</code> 的区别见高级属性指南。</p><h2 id="native-event-contract" tabindex="-1">原生事件转发 <a class="header-anchor" href="#native-event-contract" aria-label="Permalink to &quot;原生事件转发 {#native-event-contract}&quot;">​</a></h2><p>以下默认媒体事件以 <code>video:</code> 为前缀转发，参数是原始Event对象，浏览器/代理决定它们何时发生：</p><p><code>abort</code>、<code>canplay</code>、<code>canplaythrough</code>、<code>durationchange</code>、<code>emptied</code>、<code>ended</code>、<code>error</code>、<code>loadeddata</code>、<code>loadedmetadata</code>、<code>loadstart</code>、<code>pause</code>、<code>play</code>、<code>playing</code>、<code>progress</code>、<code>ratechange</code>、<code>seeked</code>、<code>seeking</code>、<code>stalled</code>、<code>suspend</code>、<code>timeupdate</code>、<code>volumechange</code>、<code>waiting</code>。</p><p><code>video:error</code> 的参数不是MediaError或Error实例；需要时读取 <code>art.video.error</code>。旧类型保留 <code>video:complete</code> 和 <code>video:encrypted</code>，但默认config.events没有这两个名称，核心不会自动转发。若适配器需要扩展，须自行建立转发或在实例构造前配置事件清单；类型中有名称不证明运行时会发出事件。</p><p>全局转发来自播放器当前绑定的document/window，每次携带原始Event：</p><table tabindex="0"><thead><tr><th>前缀</th><th>默认名称</th></tr></thead><tbody><tr><td><code>document:</code></td><td>click、mouseup、keydown、touchend、touchcancel、touchmove、mousemove、pointerup、contextmenu、pointermove、visibilitychange、webkitfullscreenchange</td></tr><tr><td><code>wLine truncated
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Events, SubtitleCue } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer/runtime&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bus</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Emitter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">progress</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] }&gt;();</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> context</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { total: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">bus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;progress&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.total </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value; }, context);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">bus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;progress&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;video:error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.type));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitleBeforeUpdate&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">cues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SubtitleCue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cues.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> seekArgs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Events</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;seek&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> seekArgs;</span></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="ready" tabindex="-1"><code>ready</code> <a class="header-anchor" href="#ready" aria-label="Permalink to &quot;\`ready\`&quot;">​</a></h2><p>当播放器首次可以播放器时触发</p>`,26),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
@@ -352,4 +364,4 @@ import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;muted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="keydown" tabindex="-1"><code>keydown</code> <a class="header-anchor" href="#keydown" aria-label="Permalink to &quot;\`keydown\`&quot;">​</a></h2><p>监听来自 <code>document</code> 的 <code>keydown</code> 事件</p>`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>\n<span class="line"></span>\n<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;keydown&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.code);</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-label="Permalink to &quot;`video:canplay`&quot;">​</a></h2><p>浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-label="Permalink to &quot;`video:canplaythrough`&quot;">​</a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-label="Permalink to &quot;`video:complete`&quot;">​</a></h2><p>OfflineAudioContext 渲染完成</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-label="Permalink to &quot;`video:durationchange`&quot;">​</a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-label="Permalink to &quot;`video:emptied`&quot;">​</a></h2><p>媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它</p><h2 id="video-ended" tabindex="-1"><code>video:ended</code> <a class="header-anchor" href="#video-endedLine truncated
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="keydown" tabindex="-1"><code>keydown</code> <a class="header-anchor" href="#keydown" aria-label="Permalink to &quot;\`keydown\`&quot;">​</a></h2><p>监听来自 <code>document</code> 的 <code>keydown</code> 事件</p>`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>\n<span class="line"></span>\n<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;keydown&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.code);</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-label="Permalink to &quot;`video:canplay`&quot;">​</a></h2><p>浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-label="Permalink to &quot;`video:canplaythrough`&quot;">​</a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-label="Permalink to &quot;`video:complete`&quot;">​</a></h2><p>历史类型保留的名称，默认视频事件清单不转发此事件。视频播放结束使用 <code>video:ended</code>。</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-label="Permalink to &quot;`video:durationchange`&quot;">​</a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-label="Permalink to &quot;`video:emptied`&quot;">​</a></h2><p>媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它</p><h2 id="Line truncated
docs/document/assets/en_advanced_event.md.opkwpdYa.lean.js → docs/document/assets/advanced_event.md.BrEo8qsb.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=e(h,[["render",t]]);export{y as __pageData,o as default};
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件：",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=l(h,[["render",t]]);export{o as __pageData,y as default};
docs/document/assets/advanced_global.md.CsVWW5DS.js → docs/document/assets/advanced_global.md.7lzYspte.js
+1 -1
View File
@@ -1,4 +1,4 @@
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),p={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('<h1 id="全局属性" tabindex="-1">全局属性 <a class="header-anchor" href="#全局属性" aria-label="Permalink to &quot;全局属性&quot;">​</a></h1><p>这里的 <code>全局属性</code> 也是指挂载在 <code>构造函数</code> 的 <code>一级属性</code>，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到</p><h2 id="global-contract" tabindex="-1">修改范围与生效时机 <a class="header-anchor" href="#global-contract" aria-label="Permalink to &quot;修改范围与生效时机 {#global-contract}&quot;">​</a></h2><p>这些字段属于构造函数，供同一份 Artplayer 模块的实例共享；它们不是每个实例的 option，也不会自动校验赋值。建议在创建实例前配置。播放器有的地方在初始化时读取，有的地方在事件触发时读取；修改字段不会重建已有菜单、监听器或已经开始的定时器。不同版本/副本的构造函数不共享这些字段。</p><h3 id="global-initialization" tabindex="-1">初始化与界面 <a class="header-anchor" href="#global-initialization" aria-label="Permalink to &quot;初始化与界面 {#global-initialization}&quot;">​</a></h3><table tabindex="0"><thead><tr><th>字段</th><th>默认值与读取时机</th></tr></thead><tbody><tr><td><code>STYLE</code></td><td>构建内嵌的 CSS 字符串。导入时已注入 artplayer-style；之后修改 STYLE 本身不会更新该 style 节点</td></tr><tr><td><code>DEBUG</code></td><td>false；构造时决定是否添加日志监听器。之后设为false不会移除已安装的日志</td></tr><tr><td><code>CONTEXTMENU</code></td><td>true；桌面打开菜单时检查，不会删除菜单内容，也不拦截手动设置 contextmenu.show</td></tr><tr><td><code>PLAYBACK_RATE</code> / <code>ASPECT_RATIO</code> / <code>FLIP</code></td><td>下方各节列出默认数组。构建设置项/右键项时读取；改数组不会更新已有条目</td></tr><tr><td><code>SETTING_ITEM_WIDTH</code></td><td>200px；创建内置子菜单配置时读取，显式条目宽度可覆盖</td></tr><tr><td><code>SETTING_ITEM_HEIGHT</code></td><td>35px；创建条目/返回行与面板布局时读取，已有节点高度不会仅因字段修改就重写</td></tr><tr><td><code>SETTING_WIDTH</code></td><td>250px；面板布局时读取根宽度，实际宽度仍受容器约束</td></tr><tr><td><code>USE_RAF</code></td><td>false；初始化时决定是否安装 raf 循环及进度监听分支，不是可热切换的开关。raf 播放中发出，不代替原生媒体事件</td></tr><tr><td><code>LOG_VERSION</code></td><td>true；模块导入约100ms后的回调读取；不是每个实例创建都打印</td></tr><tr><td><code>REMOVE_SRC_WHEN_DESTROY</code></td><td>true；每次destroy读取。false只跳过removeAttribute(&#39;src&#39;)/load()，监听器、请求、UI和插件生命周期仍会清理；保留DOM是单独的destroy(false)参数</td></tr></tbody></table><h3 id="global-timing" tabindex="-1">定时与交互 <a class="header-anchor" href="#global-timing" aria-label="Permalink to &quot;定时与交互 {#global-timing}&quot;">​</a></h3><p>时间默认以毫秒为单位；已排队的任务保留排队时的延迟。</p><table tabindex="0"><thead><tr><th>字段</th><th>默认值与读取时机</th></tr></thead><tbody><tr><td><code>NOTICE_TIME</code></td><td>2000；显示通知时读取，不重新安排已有通知</td></tr><tr><td><code>RESIZE_TIME</code></td><td>200；每次resize/orientation通知重新排队时读取，连续通知取消前次任务，属于trailing防抖</td></tr><tr><td><code>SCROLL_TIME</code> / <code>SCROLL_GAP</code></td><td>200 / 50px；SCROLL_TIME在事件系统初始化时捕获，SCROLL_GAP在可处理的滚动事件中读取。leading节流产生view布尔事件；原始事件是window:scroll</td></tr><tr><td><code>CONTROL_HIDE_TIME</code></td><td>3000；video:timeupdate中比较上次显示时间。仅满足正在播放、未操作设置/输入/控件等条件时隐藏，不是独立定时器</td></tr><tr><td><code>DBCLICK_TIME</code></td><td>300；每次视频点击统计时间窗口，不延迟第一次单击以等待第二击</td></tr><tr><td><code>DBCLICK_FULLSCREEN</code> / <code>MOBILE_DBCLICK_PLAY</code> / <code>MOBILE_CLICK_PLAY</code></td><td>true / true / false；每次视频点击读取，分别控制桌面双击全屏、移动端双击/单击播放；移动端仍受锁定状态约束</td></tr><tr><td><code>FAST_FORWARD_TIME</code> / <code>FAST_FORWARD_VALUE</code></td><td>1000 / 3倍；长按开始排队时读取时间，触发时读Line truncated
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1789515495000}'),p={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('<h1 id="全局属性" tabindex="-1">全局属性 <a class="header-anchor" href="#全局属性" aria-label="Permalink to &quot;全局属性&quot;">​</a></h1><p>这里的 <code>全局属性</code> 也是指挂载在 <code>构造函数</code> 的 <code>一级属性</code>，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到</p><h2 id="global-contract" tabindex="-1">修改范围与生效时机 <a class="header-anchor" href="#global-contract" aria-label="Permalink to &quot;修改范围与生效时机 {#global-contract}&quot;">​</a></h2><p>这些字段属于构造函数，供同一份 Artplayer 模块的实例共享；它们不是每个实例的 option，也不会自动校验赋值。建议在创建实例前配置。播放器有的地方在初始化时读取，有的地方在事件触发时读取；修改字段不会重建已有菜单、监听器或已经开始的定时器。不同版本/副本的构造函数不共享这些字段。</p><h3 id="global-initialization" tabindex="-1">初始化与界面 <a class="header-anchor" href="#global-initialization" aria-label="Permalink to &quot;初始化与界面 {#global-initialization}&quot;">​</a></h3><table tabindex="0"><thead><tr><th>字段</th><th>默认值与读取时机</th></tr></thead><tbody><tr><td><code>STYLE</code></td><td>构建内嵌的 CSS 字符串。导入时已注入 artplayer-style；之后修改 STYLE 本身不会更新该 style 节点</td></tr><tr><td><code>DEBUG</code></td><td>false；构造时决定是否添加日志监听器。之后设为false不会移除已安装的日志</td></tr><tr><td><code>CONTEXTMENU</code></td><td>true；桌面打开菜单时检查，不会删除菜单内容，也不拦截手动设置 contextmenu.show</td></tr><tr><td><code>PLAYBACK_RATE</code> / <code>ASPECT_RATIO</code> / <code>FLIP</code></td><td>下方各节列出默认数组。构建设置项/右键项时读取；改数组不会更新已有条目</td></tr><tr><td><code>SETTING_ITEM_WIDTH</code></td><td>200px；创建内置子菜单配置时读取，显式条目宽度可覆盖</td></tr><tr><td><code>SETTING_ITEM_HEIGHT</code></td><td>35px；创建条目/返回行与面板布局时读取，已有节点高度不会仅因字段修改就重写</td></tr><tr><td><code>SETTING_WIDTH</code></td><td>250px；面板布局时读取根宽度，实际宽度仍受容器约束</td></tr><tr><td><code>USE_RAF</code></td><td>false；初始化时决定是否安装 raf 循环及进度监听分支，不是可热切换的开关。raf 播放中发出，不代替原生媒体事件</td></tr><tr><td><code>LOG_VERSION</code></td><td>true；模块导入约100ms后的回调读取；不是每个实例创建都打印</td></tr><tr><td><code>REMOVE_SRC_WHEN_DESTROY</code></td><td>true；每次destroy读取。false只跳过removeAttribute(&#39;src&#39;)/load()，监听器、请求、UI和插件生命周期仍会清理；保留DOM是单独的destroy(false)参数</td></tr></tbody></table><h3 id="global-timing" tabindex="-1">定时与交互 <a class="header-anchor" href="#global-timing" aria-label="Permalink to &quot;定时与交互 {#global-timing}&quot;">​</a></h3><p>时间默认以毫秒为单位；已排队的任务保留排队时的延迟。</p><table tabindex="0"><thead><tr><th>字段</th><th>默认值与读取时机</th></tr></thead><tbody><tr><td><code>NOTICE_TIME</code></td><td>2000；显示通知时读取，不重新安排已有通知</td></tr><tr><td><code>RESIZE_TIME</code></td><td>200；每次resize/orientation通知重新排队时读取，连续通知取消前次任务，属于trailing防抖</td></tr><tr><td><code>SCROLL_TIME</code> / <code>SCROLL_GAP</code></td><td>200 / 50px；SCROLL_TIME在事件系统初始化时捕获，SCROLL_GAP在可处理的滚动事件中读取。leading节流产生view布尔事件；原始事件是window:scroll</td></tr><tr><td><code>CONTROL_HIDE_TIME</code></td><td>3000；video:timeupdate中比较上次显示时间。仅满足正在播放、未操作设置/输入/控件等条件时隐藏，不是独立定时器</td></tr><tr><td><code>DBCLICK_TIME</code></td><td>300；每次视频点击统计时间窗口，不延迟第一次单击以等待第二击</td></tr><tr><td><code>DBCLICK_FULLSCREEN</code> / <code>MOBILE_DBCLICK_PLAY</code> / <code>MOBILE_CLICK_PLAY</code></td><td>true / true / false；每次视频点击读取，分别控制桌面双击全屏、移动端双击/单击播放；移动端仍受锁定状态约束</td></tr><tr><td><code>FAST_FORWARD_TIME</code> / <code>FAST_FORWARD_VALUE</code></td><td>1000 / 3倍；长按开始排队时读取时间，触发时读Line truncated
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
docs/document/assets/advanced_global.md.CsVWW5DS.lean.js → docs/document/assets/advanced_global.md.7lzYspte.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),p={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",13),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1789515495000}'),p={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",13),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
docs/document/assets/app.CEYmLzTJ.js → docs/document/assets/app.i7OqoAoJ.js
+1 -1
View File
@@ -1 +1 @@
import{t as p}from"./chunks/theme.dNKqr9z1.js";import{R as s,a6 as i,a7 as u,a8 as c,a9 as l,aa as f,ab as d,ac as m,ad as h,ae as g,af as A,d as v,u as y,v as C,s as P,ag as b,ah as w,ai as R,aj as E}from"./chunks/framework.xxfEszSJ.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=D(),a=j();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return A(S)}function D(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
import{t as p}from"./chunks/theme.5cmve1kz.js";import{R as s,a6 as i,a7 as u,a8 as c,a9 as l,aa as f,ab as d,ac as m,ad as h,ae as g,af as A,d as v,u as y,v as C,s as P,ag as b,ah as w,ai as R,aj as E}from"./chunks/framework.xxfEszSJ.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=D(),a=j();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return A(S)}function D(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
docs/document/assets/chunks/theme.dNKqr9z1.js → docs/document/assets/chunks/theme.5cmve1kz.js
+1 -1
View File
@@ -1 +1 @@
import{d as k,c as h,r as p,n as A,o as i,a as ee,t as C,b as P,w as f,T as we,e as g,_ as V,u as Re,i as it,f as lt,g as he,h as S,j as d,k as c,l as te,m as Pe,p as T,q as J,s as fe,v as Q,x as Me,y as Ne,z as ct,A as ut,F as H,B as z,C as Z,D as We,E as ve,G as y,H as W,I as Ke,J as me,K as Y,L as _e,M as dt,N as Je,O as pt,P as Ie,Q as xe,R as ge,S as ht,U as ft,V as vt,W as Fe,X as mt,Y as Xe,Z as _t,$ as gt,a0 as Ye,a1 as Qe,a2 as kt,a3 as bt,a4 as $t,a5 as yt}from"./framework.xxfEszSJ.js";const Pt=k({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(n){return(e,t)=>(i(),h("span",{class:A(["VPBadge",e.type])},[p(e.$slots,"default",{},()=>[ee(C(e.text),1)])],2))}}),Lt={key:0,class:"VPBackdrop"},Vt=k({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(n){return(e,t)=>(i(),P(we,{name:"fade"},{default:f(()=>[e.show?(i(),h("div",Lt)):g("",!0)]),_:1}))}}),St=V(Vt,[["__scopeId","data-v-b2600058"]]),M=Re;function Tt(n,e){let t,s=!1;return()=>{t&&clearTimeout(t),s?t=setTimeout(n,e):(n(),(s=!0)&&setTimeout(()=>s=!1,e))}}function Le(n){return n.startsWith("/")?n:`/${n}`}function Ce(n){const{pathname:e,search:t,hash:s,protocol:o}=new URL(n,"http://a.com");if(it(n)||n.startsWith("#")||!o.startsWith("http")||!lt(e))return n;const{site:a}=M(),r=e.endsWith("/")||e.endsWith(".html")?n:n.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,a.value.cleanUrls?"":".html")}${t}${s}`);return he(r)}function ae({correspondingLink:n=!1}={}){const{site:e,localeIndex:t,page:s,theme:o,hash:a}=M(),r=S(()=>{var u,v;return{label:(u=e.value.locales[t.value])==null?void 0:u.label,link:((v=e.value.locales[t.value])==null?void 0:v.link)||(t.value==="root"?"/":`/${t.value}/`)}});return{localeLinks:S(()=>Object.entries(e.value.locales).flatMap(([u,v])=>r.value.label===v.label?[]:{text:v.label,link:wt(v.link||(u==="root"?"/":`/${u}/`),o.value.i18nRouting!==!1&&n,s.value.relativePath.slice(r.value.link.length-1),!e.value.cleanUrls)+a.value})),currentLang:r}}function wt(n,e,t,s){return e?n.replace(/\/$/,"")+Le(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):n}const Mt={class:"NotFound"},Nt={class:"code"},It={class:"title"},Ct={class:"quote"},At={class:"action"},Ht=["href","aria-label"],Bt=k({__name:"NotFound",setup(n){const{theme:e}=M(),{currentLang:t}=ae();return(s,o)=>{var a,r,l,u,v;return i(),h("div",Mt,[d("p",Nt,C(((a=c(e).notFound)==null?void 0:a.code)??"404"),1),d("h1",It,C(((r=c(e).notFound)==null?void 0:r.title)??"PAGE NOT FOUND"),1),o[0]||(o[0]=d("div",{class:"divider"},null,-1)),d("blockquote",Ct,C(((l=c(e).notFound)==null?void 0:l.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",At,[d("a",{class:"link",href:c(he)(c(t).link),"aria-label":((u=c(e).notFound)==null?void 0:u.linkLabel)??"go to home"},C(((v=c(e).notFound)==null?void 0:v.linkText)??"Take me home"),9,Ht)])])}}}),Et=V(Bt,[["__scopeId","data-v-93fd8736"]]);function Ze(n,e){if(Array.isArray(n))return le(n);if(n==null)return[];e=Le(e);const t=Object.keys(n).sort((o,a)=>a.split("/").length-o.split("/").length).find(o=>e.startsWith(Le(o))),s=t?n[t]:[];return Array.isArray(s)?le(s):le(s.items,s.base)}function Ot(n){const e=[];let t=0;for(const s in n){const o=n[s];if(o.items){t=e.push(o);continue}e[t]||e.push({items:[]}),e[t].items.push(o)}return e}function Dt(n){const e=[];function t(s){for(const o of s)o.text&&o.link&&e.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&t(o.items)}return t(n),e}function Ve(n,e){return Array.isArray(e)?e.some(t=>Ve(n,t)):te(n,e.link)?!0:e.items?Ve(n,e.items):!1}function le(n,e){return[...n].map(t=>{const s={...t},o=s.base||e;return o&&s.link&&(s.link=o+s.link),s.items&&(s.items=le(s.items,o)),s})}function x(){const{frontmatter:n,page:e,theme:t}=M(),s=Pe("(min-width: 960px)"),o=T(!1),a=S(()=>{const N=t.value.sidebar,w=e.value.relativePath;return N?Ze(N,w):[]}),r=T(a.value);J(a,(N,w)=>{JSON.stringify(N)!==JSON.stringify(w)&&(r.value=a.value)});const l=S(()=>n.value.sidebar!==!1&&r.value.length>0&&n.value.layout!=="home"),u=S(()=>v?n.value.aside==null?t.value.aside==="left":n.value.aside==="left":!1),v=S(()=>n.value.layout==="home"?!1:n.value.aside!=null?!!n.value.aside:t.value.aside!==!1),_=S(()=>l.value&&s.value),m=S(()=>l.value?Ot(r.value):[]);function L(){o.value=!0}function b(){o.value=!1}function $(){o.value?b():L()}return{isOpen:o,sidebar:r,sidebarGroups:m,hasSidebar:l,hasAside:v,leftAside:u,isSidebarEnabled:_,open:L,close:b,toggle:$}}function Ft(n,e){let t;fe(()=>{t=n.value?document.activeElement:void 0}),Q(()=>{window.addEventListener("keyup",s)}),Me(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&n.value&&(e(),t==null||t.focus())}}function zt(n){const{page:e,hash:t}=M(),s=T(!1),o=S(()=>n.value.collapsed!=null),a=S(()=>!!n.value.link),r=T(!1),l=()=>{r.value=te(e.value.relativePath,n.value.link)};J([e,n,t],l),Q(l);const u=S(()=>r.value?!0:n.value.items?Ve(e.value.relativePath,n.value.iLine truncated
import{d as k,c as h,r as p,n as A,o as i,a as ee,t as C,b as P,w as f,T as we,e as g,_ as V,u as Re,i as it,f as lt,g as he,h as S,j as d,k as c,l as te,m as Pe,p as T,q as J,s as fe,v as Q,x as Me,y as Ne,z as ct,A as ut,F as H,B as z,C as Z,D as We,E as ve,G as y,H as W,I as Ke,J as me,K as Y,L as _e,M as dt,N as Je,O as pt,P as Ie,Q as xe,R as ge,S as ht,U as ft,V as vt,W as Fe,X as mt,Y as Xe,Z as _t,$ as gt,a0 as Ye,a1 as Qe,a2 as kt,a3 as bt,a4 as $t,a5 as yt}from"./framework.xxfEszSJ.js";const Pt=k({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(n){return(e,t)=>(i(),h("span",{class:A(["VPBadge",e.type])},[p(e.$slots,"default",{},()=>[ee(C(e.text),1)])],2))}}),Lt={key:0,class:"VPBackdrop"},Vt=k({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(n){return(e,t)=>(i(),P(we,{name:"fade"},{default:f(()=>[e.show?(i(),h("div",Lt)):g("",!0)]),_:1}))}}),St=V(Vt,[["__scopeId","data-v-b2600058"]]),M=Re;function Tt(n,e){let t,s=!1;return()=>{t&&clearTimeout(t),s?t=setTimeout(n,e):(n(),(s=!0)&&setTimeout(()=>s=!1,e))}}function Le(n){return n.startsWith("/")?n:`/${n}`}function Ce(n){const{pathname:e,search:t,hash:s,protocol:o}=new URL(n,"http://a.com");if(it(n)||n.startsWith("#")||!o.startsWith("http")||!lt(e))return n;const{site:a}=M(),r=e.endsWith("/")||e.endsWith(".html")?n:n.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,a.value.cleanUrls?"":".html")}${t}${s}`);return he(r)}function ae({correspondingLink:n=!1}={}){const{site:e,localeIndex:t,page:s,theme:o,hash:a}=M(),r=S(()=>{var u,v;return{label:(u=e.value.locales[t.value])==null?void 0:u.label,link:((v=e.value.locales[t.value])==null?void 0:v.link)||(t.value==="root"?"/":`/${t.value}/`)}});return{localeLinks:S(()=>Object.entries(e.value.locales).flatMap(([u,v])=>r.value.label===v.label?[]:{text:v.label,link:wt(v.link||(u==="root"?"/":`/${u}/`),o.value.i18nRouting!==!1&&n,s.value.relativePath.slice(r.value.link.length-1),!e.value.cleanUrls)+a.value})),currentLang:r}}function wt(n,e,t,s){return e?n.replace(/\/$/,"")+Le(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):n}const Mt={class:"NotFound"},Nt={class:"code"},It={class:"title"},Ct={class:"quote"},At={class:"action"},Ht=["href","aria-label"],Bt=k({__name:"NotFound",setup(n){const{theme:e}=M(),{currentLang:t}=ae();return(s,o)=>{var a,r,l,u,v;return i(),h("div",Mt,[d("p",Nt,C(((a=c(e).notFound)==null?void 0:a.code)??"404"),1),d("h1",It,C(((r=c(e).notFound)==null?void 0:r.title)??"PAGE NOT FOUND"),1),o[0]||(o[0]=d("div",{class:"divider"},null,-1)),d("blockquote",Ct,C(((l=c(e).notFound)==null?void 0:l.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",At,[d("a",{class:"link",href:c(he)(c(t).link),"aria-label":((u=c(e).notFound)==null?void 0:u.linkLabel)??"go to home"},C(((v=c(e).notFound)==null?void 0:v.linkText)??"Take me home"),9,Ht)])])}}}),Et=V(Bt,[["__scopeId","data-v-93fd8736"]]);function Ze(n,e){if(Array.isArray(n))return le(n);if(n==null)return[];e=Le(e);const t=Object.keys(n).sort((o,a)=>a.split("/").length-o.split("/").length).find(o=>e.startsWith(Le(o))),s=t?n[t]:[];return Array.isArray(s)?le(s):le(s.items,s.base)}function Ot(n){const e=[];let t=0;for(const s in n){const o=n[s];if(o.items){t=e.push(o);continue}e[t]||e.push({items:[]}),e[t].items.push(o)}return e}function Dt(n){const e=[];function t(s){for(const o of s)o.text&&o.link&&e.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&t(o.items)}return t(n),e}function Ve(n,e){return Array.isArray(e)?e.some(t=>Ve(n,t)):te(n,e.link)?!0:e.items?Ve(n,e.items):!1}function le(n,e){return[...n].map(t=>{const s={...t},o=s.base||e;return o&&s.link&&(s.link=o+s.link),s.items&&(s.items=le(s.items,o)),s})}function x(){const{frontmatter:n,page:e,theme:t}=M(),s=Pe("(min-width: 960px)"),o=T(!1),a=S(()=>{const N=t.value.sidebar,w=e.value.relativePath;return N?Ze(N,w):[]}),r=T(a.value);J(a,(N,w)=>{JSON.stringify(N)!==JSON.stringify(w)&&(r.value=a.value)});const l=S(()=>n.value.sidebar!==!1&&r.value.length>0&&n.value.layout!=="home"),u=S(()=>v?n.value.aside==null?t.value.aside==="left":n.value.aside==="left":!1),v=S(()=>n.value.layout==="home"?!1:n.value.aside!=null?!!n.value.aside:t.value.aside!==!1),_=S(()=>l.value&&s.value),m=S(()=>l.value?Ot(r.value):[]);function L(){o.value=!0}function b(){o.value=!1}function $(){o.value?b():L()}return{isOpen:o,sidebar:r,sidebarGroups:m,hasSidebar:l,hasAside:v,leftAside:u,isSidebarEnabled:_,open:L,close:b,toggle:$}}function Ft(n,e){let t;fe(()=>{t=n.value?document.activeElement:void 0}),Q(()=>{window.addEventListener("keyup",s)}),Me(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&n.value&&(e(),t==null||t.focus())}}function zt(n){const{page:e,hash:t}=M(),s=T(!1),o=S(()=>n.value.collapsed!=null),a=S(()=>!!n.value.link),r=T(!1),l=()=>{r.value=te(e.value.relativePath,n.value.link)};J([e,n,t],l),Q(l);const u=S(()=>r.value?!0:n.value.items?Ve(e.value.relativePath,n.value.iLine truncated
docs/document/assets/chunks/virtual_search-data.Co_jubll.js
+2068
View File
File diff suppressed because it is too large. Load diff
docs/document/assets/chunks/virtual_search-data.D-OqA3Rq.js
-2010
View File
File diff suppressed because it is too large. Load diff
docs/document/assets/en_advanced_class.md.CRmwkif4.js → docs/document/assets/en_advanced_class.md.ByfIplWx.js
+1 -1
View File
@@ -1,4 +1,4 @@
import{_ as a,o as t,c as n,ak as s,j as e}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1789514854000}'),r={name:"en/advanced/class.md"};function l(d,i,h,o,p,c){return t(),n("div",null,i[0]||(i[0]=[s('<h1 id="static-properties" tabindex="-1">Static Properties <a class="header-anchor" href="#static-properties" aria-label="Permalink to &quot;Static Properties&quot;">​</a></h1><p>Here, <code>static properties</code> refer to the <code>first-level properties</code> attached to the <code>constructor</code>, which are rarely used.</p><h2 id="instances" tabindex="-1"><code>instances</code> <a class="header-anchor" href="#instances" aria-label="Permalink to &quot;`instances`&quot;">​</a></h2><p>Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.</p>',4),e("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span>
import{_ as a,o as t,c as n,ak as s,j as e}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1789515495000}'),r={name:"en/advanced/class.md"};function l(d,i,h,o,p,c){return t(),n("div",null,i[0]||(i[0]=[s('<h1 id="static-properties" tabindex="-1">Static Properties <a class="header-anchor" href="#static-properties" aria-label="Permalink to &quot;Static Properties&quot;">​</a></h1><p>Here, <code>static properties</code> refer to the <code>first-level properties</code> attached to the <code>constructor</code>, which are rarely used.</p><h2 id="instances" tabindex="-1"><code>instances</code> <a class="header-anchor" href="#instances" aria-label="Permalink to &quot;`instances`&quot;">​</a></h2><p>Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.</p>',4),e("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
docs/document/assets/en_advanced_class.md.CRmwkif4.lean.js → docs/document/assets/en_advanced_class.md.ByfIplWx.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as a,o as t,c as n,ak as s,j as e}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1789514854000}'),r={name:"en/advanced/class.md"};function l(d,i,h,o,p,c){return t(),n("div",null,i[0]||(i[0]=[s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",6),e("div",{className:"run-code"},"▶ Run Code",-1),s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",20),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=a(r,[["render",l]]);export{u as __pageData,g as default};
import{_ as a,o as t,c as n,ak as s,j as e}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1789515495000}'),r={name:"en/advanced/class.md"};function l(d,i,h,o,p,c){return t(),n("div",null,i[0]||(i[0]=[s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",6),e("div",{className:"run-code"},"▶ Run Code",-1),s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",20),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",3),e("div",{className:"run-code"},"▶ Run Code",-1),s("",4),e("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=a(r,[["render",l]]);export{u as __pageData,g as default};
docs/document/assets/en_advanced_event.md.opkwpdYa.js → docs/document/assets/en_advanced_event.md.DdBNH7yd.js
+15 -3
View File
@@ -1,4 +1,4 @@
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
@@ -27,7 +27,19 @@ import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></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">For a complete list of events, please refer to:</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-label="Permalink to &quot;\`ready\`&quot;">​</a></h2><p>Triggered when the player is ready for the first time.</p>`,4),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onReady);</span></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">For a complete list of events, please refer to:</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="emitter-contract" tabindex="-1">Subscription and synchronous dispatch <a class="header-anchor" href="#emitter-contract" aria-label="Permalink to &quot;Subscription and synchronous dispatch {#emitter-contract}&quot;">​</a></h2><p>Players inherit <code>Artplayer.Emitter</code>. <code>on(name, callback, ctx?)</code>, <code>once</code>, <code>off</code>, and <code>emit(name, ...args)</code> all return the current instance. They are neither DOM addEventListener nor a Promise-based message queue.</p><ul><li>on keeps registration order. Registering the same function twice invokes it twice. ctx is passed unchanged as an ordinary function&#39;s this; omission means undefined, not an automatic player binding. Arrows retain their lexical this.</li><li>emit synchronously walks a snapshot taken at dispatch start. Added listeners wait until a later dispatch; removed ordinary listeners already in the snapshot still run. Arguments retain their references; callback return values are ignored.</li><li>once removes itself before invoking the callback and prevents nested dispatch from consuming the same registration twice, even if the callback throws. off(name, callback) removes all ordinary/once registrations for that function regardless of ctx; off(name) removes every listener for the name.</li><li>A synchronous throw stops subsequent listeners in that dispatch and propagates through the call stack. Async callbacks are not awaited; handle their failures yourself. The name error has no special Node EventEmitter behavior.</li><li>e is the lazily created registry of fn/ctx records and remains a visible historical interface. A fresh standalone Emitter may not have it yet. Use on/off rather than editing the table. Numeric keys share their string-equivalent channel; symbols have separate keys. The root player&#39;s historical overloads accept narrower names than the accurate entry or a generic Emitter.</li></ul><p>Manual emit only sends a notification; it does not replace player methods. Emitting built-in names may also trigger internal listeners. Destruction releases core-owned DOM/internal subscriptions but does not clear every user registration; remove unwanted subscriptions if you retain the instance. The advanced-properties guide explains the separate DOM listener manager, art.events.</p><h2 id="native-event-contract" tabindex="-1">Native forwarding <a class="header-anchor" href="#native-event-contract" aria-label="Permalink to &quot;Native forwarding {#native-event-contract}&quot;">​</a></h2><p>The default media events below are forwarded with a <code>video:</code> prefix and the original Event object. The browser or proxy determines when they occur:</p><p><code>abort</code>, <code>canplay</code>, <code>canplaythrough</code>, <code>durationchange</code>, <code>emptied</code>, <code>ended</code>, <code>error</code>, <code>loadeddata</code>, <code>loadedmetadata</code>, <code>loadstart</code>, <code>pause</code>, <code>play</code>, <code>playing</code>, <code>progress</code>, <code>ratechange</code>, <code>seeked</code>, <code>seeking</code>, <code>stalled</code>, <code>suspend</code>, <code>timeupdate</code>, <code>volumechange</code>, <code>waiting</code>.</p><p>The <code>video:error</code> argument is not a MediaError or Error instance; inspect <code>art.video.error</code> when needed. Historical types include <code>video:complete</code> and <code>video:encrypted</code>, but neither appears in the default config.events, so the core does not automatically forward them. An adapter must provide forwarding or configure the event inventory before construction. A declared name does not prove an event is produced at runtime.</p><p>Global forwarding uses the player&#39;s currently bound document/window and passes the original Event:</p><table tabindex="0"><thead><tr><thLine truncated
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Events, SubtitleCue } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer/runtime&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bus</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Emitter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">progress</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] }&gt;();</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> context</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { total: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">bus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;progress&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.total </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value; }, context);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">bus.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;progress&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;video:error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.type));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitleBeforeUpdate&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">cues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SubtitleCue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cues.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> seekArgs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Events</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;seek&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> seekArgs;</span></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="ready" tabindex="-1"><code>ready</code> <a class="header-anchor" href="#ready" aria-label="Permalink to &quot;\`ready\`&quot;">​</a></h2><p>Triggered when the player is ready for the first time.</p>`,26),s("div",{className:"run-code"},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
@@ -352,4 +364,4 @@ import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;muted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="keydown" tabindex="-1"><code>keydown</code> <a class="header-anchor" href="#keydown" aria-label="Permalink to &quot;\`keydown\`&quot;">​</a></h2><p>Listens for the <code>keydown</code> event from the <code>document</code>.</p>`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>\n<span class="line"></span>\n<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;keydown&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.code);</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-label="Permalink to &quot;`video:canplay`&quot;">​</a></h2><p>The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-label="Permalink to &quot;`video:canplaythrough`&quot;">​</a></h2><p>The browser estimates it can play the media through to the end without stopping for buffering.</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-label="Permalink to &quot;`video:complete`&quot;">​</a></h2><p>The OfflineAudioContext rendering is complete.</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-label="Permalink to &quot;`video:durationchange`&quot;">​</a></h2><p>Triggered when the value of the <code>duration</code> property changes.</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-label="Permalink to &quot;`video:emptied`&quot;">​</a></h2><p>The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the <code>load()</code> method is called to reload it.</p><Line truncated
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="keydown" tabindex="-1"><code>keydown</code> <a class="header-anchor" href="#keydown" aria-label="Permalink to &quot;\`keydown\`&quot;">​</a></h2><p>Listens for the <code>keydown</code> event from the <code>document</code>.</p>`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>\n<span class="line"></span>\n<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;keydown&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.code);</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></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="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-label="Permalink to &quot;`video:canplay`&quot;">​</a></h2><p>The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-label="Permalink to &quot;`video:canplaythrough`&quot;">​</a></h2><p>The browser estimates it can play the media through to the end without stopping for buffering.</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-label="Permalink to &quot;`video:complete`&quot;">​</a></h2><p>Historical declared name; not forwarded by the default video event inventory. Use <code>video:ended</code> for media reaching its end.</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-label="Permalink to &quot;`video:durationchange`&quot;">​</a></h2><p>Triggered when the value of the <code>duration</code> property changes.</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-label="Permalink to &quot;`video:emptied`&quot;">​</a></h2><p>The media has become empty; for example, this event is sent when the media has already been loadeLine truncated
docs/document/assets/advanced_event.md.DoIgqIU9.lean.js → docs/document/assets/en_advanced_event.md.DdBNH7yd.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件：",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=l(h,[["render",t]]);export{y as __pageData,o as default};
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=e(t,[["render",h]]);export{g as __pageData,y as default};
docs/document/assets/en_advanced_global.md.DKvU75IF.js → docs/document/assets/en_advanced_global.md.OawZ0vlZ.js
+1 -1
View File
@@ -1,4 +1,4 @@
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s('<h1 id="global-properties" tabindex="-1">Global Properties <a class="header-anchor" href="#global-properties" aria-label="Permalink to &quot;Global Properties&quot;">​</a></h1><p>The <code>global properties</code> here refer to the <code>top-level properties</code> mounted on the <code>constructor</code>. All property names are in uppercase. These are subject to change in the future and are rarely used.</p><h2 id="global-contract" tabindex="-1">Scope and effective timing <a class="header-anchor" href="#global-contract" aria-label="Permalink to &quot;Scope and effective timing {#global-contract}&quot;">​</a></h2><p>These fields belong to the constructor and are shared by instances from that Artplayer module. They are not per-instance options and assignments are not automatically validated. Configure them before constructing players when possible. Some consumers read them at initialization, others at event time; changing a field does not rebuild existing menus, listeners, or pending timers. Separate module copies have separate constructors and fields.</p><h3 id="global-initialization" tabindex="-1">Initialization and UI <a class="header-anchor" href="#global-initialization" aria-label="Permalink to &quot;Initialization and UI {#global-initialization}&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field</th><th>Default and reading point</th></tr></thead><tbody><tr><td><code>STYLE</code></td><td>Embedded CSS text. Import has already injected artplayer-style; assigning STYLE later does not update that node</td></tr><tr><td><code>DEBUG</code></td><td>false; constructor decides whether to install logging listeners. Setting false later does not remove them</td></tr><tr><td><code>CONTEXTMENU</code></td><td>true; checked when opening the desktop menu. Does not remove entries or prevent setting contextmenu.show manually</td></tr><tr><td><code>PLAYBACK_RATE</code> / <code>ASPECT_RATIO</code> / <code>FLIP</code></td><td>Default arrays are listed below. Read when constructing setting/context-menu entries; changing them does not refresh existing entries</td></tr><tr><td><code>SETTING_ITEM_WIDTH</code></td><td>200px; read when constructing built-in submenu options. Explicit item widths can override it</td></tr><tr><td><code>SETTING_ITEM_HEIGHT</code></td><td>35px; read when creating items/back rows and laying out panels. Existing node heights are not rewritten merely by assigning this field</td></tr><tr><td><code>SETTING_WIDTH</code></td><td>250px; root width read during panel layout, still constrained by the container</td></tr><tr><td><code>USE_RAF</code></td><td>false; initialization selects the raf loop and progress listener branch. Not a live mode toggle; raf emits during playback and does not replace native media events</td></tr><tr><td><code>LOG_VERSION</code></td><td>true; read by the callback about 100ms after module import, not once per player construction</td></tr><tr><td><code>REMOVE_SRC_WHEN_DESTROY</code></td><td>true; read by each destroy call. false only skips removeAttribute(&#39;src&#39;)/load(); listeners, requests, UI, and plugin lifecycle still clean up. Preserving DOM uses the separate destroy(false) argument</td></tr></tbody></table><h3 id="global-timing" tabindex="-1">Scheduling and interaction <a class="header-anchor" href="#global-timing" aria-label="Permalink to &quot;Scheduling and interaction {#global-timing}&quot;">​</a></h3><p>Time values below use milliseconds unless stated otherwise. Already queued work retains the delay used when scheduled.</p><table tabindex="0"><thead><tr><th>Field</th><th>Default and reading point</th></tr></thead><tbody><tr><td><code>NOTICE_TIME</code></td><td>2000; read when showing a notice, without rescheduling an existing one</td></tr><tr><td><code>RESIZE_TIME</code></td><td>200; read when resize/orientation queues a new task, canceling the previous task. This is trailing debounce</td></tr><tr><td><code>SCROLL_TIME</code> / <code>SCROLL_GAP</code></td><td>200 / 50px. The delay is captured when the event system initializes; the gap is read on accepted scroll events. Leading throttle emits a boolean view event; the raw event is window:scroll</td></tr><tr><td><code>CONTROL_HIDE_TIME</code></td><td>3000; checked against last-show time in video:timeupdate, while playing and without active setting/input/control interaction. Not a standalone timer</td></tr><tr><td><code>DBCLICK_TIME</code></td><td>300; click-count window read on each video click. The first single click is not delayed while awaiting another</td></tr><tr><td><code>DBCLICK_FULLSCREEN</code> / <code>MOBILE_DBCLICK_PLAY</code>Line truncated
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1789515495000}'),p={name:"en/advanced/global.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s('<h1 id="global-properties" tabindex="-1">Global Properties <a class="header-anchor" href="#global-properties" aria-label="Permalink to &quot;Global Properties&quot;">​</a></h1><p>The <code>global properties</code> here refer to the <code>top-level properties</code> mounted on the <code>constructor</code>. All property names are in uppercase. These are subject to change in the future and are rarely used.</p><h2 id="global-contract" tabindex="-1">Scope and effective timing <a class="header-anchor" href="#global-contract" aria-label="Permalink to &quot;Scope and effective timing {#global-contract}&quot;">​</a></h2><p>These fields belong to the constructor and are shared by instances from that Artplayer module. They are not per-instance options and assignments are not automatically validated. Configure them before constructing players when possible. Some consumers read them at initialization, others at event time; changing a field does not rebuild existing menus, listeners, or pending timers. Separate module copies have separate constructors and fields.</p><h3 id="global-initialization" tabindex="-1">Initialization and UI <a class="header-anchor" href="#global-initialization" aria-label="Permalink to &quot;Initialization and UI {#global-initialization}&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field</th><th>Default and reading point</th></tr></thead><tbody><tr><td><code>STYLE</code></td><td>Embedded CSS text. Import has already injected artplayer-style; assigning STYLE later does not update that node</td></tr><tr><td><code>DEBUG</code></td><td>false; constructor decides whether to install logging listeners. Setting false later does not remove them</td></tr><tr><td><code>CONTEXTMENU</code></td><td>true; checked when opening the desktop menu. Does not remove entries or prevent setting contextmenu.show manually</td></tr><tr><td><code>PLAYBACK_RATE</code> / <code>ASPECT_RATIO</code> / <code>FLIP</code></td><td>Default arrays are listed below. Read when constructing setting/context-menu entries; changing them does not refresh existing entries</td></tr><tr><td><code>SETTING_ITEM_WIDTH</code></td><td>200px; read when constructing built-in submenu options. Explicit item widths can override it</td></tr><tr><td><code>SETTING_ITEM_HEIGHT</code></td><td>35px; read when creating items/back rows and laying out panels. Existing node heights are not rewritten merely by assigning this field</td></tr><tr><td><code>SETTING_WIDTH</code></td><td>250px; root width read during panel layout, still constrained by the container</td></tr><tr><td><code>USE_RAF</code></td><td>false; initialization selects the raf loop and progress listener branch. Not a live mode toggle; raf emits during playback and does not replace native media events</td></tr><tr><td><code>LOG_VERSION</code></td><td>true; read by the callback about 100ms after module import, not once per player construction</td></tr><tr><td><code>REMOVE_SRC_WHEN_DESTROY</code></td><td>true; read by each destroy call. false only skips removeAttribute(&#39;src&#39;)/load(); listeners, requests, UI, and plugin lifecycle still clean up. Preserving DOM uses the separate destroy(false) argument</td></tr></tbody></table><h3 id="global-timing" tabindex="-1">Scheduling and interaction <a class="header-anchor" href="#global-timing" aria-label="Permalink to &quot;Scheduling and interaction {#global-timing}&quot;">​</a></h3><p>Time values below use milliseconds unless stated otherwise. Already queued work retains the delay used when scheduled.</p><table tabindex="0"><thead><tr><th>Field</th><th>Default and reading point</th></tr></thead><tbody><tr><td><code>NOTICE_TIME</code></td><td>2000; read when showing a notice, without rescheduling an existing one</td></tr><tr><td><code>RESIZE_TIME</code></td><td>200; read when resize/orientation queues a new task, canceling the previous task. This is trailing debounce</td></tr><tr><td><code>SCROLL_TIME</code> / <code>SCROLL_GAP</code></td><td>200 / 50px. The delay is captured when the event system initializes; the gap is read on accepted scroll events. Leading throttle emits a boolean view event; the raw event is window:scroll</td></tr><tr><td><code>CONTROL_HIDE_TIME</code></td><td>3000; checked against last-show time in video:timeupdate, while playing and without active setting/input/control interaction. Not a standalone timer</td></tr><tr><td><code>DBCLICK_TIME</code></td><td>300; click-count window read on each video click. The first single click is not delayed while awaiting another</td></tr><tr><td><code>DBCLICK_FULLSCREEN</code> / <code>MOBILE_DBCLICK_PLAY</code>Line truncated
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
docs/document/assets/en_advanced_global.md.DKvU75IF.lean.js → docs/document/assets/en_advanced_global.md.OawZ0vlZ.lean.js
+1 -1
View File
@@ -1 +1 @@
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",13),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1789515495000}'),p={name:"en/advanced/global.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",13),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};