mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-17 01:56:16 -08:00
docs(core): [SITE-04] clarify service contracts and hotkey examples
This commit is contained in:
Harvey Zhao committed
1 parent
9f454ecd1d
commit
a1488f11bb
110 files changed
+4516
-2471
No files matched your search
+61
-9
@@ -1,4 +1,4 @@
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-label="Permalink to "高级属性""></a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>，比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-label="Permalink to "`option`""></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:#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 n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-label="Permalink to "高级属性""></a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>，比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-label="Permalink to "`option`""></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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -24,7 +24,7 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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:#032F62;--shiki-dark:#9ECBFF;">'mouseenter'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event);</span></span>
|
||||
<span class="line"><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;">=></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;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'mouseleave'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏</p></div><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-label="Permalink to "\`storage\`""></a></h2><p>管理播放器的本地存储</p><ul><li><code>name</code> 属性用于设置缓存的 <code>key</code></li><li><code>set</code> 方法用于设置缓存</li><li><code>get</code> 方法用于获取缓存</li><li><code>del</code> 方法用于删除缓存</li><li><code>clear</code> 方法用于清空缓存</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏</p></div><p>事件代理只管理通过它注册的 DOM 监听器，与 <code>art.on/off</code> 的播放器事件订阅不同。<code>art.proxy</code> 是同一套代理的快捷入口。<code>proxy(target, name, callback, options?)</code> 返回清理函数；name 为数组时返回对应清理函数数组。可直接调用清理函数，或传给 <code>art.events.remove(dispose)</code> 提前移除。options 沿用原生 capture/once/passive/signal 语义；普通回调的 this 是原生事件目标，不是播放器。</p><p><code>hover</code> 分别注册 mouseenter/mouseleave，返回 undefined；它不会产生一个新的播放器 hover 事件。<code>destroyEvents</code> 是内部清理函数集合，不要直接修改。<code>events.destroy()</code> 会清理当前集合（也包含核心自己的监听器），不等于销毁整个播放器；通常应调用 <code>art.destroy()</code>。已销毁播放器上的新代理不会注册监听器。</p><p><code>bindGlobalEvents({ window, document })</code> 用于跨文档移动后的全局事件重绑，成功后移除旧绑定，失败时保留原绑定。省略各字段会使用播放器节点所属文档/窗口；跨窗口时请成对提供它们。此方法不迁移 DOM，也不会重绑应用自己添加的监听器。</p><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-label="Permalink to "\`storage\`""></a></h2><p>管理播放器的本地存储</p><ul><li><code>name</code> 属性用于设置缓存的 <code>key</code></li><li><code>set</code> 方法用于设置缓存</li><li><code>get</code> 方法用于获取缓存</li><li><code>del</code> 方法用于删除缓存</li><li><code>clear</code> 方法用于清空缓存</li></ul>`,8),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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -39,7 +39,7 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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.storage.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your-storage-key'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><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></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-label="Permalink to "\`icons\`""></a></h2><p>管理播放器所有的 <code>svg</code> 图标</p>`,3),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:#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.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><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></div></div><p><code>name</code> 是 localStorage 中存放整份 JSON 数据的键；<code>set/get/del</code> 的 key 是该 JSON 对象内的字段。<code>get()</code> 返回整份数据，<code>get(key)</code> 读取字段。为保持旧行为，空字符串 key（运行时的 0 也一样）会选择整份数据；请使用非空字符串键。set/del/clear 同步返回 undefined。</p><p><code>clear()</code> 只移除当前 name 对应的项，不会清空整个站点的 localStorage。修改 name 不会搬迁旧数据。同源实例使用相同 name 时共享持久数据；<code>settings</code> 是每个实例自己的异常回退对象，不是持久数据的实时镜像。读取或写入失败时对应操作会回退到它；恢复正常访问不会自动合并回退内容。存储采用 JSON，不能保证保留函数、循环对象等非 JSON 数据。</p><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-label="Permalink to "\`icons\`""></a></h2><p>管理播放器所有的 <code>svg</code> 图标</p>`,5),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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -55,14 +55,54 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'zh-cn'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Play: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Your Play'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>art.i18n.update</code> 只能更新实例化之后的 <code>i18n</code>，假如想在实例化之前更新 <code>i18n</code>，请使用基础选项的 <code>i18n</code> 来更新</p></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-label="Permalink to "\`notice\`""></a></h2><p>管理播放器的提示语，只有一个 <code>show</code> 属性用于显示提示语</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:#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;">});</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></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>art.i18n.update</code> 只能更新实例化之后的 <code>i18n</code>，假如想在实例化之前更新 <code>i18n</code>，请使用基础选项的 <code>i18n</code> 来更新</p></div><p><code>languages</code> 保存按语言代码组织的字典，<code>language</code> 是当前字典，<code>art</code> 指回播放器。<code>update({ 'zh-cn': { Play: '播放' } })</code> 深合并字典后调用 <code>init()</code>，两者返回 undefined。init 根据 <code>art.option.lang.toLowerCase()</code> 选字典；字典的键本身不会转成小写。默认内置简体��文，其余未载入的语言退回原键文本。</p><p><code>get(key)</code> 返回当前字典中的非空值，否则返回 key；空字符串翻译也会回退。更新不会自动重绘已经创建的按钮、提示和菜单文字。切换 option.lang 后可调用 init 更新后续查询，但它不是整站界面语言切换 API。以下旧声明中的文本键共享上述查找语义；运行时也能查询应用自己的键：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>Context Menu</span></span>
|
||||
<span class="line"><span>Lock</span></span>
|
||||
<span class="line"><span>Video Info</span></span>
|
||||
<span class="line"><span>Close</span></span>
|
||||
<span class="line"><span>Video Load Failed</span></span>
|
||||
<span class="line"><span>Volume</span></span>
|
||||
<span class="line"><span>Progress</span></span>
|
||||
<span class="line"><span>Back</span></span>
|
||||
<span class="line"><span>Settings</span></span>
|
||||
<span class="line"><span>Play</span></span>
|
||||
<span class="line"><span>Pause</span></span>
|
||||
<span class="line"><span>Rate</span></span>
|
||||
<span class="line"><span>Mute</span></span>
|
||||
<span class="line"><span>Video Flip</span></span>
|
||||
<span class="line"><span>Horizontal</span></span>
|
||||
<span class="line"><span>Vertical</span></span>
|
||||
<span class="line"><span>Reconnect</span></span>
|
||||
<span class="line"><span>Show Setting</span></span>
|
||||
<span class="line"><span>Hide Setting</span></span>
|
||||
<span class="line"><span>Screenshot</span></span>
|
||||
<span class="line"><span>Play Speed</span></span>
|
||||
<span class="line"><span>Aspect Ratio</span></span>
|
||||
<span class="line"><span>Default</span></span>
|
||||
<span class="line"><span>Normal</span></span>
|
||||
<span class="line"><span>Open</span></span>
|
||||
<span class="line"><span>Switch Video</span></span>
|
||||
<span class="line"><span>Switch Subtitle</span></span>
|
||||
<span class="line"><span>Fullscreen</span></span>
|
||||
<span class="line"><span>Exit Fullscreen</span></span>
|
||||
<span class="line"><span>Web Fullscreen</span></span>
|
||||
<span class="line"><span>Exit Web Fullscreen</span></span>
|
||||
<span class="line"><span>Mini Player</span></span>
|
||||
<span class="line"><span>PIP Mode</span></span>
|
||||
<span class="line"><span>Exit PIP Mode</span></span>
|
||||
<span class="line"><span>PIP Not Supported</span></span>
|
||||
<span class="line"><span>Fullscreen Not Supported</span></span>
|
||||
<span class="line"><span>Subtitle Offset</span></span>
|
||||
<span class="line"><span>Last Seen</span></span>
|
||||
<span class="line"><span>Jump Play</span></span>
|
||||
<span class="line"><span>AirPlay</span></span>
|
||||
<span class="line"><span>AirPlay Not Available</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><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-label="Permalink to "\`notice\`""></a></h2><p>管理播放器的提示语，通过 <code>show</code> 写入文本或读取显示状态</p>`,7),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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Video Ready To Play'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果想马上隐藏 <code>notice</code> 的显示：<code>art.notice.show = '';</code></p></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-label="Permalink to "\`layers\`""></a></h2><p>管理播放器的层</p><ul><li><code>add</code> 方法用于动态添加层</li><li><code>remove</code> 方法用于动态删除层</li><li><code>update</code> 方法用于动态更新层</li><li><code>show</code> 属性用于设置是否显示全部层</li><li><code>toggle</code> 方法用于切换是否显示全部层</li></ul>`,5),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:#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;">})</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果想马上隐藏 <code>notice</code> 的显示：<code>art.notice.show = '';</code></p></div><p>写入字符串或 Error 会显示纯文本并重新开始自动隐藏计时；Error 使用去掉两端空白的 message，普通字符串保留原文本。读取 <code>notice.show</code> 得到当前是否显示的布尔值，不是上次写入的文本。写入 false 或空字符串会立即隐藏，但不立即清空文本，也不取消原计时器。</p><p>隐藏延时来自本次显示时的 <code>Artplayer.NOTICE_TIME</code>。<code>timer</code> 是计时器句柄，不是倒计时；<code>destroy()</code> 取消计时，不负责隐藏节点或销毁播放器。播放器销毁后不会继续显示新通知。根入口保留旧 getter 类型；需要准确布尔值类型时用 <code>artplayer/runtime</code>。</p><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-label="Permalink to "\`layers\`""></a></h2><p>管理播放器的层</p><ul><li><code>add</code> 方法用于动态添加层</li><li><code>remove</code> 方法用于动态删除层</li><li><code>update</code> 方法用于动态更新层</li><li><code>show</code> 属性用于设置是否显示全部层</li><li><code>toggle</code> 方法用于切换是否显示全部层</li></ul>`,7),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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -144,11 +184,11 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效</p></div><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-label="Permalink to "\`mask\`""></a></h2><p>管理播放器的遮罩层</p><ul><li><code>show</code> 属性用于设置是否显示遮罩层</li><li><code>toggle</code> 属性用于切换是否显示遮罩层</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效</p></div><p>使用 <code>KeyboardEvent.code</code> 字符串，例如 <code>'Space'</code>、<code>'KeyK'</code>、<code>'ArrowLeft'</code>，不要传数字 keyCode。add/remove 都返回 hotkey 管理对象；移除时需使用原回调。同一键可注册多个不同回调，相同回调不会重复加入，回调的 this 为播放器。添加自定义 Space 回调不会替换内置播放/暂停行为。</p><p><code>keys</code> 是按 code 保存的回调数组；<code>art</code> 指回播放器。桌面构造时自动执行 init，<code>hotkey: false</code> 只禁用内置快捷键，不禁用手动添加的回调。移动端默认不初始化键盘监听；已有 init 方法可显式开启，但这不代表已完成真机键盘验收。重复 init 不会累积同一组默认回调或文档订阅。</p><p>输入框、文本域、选择框、可编辑区域、组合输入和带修饰键的事件会被排除；按钮/链接的原生激活键和已被播放器控件处理的按键也不会重复触发快捷键。命中回调时阻止原生默认行为，执行后发出 hotkey；随后仍会发出播放器 keydown。</p><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-label="Permalink to "\`mask\`""></a></h2><p>管理播放器的遮罩层</p><ul><li><code>show</code> 属性用于设置是否显示遮罩层</li><li><code>toggle</code> 属性用于切换是否显示遮罩层</li></ul>`,8),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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -191,4 +231,16 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myPlugin);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1)]))}const o=n(e,[["render",h]]);export{g as __pageData,o as default};
|
||||
<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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="服务的-typescript-视图" tabindex="-1">服务的 TypeScript 视图 <a class="header-anchor" href="#服务的-typescript-视图" aria-label="Permalink to "服务的 TypeScript 视图""></a></h2><p>当前重构分支的 <code>artplayer/runtime</code> 为同一运行时提供精确声明，包括布尔 notice.show、EventListener 对象和服务成员；该分支尚未发布。根入口和 legacy 保留旧声明形状。runtime 导出的 <code>EventRegistry</code>、<code>Storage</code>、<code>I18n<Host></code>、<code>Hotkey<Host></code>、<code>Notice</code> 描述服务，<code>Dictionary/Languages</code> 描述语言数据。</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</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;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkey: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</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;"> dispose</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.events.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">proxy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">handleEvent</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;">) { console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</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.events.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dispose);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSpace</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</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;"> KeyboardEvent</span><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;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.id, event.code); };</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onSpace);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onSpace);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Ready'</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;"> visible</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.notice.show;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.i18n.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ en: { Play: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Start'</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;">(visible, art.i18n.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Play'</span><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><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>`,4)]))}const g=n(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(e,[["render",h]]);export{g as __pageData,o as default};
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",8),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",8),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4)]))}const g=n(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
@@ -1 +1 @@
|
||||
import{t as p}from"./chunks/theme.DdScxTso.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.CvjM10Et.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};
|
||||
+1
-1
@@ -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
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+73
-21
@@ -1,15 +1,15 @@
|
||||
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":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('<h1 id="advanced-properties" tabindex="-1">Advanced Properties <a class="header-anchor" href="#advanced-properties" aria-label="Permalink to "Advanced Properties""></a></h1><p>The <code>Advanced Properties</code> here refer to the <code>secondary properties</code> attached to the <code>instance</code>, which are less commonly used.</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-label="Permalink to "`option`""></a></h2><p>The player's options.</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:#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 n,o as e,c as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,i,r,k,d,E){return e(),l("div",null,i[0]||(i[0]=[s('<h1 id="advanced-properties" tabindex="-1">Advanced Properties <a class="header-anchor" href="#advanced-properties" aria-label="Permalink to "Advanced Properties""></a></h1><p>The <code>Advanced Properties</code> here refer to the <code>secondary properties</code> attached to the <code>instance</code>, which are less commonly used.</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-label="Permalink to "`option`""></a></h2><p>The player's options.</p>',4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.option);</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></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>If you directly modify this <code>option</code> object, the player will not respond immediately.</p></div><h2 id="template" tabindex="-1"><code>template</code> <a class="header-anchor" href="#template" aria-label="Permalink to "\`template\`""></a></h2><p>Manages all <code>DOM</code> elements of the player.</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:#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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.option);</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></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>If you directly modify this <code>option</code> object, the player will not respond immediately.</p></div><h2 id="template" tabindex="-1"><code>template</code> <a class="header-anchor" href="#template" aria-label="Permalink to "\`template\`""></a></h2><p>Manages all <code>DOM</code> elements of the player.</p>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.template);</span></span>
|
||||
<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;">(art.template.$video);</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></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>To easily distinguish between <code>DOM</code> elements and regular objects, all <code>DOM</code> elements within the player are named with a <code>$</code> prefix.</p><p>This is the definition of all <code>DOM</code> elements: <a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts" target="_blank" rel="noreferrer">artplayer/types/template.d.ts</a></p></div><h2 id="events" tabindex="-1"><code>events</code> <a class="header-anchor" href="#events" aria-label="Permalink to "\`events\`""></a></h2><p>Manages all <code>DOM</code> events for the player. It essentially proxies <code>addEventListener</code> and <code>removeEventListener</code>. When using the following methods to handle events, the events will also be automatically destroyed when the player is destroyed.</p><ul><li>The <code>proxy</code> method is used to proxy <code>DOM</code> events.</li><li>The <code>hover</code> method is used to proxy custom <code>hover</code> events.</li></ul>`,5),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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</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;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.template.$video);</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></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>To easily distinguish between <code>DOM</code> elements and regular objects, all <code>DOM</code> elements within the player are named with a <code>$</code> prefix.</p><p>This is the definition of all <code>DOM</code> elements: <a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts" target="_blank" rel="noreferrer">artplayer/types/template.d.ts</a></p></div><h2 id="events" tabindex="-1"><code>events</code> <a class="header-anchor" href="#events" aria-label="Permalink to "\`events\`""></a></h2><p>Manages all <code>DOM</code> events for the player. It essentially proxies <code>addEventListener</code> and <code>removeEventListener</code>. When using the following methods to handle events, the events will also be automatically destroyed when the player is destroyed.</p><ul><li>The <code>proxy</code> method is used to proxy <code>DOM</code> events.</li><li>The <code>hover</code> method is used to proxy custom <code>hover</code> events.</li></ul>`,5),a("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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</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;">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: container,</span></span>
|
||||
@@ -24,7 +24,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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:#032F62;--shiki-dark:#9ECBFF;">'mouseenter'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event);</span></span>
|
||||
<span class="line"><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;">=></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;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'mouseleave'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>If you need <code>DOM</code> events that should only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.</p></div><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-label="Permalink to "\`storage\`""></a></h2><p>Manages the player's local storage.</p><ul><li>The <code>name</code> property is used to set the cache <code>key</code>.</li><li>The <code>set</code> method is used to set a cache.</li><li>The <code>get</code> method is used to retrieve a cache.</li><li>The <code>del</code> method is used to delete a cache.</li><li>The <code>clear</code> method is used to clear all caches.</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>If you need <code>DOM</code> events that should only exist during the player's lifecycle, it is strongly recommended to use these functions to avoid memory leaks.</p></div><p>This registry manages DOM listeners registered through it, separately from player subscriptions using <code>art.on/off</code>. <code>art.proxy</code> is the same proxy shortcut. <code>proxy(target, name, callback, options?)</code> returns a disposer, or an array of disposers when name is an array. Call each disposer directly or pass it to <code>art.events.remove(dispose)</code> for early removal. Options retain native capture/once/passive/signal behavior; a normal listener's this is the native event target, not the player.</p><p><code>hover</code> registers mouseenter/mouseleave and returns undefined; it does not create a new player hover event. <code>destroyEvents</code> holds cleanup functions and should not be mutated directly. <code>events.destroy()</code> clears the current registry, including core listeners; it does not destroy the player. Normally use <code>art.destroy()</code>. New proxies on a destroyed player do not register listeners.</p><p><code>bindGlobalEvents({ window, document })</code> rebinds global listeners after a cross-document move. A successful replacement releases the old binding; a failed replacement preserves it. Omitted fields use the player node's document/window. Supply both when moving between windows. This method neither moves DOM nodes nor rebinds listeners your application installed itself.</p><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-label="Permalink to "\`storage\`""></a></h2><p>Manages the player's local storage.</p><ul><li>The <code>name</code> property is used to set the cache <code>key</code>.</li><li>The <code>set</code> method is used to set a cache.</li><li>The <code>get</code> method is used to retrieve a cache.</li><li>The <code>del</code> method is used to delete a cache.</li><li>The <code>clear</code> method is used to clear all caches.</li></ul>`,8),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -33,18 +33,18 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> test</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</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;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(test);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">del</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><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><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>By default, all player instances share the same <code>localStorage</code>, and the default <code>key</code> is <code>artplayer_settings</code>.</p><p>If you want different players to use different <code>localStorage</code>, you can modify <code>art.storage.name</code>.</p></div>`,2),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:#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.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><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><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>By default, all player instances share the same <code>localStorage</code>, and the default <code>key</code> is <code>artplayer_settings</code>.</p><p>If you want different players to use different <code>localStorage</code>, you can modify <code>art.storage.name</code>.</p></div>`,2),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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.storage.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your-storage-key'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><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></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-label="Permalink to "\`icons\`""></a></h2><p>Manages all <code>svg</code> icons for the player.</p>`,3),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:#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.storage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><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></div></div><p><code>name</code> is the localStorage key containing the entire JSON record; the key passed to set/get/del selects a field inside it. <code>get()</code> returns the full data and <code>get(key)</code> reads one field. Historical truthy-key selection means an empty string (and numeric zero at runtime) returns the full data; use nonempty string keys. set/del/clear synchronously return undefined.</p><p><code>clear()</code> removes only the current name entry, not all localStorage for the origin. Changing name does not migrate old data. Same-origin instances with the same name share persisted data. <code>settings</code> is a per-instance error fallback, not a live mirror of persistence. Failed reads or writes use the corresponding fallback operation; restored access does not merge fallback data automatically. Storage uses JSON and does not preserve functions, circular objects or all other non-JSON values.</p><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-label="Permalink to "\`icons\`""></a></h2><p>Manages all <code>svg</code> icons for the player.</p>`,5),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.icons.loading);</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></div></div><div class="warning custom-block"><p class="custom-block-title">This is the definition of all icons:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-label="Permalink to "\`i18n\`""></a></h2><p>Manages the player's <code>i18n</code>.</p><ul><li>The <code>get</code> method is used to retrieve an <code>i18n</code> value.</li><li>The <code>update</code> method is used to update the <code>i18n</code> object.</li></ul>`,5),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:#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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.icons.loading);</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></div></div><div class="warning custom-block"><p class="custom-block-title">This is the definition of all icons:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-label="Permalink to "\`i18n\`""></a></h2><p>Manages the player's <code>i18n</code>.</p><ul><li>The <code>get</code> method is used to retrieve an <code>i18n</code> value.</li><li>The <code>update</code> method is used to update the <code>i18n</code> object.</li></ul>`,5),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -55,14 +55,54 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'zh-cn'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Play: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Your Play'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Using <code>art.i18n.update</code> can only update the <code>i18n</code> after instantiation. If you want to update <code>i18n</code> before instantiation, please use the <code>i18n</code> option in the basic settings.</p></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-label="Permalink to "\`notice\`""></a></h2><p>Manages the player's notifications. It only has a <code>show</code> property for displaying notifications.</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:#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;">});</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></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Using <code>art.i18n.update</code> can only update the <code>i18n</code> after instantiation. If you want to update <code>i18n</code> before instantiation, please use the <code>i18n</code> option in the basic settings.</p></div><p><code>languages</code> holds dictionaries by language code, <code>language</code> is the selected dictionary, and <code>art</code> references the player. <code>update({ 'zh-cn': { Play: '播放' } })</code> deep-merges dictionaries and calls <code>init()</code>; both return undefined. init selects <code>art.option.lang.toLowerCase()</code>, without lowercasing dictionary keys. Simplified Chinese is built in; an unloaded language falls back to the original key text.</p><p><code>get(key)</code> returns a nonempty translation or the key itself; an empty translation also falls back. Updating dictionaries does not redraw existing button, tooltip or menu text. After changing option.lang, init updates future lookups; it is not a complete interface-language switch API. These text keys from the historical declarations share the same lookup rules; runtime lookup also accepts application-defined keys:</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>Context Menu</span></span>
|
||||
<span class="line"><span>Lock</span></span>
|
||||
<span class="line"><span>Video Info</span></span>
|
||||
<span class="line"><span>Close</span></span>
|
||||
<span class="line"><span>Video Load Failed</span></span>
|
||||
<span class="line"><span>Volume</span></span>
|
||||
<span class="line"><span>Progress</span></span>
|
||||
<span class="line"><span>Back</span></span>
|
||||
<span class="line"><span>Settings</span></span>
|
||||
<span class="line"><span>Play</span></span>
|
||||
<span class="line"><span>Pause</span></span>
|
||||
<span class="line"><span>Rate</span></span>
|
||||
<span class="line"><span>Mute</span></span>
|
||||
<span class="line"><span>Video Flip</span></span>
|
||||
<span class="line"><span>Horizontal</span></span>
|
||||
<span class="line"><span>Vertical</span></span>
|
||||
<span class="line"><span>Reconnect</span></span>
|
||||
<span class="line"><span>Show Setting</span></span>
|
||||
<span class="line"><span>Hide Setting</span></span>
|
||||
<span class="line"><span>Screenshot</span></span>
|
||||
<span class="line"><span>Play Speed</span></span>
|
||||
<span class="line"><span>Aspect Ratio</span></span>
|
||||
<span class="line"><span>Default</span></span>
|
||||
<span class="line"><span>Normal</span></span>
|
||||
<span class="line"><span>Open</span></span>
|
||||
<span class="line"><span>Switch Video</span></span>
|
||||
<span class="line"><span>Switch Subtitle</span></span>
|
||||
<span class="line"><span>Fullscreen</span></span>
|
||||
<span class="line"><span>Exit Fullscreen</span></span>
|
||||
<span class="line"><span>Web Fullscreen</span></span>
|
||||
<span class="line"><span>Exit Web Fullscreen</span></span>
|
||||
<span class="line"><span>Mini Player</span></span>
|
||||
<span class="line"><span>PIP Mode</span></span>
|
||||
<span class="line"><span>Exit PIP Mode</span></span>
|
||||
<span class="line"><span>PIP Not Supported</span></span>
|
||||
<span class="line"><span>Fullscreen Not Supported</span></span>
|
||||
<span class="line"><span>Subtitle Offset</span></span>
|
||||
<span class="line"><span>Last Seen</span></span>
|
||||
<span class="line"><span>Jump Play</span></span>
|
||||
<span class="line"><span>AirPlay</span></span>
|
||||
<span class="line"><span>AirPlay Not Available</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><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-label="Permalink to "\`notice\`""></a></h2><p>Manages the player's notifications. Assign text through <code>show</code> or read its visibility state.</p>`,7),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Video Ready To Play'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>If you want to hide the <code>notice</code> immediately: <code>art.notice.show = '';</code></p></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-label="Permalink to "\`layers\`""></a></h2><p>Manages the player's layers.</p><ul><li>The <code>add</code> method is used to dynamically add a layer.</li><li>The <code>remove</code> method is used to dynamically remove a layer.</li><li>The <code>update</code> method is used to dynamically update a layer.</li><li>The <code>show</code> property is used to set whether all layers are displayed.</li><li>The <code>toggle</code> method is used to toggle the display of all layers.</li></ul>`,5),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:#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;">})</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>If you want to hide the <code>notice</code> immediately: <code>art.notice.show = '';</code></p></div><p>Assigning a string or Error displays plain text and restarts the hide timer. Errors use their trimmed message; ordinary strings retain their original text. Reading <code>notice.show</code> returns a boolean visibility state, not the last assigned text. Assigning false or an empty string hides immediately, without immediately clearing the text or canceling the old timer.</p><p>Each display reads its delay from <code>Artplayer.NOTICE_TIME</code>. <code>timer</code> is a timer handle, not a countdown. <code>destroy()</code> cancels the timer without hiding the node or destroying the player. New notices cannot appear after player destruction. The root entry retains the historical getter type; use <code>artplayer/runtime</code> for its accurate boolean type.</p><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-label="Permalink to "\`layers\`""></a></h2><p>Manages the player's layers.</p><ul><li>The <code>add</code> method is used to dynamically add a layer.</li><li>The <code>remove</code> method is used to dynamically remove a layer.</li><li>The <code>update</code> method is used to dynamically update a layer.</li><li>The <code>show</code> property is used to set whether all layers are displayed.</li><li>The <code>toggle</code> method is used to toggle the display of all layers.</li></ul>`,7),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -75,7 +115,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.layers.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/layers.html">/component/layers.html</a></p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-label="Permalink to "\`controls\`""></a></h2><p>Manages the player's controls.</p><ul><li><p>The <code>add</code> method is used to dynamically add a control.</p></li><li><p>The <code>remove</code> method is used to dynamically remove a control.</p></li><li><p>The <code>update</code> method is used to dynamically update controls</p></li><li><p>The <code>show</code> property is used to set whether to display all controls</p></li><li><p>The <code>toggle</code> method is used to toggle the display of all controls</p></li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/layers.html">/component/layers.html</a></p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-label="Permalink to "\`controls\`""></a></h2><p>Manages the player's controls.</p><ul><li><p>The <code>add</code> method is used to dynamically add a control.</p></li><li><p>The <code>remove</code> method is used to dynamically remove a control.</p></li><li><p>The <code>update</code> method is used to dynamically update controls</p></li><li><p>The <code>show</code> property is used to set whether to display all controls</p></li><li><p>The <code>toggle</code> method is used to toggle the display of all controls</p></li></ul>`,5),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -89,7 +129,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.controls.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/controls.html">/component/controls.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-label="Permalink to "\`contextmenu\`""></a></h2><p>Manages the player's context menu</p><ul><li>The <code>add</code> method is used to dynamically add menu items</li><li>The <code>remove</code> method is used to dynamically remove menu items</li><li>The <code>update</code> method is used to dynamically update menu items</li><li>The <code>show</code> property is used to set whether to display all menu items</li><li>The <code>toggle</code> method is used to toggle the display of all menu items</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/controls.html">/component/controls.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-label="Permalink to "\`contextmenu\`""></a></h2><p>Manages the player's context menu</p><ul><li>The <code>add</code> method is used to dynamically add menu items</li><li>The <code>remove</code> method is used to dynamically remove menu items</li><li>The <code>update</code> method is used to dynamically update menu items</li><li>The <code>show</code> property is used to set whether to display all menu items</li><li>The <code>toggle</code> method is used to toggle the display of all menu items</li></ul>`,5),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -103,7 +143,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.contextmenu.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/contextmenu.html">/component/contextmenu.html</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><p>Manages the player's subtitle functionality</p><ul><li>The <code>url</code> property sets and returns the current subtitle URL</li><li>The <code>style</code> method sets the style of the current subtitle</li><li>The <code>switch</code> method sets the current subtitle URL and options</li><li><code>textTrack</code> gets the current text track</li><li><code>activeCues</code> gets the list of currently active cues</li><li><code>cues</code> gets the overall list of cues</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Component Configuration</code>, please refer to:</p><p><a href="/document/component/contextmenu.html">/component/contextmenu.html</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><p>Manages the player's subtitle functionality</p><ul><li>The <code>url</code> property sets and returns the current subtitle URL</li><li>The <code>style</code> method sets the style of the current subtitle</li><li>The <code>switch</code> method sets the current subtitle URL and options</li><li><code>textTrack</code> gets the current text track</li><li><code>activeCues</code> gets the list of currently active cues</li><li><code>cues</code> gets the overall list of cues</li></ul>`,5),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -113,7 +153,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.subtitle.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'red'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="info" tabindex="-1"><code>info</code> <a class="header-anchor" href="#info" aria-label="Permalink to "\`info\`""></a></h2><p>Manages the player's information panel, commonly used to view the current status of the player and video, such as version number, resolution, duration, etc.</p><ul><li>Control the panel's visibility via <code>art.info.show</code></li><li>The triggered event is named <code>info</code> (see the event documentation for details)</li></ul>`,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:#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;">});</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><h2 id="info" tabindex="-1"><code>info</code> <a class="header-anchor" href="#info" aria-label="Permalink to "\`info\`""></a></h2><p>Manages the player's information panel, commonly used to view the current status of the player and video, such as version number, resolution, duration, etc.</p><ul><li>Control the panel's visibility via <code>art.info.show</code></li><li>The triggered event is named <code>info</code> (see the event documentation for details)</li></ul>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -124,7 +164,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.info.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="loading" tabindex="-1"><code>loading</code> <a class="header-anchor" href="#loading" aria-label="Permalink to "\`loading\`""></a></h2><p>Manages the player's loading layer</p><ul><li>The <code>show</code> property is used to set whether to display the loading layer</li><li>The <code>toggle</code> property is used to toggle the display of the loading layer</li></ul>`,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:#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;">});</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></div></div><h2 id="loading" tabindex="-1"><code>loading</code> <a class="header-anchor" href="#loading" aria-label="Permalink to "\`loading\`""></a></h2><p>Manages the player's loading layer</p><ul><li>The <code>show</code> property is used to set whether to display the loading layer</li><li>The <code>toggle</code> property is used to toggle the display of the loading layer</li></ul>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -134,7 +174,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.loading.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-label="Permalink to "\`hotkey\`""></a></h2><p>Manages the player's hotkey functionality</p><ul><li>The <code>add</code> method is used to add hotkeys</li><li>The <code>remove</code> method is used to remove hotkeys</li></ul>`,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:#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;">});</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><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-label="Permalink to "\`hotkey\`""></a></h2><p>Manages the player's hotkey functionality</p><ul><li>The <code>add</code> method is used to add hotkeys</li><li>The <code>remove</code> method is used to remove hotkeys</li></ul>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -144,11 +184,11 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkeyEvent);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>These hotkeys only take effect after the player gains focus (e.g., after clicking on the player)</p></div><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-label="Permalink to "\`mask\`""></a></h2><p>Manages the player's mask layer</p><ul><li>The <code>show</code> property is used to set whether to display the mask layer</li><li>The <code>toggle</code> property is used to toggle the display of the mask layer</li></ul>`,5),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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Note</p><p>These hotkeys only take effect after the player gains focus (e.g., after clicking on the player)</p></div><p>Use <code>KeyboardEvent.code</code> strings such as <code>'Space'</code>, <code>'KeyK'</code> and <code>'ArrowLeft'</code>, not numeric keyCode values. add/remove return the hotkey manager. Removal requires the original callback. Different callbacks may share a key; the same callback is not added twice. A callback's this is the player. Adding a custom Space callback does not replace built-in play/pause.</p><p><code>keys</code> stores callback arrays by code; <code>art</code> references the player. Desktop construction calls init automatically. <code>hotkey: false</code> disables built-in keys, but manually added callbacks still work. Mobile keyboard listening is opt-in through the existing init method; this is not physical-device acceptance. Repeated init does not duplicate the same default callbacks or document subscription.</p><p>Inputs, textareas, selects, editable content, composition and modified key events are excluded. Native activation keys on buttons/links and keys already handled by player controls do not trigger duplicate shortcuts. Matching callbacks prevent the native default action and are followed by the hotkey event; the player keydown event follows as well.</p><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-label="Permalink to "\`mask\`""></a></h2><p>Manages the player's mask layer</p><ul><li>The <code>show</code> property is used to set whether to display the mask layer</li><li>The <code>toggle</code> property is used to toggle the display of the mask layer</li></ul>`,8),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -158,7 +198,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.mask.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-label="Permalink to "\`setting\`""></a></h2><p>Manages the player's settings panel</p><ul><li>The <code>add</code> method is used to dynamically add settings items</li><li>The <code>remove</code> method is used to dynamically remove settings items</li><li>The <code>update</code> method is used to dynamically update settings items</li><li>The <code>show</code> property is used to set whether to display all settings items</li><li>The <code>toggle</code> method is used to toggle the display of all settings items</li></ul>`,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:#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;">});</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><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-label="Permalink to "\`setting\`""></a></h2><p>Manages the player's settings panel</p><ul><li>The <code>add</code> method is used to dynamically add settings items</li><li>The <code>remove</code> method is used to dynamically remove settings items</li><li>The <code>update</code> method is used to dynamically update settings items</li><li>The <code>show</code> property is used to set whether to display all settings items</li><li>The <code>toggle</code> method is used to toggle the display of all settings items</li></ul>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setting: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
@@ -173,7 +213,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.setting.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Settings Panel</code>, please refer to</p><p><a href="/document/component/setting.html">/component/setting.html</a></p></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-label="Permalink to "\`plugins\`""></a></h2><p>Manages the player's plugin functionality, with only one method <code>add</code> for dynamically adding plugins</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:#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;">});</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><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">For <code>Settings Panel</code>, please refer to</p><p><a href="/document/component/setting.html">/component/setting.html</a></p></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-label="Permalink to "\`plugins\`""></a></h2><p>Manages the player's plugin functionality, with only one method <code>add</code> for dynamically adding plugins</p>`,4),a("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:#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;">'.artplayer-app'</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;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
@@ -191,4 +231,16 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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;">'ready'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myPlugin);</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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>`,1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
|
||||
<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><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="typescript-service-views" tabindex="-1">TypeScript service views <a class="header-anchor" href="#typescript-service-views" aria-label="Permalink to "TypeScript service views""></a></h2><p>The current, unpublished refactor's <code>artplayer/runtime</code> entry supplies accurate declarations for the same implementation, including boolean notice.show, EventListener objects and service members. Root and legacy entries preserve historical declaration shapes. Runtime exports <code>EventRegistry</code>, <code>Storage</code>, <code>I18n<Host></code>, <code>Hotkey<Host></code> and <code>Notice</code> describe services; <code>Dictionary/Languages</code> describe language data.</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</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;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, hotkey: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</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;"> dispose</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.events.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">proxy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">handleEvent</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;">) { console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</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.events.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dispose);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSpace</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</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;"> KeyboardEvent</span><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;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.id, event.code); };</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onSpace);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.hotkey.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Space'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onSpace);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Ready'</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;"> visible</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.notice.show;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.notice.show </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.i18n.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ en: { Play: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Start'</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;">(visible, art.i18n.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Play'</span><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><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>`,4)]))}const y=n(p,[["render",t]]);export{o as __pageData,y as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as n,o as e,c as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,i,r,k,d,E){return e(),l("div",null,i[0]||(i[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",8),a("div",{className:"run-code"},"▶ Run Code",-1),s("",2),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",7),a("div",{className:"run-code"},"▶ Run Code",-1),s("",7),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",5),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",8),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4)]))}const y=n(p,[["render",t]]);export{o as __pageData,y as default};
|
||||
@@ -1 +0,0 @@
|
||||
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":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),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};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789497001000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s(`<h1 id="audio-track" tabindex="-1">Audio Track <a class="header-anchor" href="#audio-track" aria-label="Permalink to "Audio Track""></a></h1><p><a href="./../../plugin/audio-track.html">中文</a></p><p>Play a separate audio file in sync with a video. The plugin creates an <code>HTMLAudioElement</code> and follows the main video's playback, pause, position, volume and playback rate. It requires no additional SDK and does not add an audio-selection menu.</p><p>This page describes the current refactor branch. Its lifecycle fixes and precise <code>/runtime</code> types are not yet published; an unpinned npm or CDN installation does not select this branch.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-audio-track</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789504112000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s(`<h1 id="audio-track" tabindex="-1">Audio Track <a class="header-anchor" href="#audio-track" aria-label="Permalink to "Audio Track""></a></h1><p><a href="./../../plugin/audio-track.html">中文</a></p><p>Play a separate audio file in sync with a video. The plugin creates an <code>HTMLAudioElement</code> and follows the main video's playback, pause, position, volume and playback rate. It requires no additional SDK and does not add an audio-selection menu.</p><p>This page describes the current refactor branch. Its lifecycle fixes and precise <code>/runtime</code> types are not yet published; an unpinned npm or CDN installation does not select this branch.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-audio-track</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginAudioTrack </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-audio-track'</span><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></div></div><p>For script tags, load ArtPlayer before the plugin's <code>dist/artplayer-plugin-audio-track.js</code>. The global is <code>artplayerPluginAudioTrack</code>. Pin dependency versions and supply an audio URL the browser can access and decode.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>This is the same code as the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-audio-track/index.js&example=audio.track" target="_blank" rel="noreferrer">online audio example</a>. The demo site supplies the media files and <code>.artplayer-app</code> container; replace both when integrating it into your application.</p>`,10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ 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:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-audio-track</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginAudioTrack from 'artplayer-plugin-audio-track';</span></span>
|
||||
<span class="line"></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789497001000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),s("",22)]))}const y=i(l,[["render",p]]);export{u as __pageData,y as default};
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789504112000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),s("",22)]))}const y=i(l,[["render",p]]);export{u as __pageData,y as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s(`<h1 id="danmuku" tabindex="-1">Danmuku <a class="header-anchor" href="#danmuku" aria-label="Permalink to "Danmuku""></a></h1><p><a href="./../../plugin/danmuku.html">中文说明</a></p><p>Display timed comments over the video, with an input panel, display settings and an optional heatmap. This guide describes the current refactor branch. The <code>/runtime</code> entrypoint and refactor fixes have not yet been published to npm; unversioned CDN links still load the published release.</p><h2 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to "Demo""></a></h2><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">Open the full example</a>. Run Code examples below use the site's local plugin build and sample media. In your application, use your own container and media URLs.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-0" checked><label data-title="npm" for="tab-artplayer-6327997d12cc7405-0">npm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-1"><label data-title="yarn" for="tab-artplayer-6327997d12cc7405-1">yarn</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-2"><label data-title="pnpm" for="tab-artplayer-6327997d12cc7405-2">pnpm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-3"><label data-title="script" for="tab-artplayer-6327997d12cc7405-3">script</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shik
Line truncated
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789504112000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s(`<h1 id="danmuku" tabindex="-1">Danmuku <a class="header-anchor" href="#danmuku" aria-label="Permalink to "Danmuku""></a></h1><p><a href="./../../plugin/danmuku.html">中文说明</a></p><p>Display timed comments over the video, with an input panel, display settings and an optional heatmap. This guide describes the current refactor branch. The <code>/runtime</code> entrypoint and refactor fixes have not yet been published to npm; unversioned CDN links still load the published release.</p><h2 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to "Demo""></a></h2><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">Open the full example</a>. Run Code examples below use the site's local plugin build and sample media. In your application, use your own container and media URLs.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-0" checked><label data-title="npm" for="tab-artplayer-6327997d12cc7405-0">npm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-1"><label data-title="yarn" for="tab-artplayer-6327997d12cc7405-1">yarn</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-2"><label data-title="pnpm" for="tab-artplayer-6327997d12cc7405-2">pnpm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-3"><label data-title="script" for="tab-artplayer-6327997d12cc7405-3">script</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shik
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><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></div></div></div></div><p>JavaScript projects can import the default factory from <code>artplayer-plugin-danmuku</code>. Script builds expose <code>artplayerPluginDanmuku</code>; pass its result to the player's <code>plugins</code> array.</p><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-0" checked><label data-title="jsDelivr" for="tab-artplayer-0590ccaac58bc27a-0">jsDelivr</label><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-1"><label data-title="unpkg" for="tab-artplayer-0590ccaac58bc27a-1">unpkg</label></div><div class="blocks"><div class="language-text vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="comment-structure" tabindex="-1">Comment structure <a class="header-anchor" href="#comment-structure" aria-label="Permalink to "Comment structure""></a></h2><p>Only <code>text</code> is required. Empty or whitespace-only comments are ignored. Direct <code>emit()</code> and loaded rows retain the original text, including surrounding spaces; only the input panel trims its submitted text.</p><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;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Seconds; omitted time defaults to currentTime + 0.5</span></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s("",21),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",13),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",5),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",14)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789504112000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s("",21),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",13),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",5),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",14)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="dash-control" tabindex="-1">DASH Control <a class="header-anchor" href="#dash-control" aria-label="Permalink to "DASH Control""></a></h1><p><a href="./../../plugin/dash-control.html">中文说明</a></p><p>Add video quality and audio-track menus to a dash.js player. You create and attach the SDK instance at <code>art.dash</code>; the plugin controls that instance and releases its own menus and listeners.</p><p>This guide describes the current refactor branch. Its SDK adaptation, automatic refresh and lifecycle fixes have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789504112000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="dash-control" tabindex="-1">DASH Control <a class="header-anchor" href="#dash-control" aria-label="Permalink to "DASH Control""></a></h1><p><a href="./../../plugin/dash-control.html">中文说明</a></p><p>Add video quality and audio-track menus to a dash.js player. You create and attach the SDK instance at <code>art.dash</code>; the plugin controls that instance and releases its own menus and listeners.</p><p>This guide describes the current refactor branch. Its SDK adaptation, automatic refresh and lifecycle fixes have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dashjs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dashjs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginDashControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-dash-control'</span><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></div></div><p>For script tags, load ArtPlayer, dash.js and <code>dist/artplayer-plugin-dash-control.js</code> before setup. The plugin global is <code>artplayerPluginDashControl</code>. Pin your dependency versions and use a browser-accessible MPD and segments.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>The example matches the <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control" target="_blank" rel="noreferrer">online DASH example</a>. Replace the site's container and media URL in your application.</p>`,10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),a(`<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:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789504112000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),a("",30)]))}const g=i(l,[["render",p]]);export{E as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789466111000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i(`<h1 id="hls-control" tabindex="-1">HLS Control <a class="header-anchor" href="#hls-control" aria-label="Permalink to "HLS Control""></a></h1><p><a href="./../../plugin/hls-control.html">中文说明</a></p><p>Add quality and audio-track menus to an Hls.js player. This plugin controls the Hls.js instance you provide at <code>art.hls</code>; it does not download, create or destroy the SDK.</p><p>This guide describes the current refactor branch. The automatic refresh and lifecycle fixes described here have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789504112000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i(`<h1 id="hls-control" tabindex="-1">HLS Control <a class="header-anchor" href="#hls-control" aria-label="Permalink to "HLS Control""></a></h1><p><a href="./../../plugin/hls-control.html">中文说明</a></p><p>Add quality and audio-track menus to an Hls.js player. This plugin controls the Hls.js instance you provide at <code>art.hls</code>; it does not download, create or destroy the SDK.</p><p>This guide describes the current refactor branch. The automatic refresh and lifecycle fixes described here have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hls </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'hls.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginHlsControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-hls-control'</span><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></div></div><p>For script tags, load ArtPlayer, Hls.js and the plugin's <code>dist/artplayer-plugin-hls-control.js</code> before running your setup. The plugin global is <code>artplayerPluginHlsControl</code>. Pin versions in your application and use media URLs that permit browser access.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>The example uses the site's player container and the same source as the <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control" target="_blank" rel="noreferrer">online HLS example</a>. Replace the container and stream URL in your application.</p>`,10),l("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ 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:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789466111000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i("",10),l("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789504112000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i("",10),l("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i("",23)]))}const g=a(t,[["render",p]]);export{E as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a(`<h1 id="vtt-thumbnail" tabindex="-1">VTT Thumbnail <a class="header-anchor" href="#vtt-thumbnail" aria-label="Permalink to "VTT Thumbnail""></a></h1><p><a href="./../../plugin/vtt-thumbnail.html">中文</a></p><p>Load a WebVTT thumbnail index and show the selected sprite region when hovering over the progress bar. Generate the index and images beforehand; this plugin does not scan the video or require another SDK.</p><p>This page describes the current refactor branch. Parser and lifecycle fixes and the precise <code>/runtime</code> types are not published yet. An unpinned npm or CDN installation is not evidence of this branch's behavior.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-vtt-thumbnail</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789504112000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a(`<h1 id="vtt-thumbnail" tabindex="-1">VTT Thumbnail <a class="header-anchor" href="#vtt-thumbnail" aria-label="Permalink to "VTT Thumbnail""></a></h1><p><a href="./../../plugin/vtt-thumbnail.html">中文</a></p><p>Load a WebVTT thumbnail index and show the selected sprite region when hovering over the progress bar. Generate the index and images beforehand; this plugin does not scan the video or require another SDK.</p><p>This page describes the current refactor branch. Parser and lifecycle fixes and the precise <code>/runtime</code> types are not published yet. An unpinned npm or CDN installation is not evidence of this branch's behavior.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-vtt-thumbnail</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginVttThumbnail </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-vtt-thumbnail'</span><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></div></div><p>For script loading, load ArtPlayer first, followed by <code>dist/artplayer-plugin-vtt-thumbnail.js</code>. The global is <code>artplayerPluginVttThumbnail</code>. Pin dependency versions and make the VTT and images accessible. Cross-origin VTT requests require appropriate server CORS headers.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>This is the exact code from the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail" target="_blank" rel="noreferrer">online thumbnail example</a>. The demo site supplies the media and <code>.artplayer-app</code> container; replace them in your application.</p>`,10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a(`<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:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-vtt-thumbnail</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginVttThumbnail from 'artplayer-plugin-vtt-thumbnail';</span></span>
|
||||
<span class="line"></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789504112000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789497001000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="独立音轨" tabindex="-1">独立音轨 <a class="header-anchor" href="#独立音轨" aria-label="Permalink to "独立音轨""></a></h1><p><a href="./../en/plugin/audio-track.html">English</a></p><p>为视频同步播放一个单独的音频文件。插件创建一个 <code>HTMLAudioElement</code>，跟随主视频的播放、暂停、进度、音量和播放速率，不需要额外 SDK，也不提供音轨选择菜单。</p><p>本页描述当前重构分支。生命周期修复和 <code>/runtime</code> 精确类型尚未发布；未固定版本的 npm/CDN 安装不能当作本分支代码。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-audio-track</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789504112000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="独立音轨" tabindex="-1">独立音轨 <a class="header-anchor" href="#独立音轨" aria-label="Permalink to "独立音轨""></a></h1><p><a href="./../en/plugin/audio-track.html">English</a></p><p>为视频同步播放一个单独的音频文件。插件创建一个 <code>HTMLAudioElement</code>，跟随主视频的播放、暂停、进度、音量和播放速率，不需要额外 SDK，也不提供音轨选择菜单。</p><p>本页描述当前重构分支。生命周期修复和 <code>/runtime</code> 精确类型尚未发布；未固定版本的 npm/CDN 安装不能当作本分支代码。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-audio-track</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginAudioTrack </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-audio-track'</span><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></div></div><p>通过 script 使用时，先加载 ArtPlayer，再加载插件的 <code>dist/artplayer-plugin-audio-track.js</code>，全局名称为 <code>artplayerPluginAudioTrack</code>。应用应固定依赖版本，并提供浏览器可解码和访问的音频地址。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-audio-track/index.js&example=audio.track" target="_blank" rel="noreferrer">在线音轨示例</a>使用同一份代码。站点提供示例媒体和 <code>.artplayer-app</code> 容器；接入自己的应用时替换这些地址和容器。</p>`,10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),a(`<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:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-audio-track</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginAudioTrack from 'artplayer-plugin-audio-track';</span></span>
|
||||
<span class="line"></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789497001000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),a("",22)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789504112000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),a("",22)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-label="Permalink to "弹幕库""></a></h1><p><a href="./../en/plugin/danmuku.html">English guide</a></p><p>本文描述当前重构分支。<code>/runtime</code> 类型入口与本轮修复尚未发布到 npm；CDN 默认仍加载已发布版本。</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-label="Permalink to "演示""></a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><p>下方 Run Code 使用本站构建的插件与样本。接入自己的应用时，请替换容器和媒体 URL。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-0" checked><label data-title="npm" for="tab-artplayer-5c9980847c7191f0-0">npm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-1"><label data-title="yarn" for="tab-artplayer-5c9980847c7191f0-1">yarn</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-2"><label data-title="pnpm" for="tab-artplayer-5c9980847c7191f0-2">pnpm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-3"><label data-title="script" for="tab-artplayer-5c9980847c7191f0-3">script</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><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></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adap
Line truncated
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789504112000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-label="Permalink to "弹幕库""></a></h1><p><a href="./../en/plugin/danmuku.html">English guide</a></p><p>本文描述当前重构分支。<code>/runtime</code> 类型入口与本轮修复尚未发布到 npm；CDN 默认仍加载已发布版本。</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-label="Permalink to "演示""></a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><p>下方 Run Code 使用本站构建的插件与样本。接入自己的应用时，请替换容器和媒体 URL。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-0" checked><label data-title="npm" for="tab-artplayer-5c9980847c7191f0-0">npm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-1"><label data-title="yarn" for="tab-artplayer-5c9980847c7191f0-1">yarn</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-2"><label data-title="pnpm" for="tab-artplayer-5c9980847c7191f0-2">pnpm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-3"><label data-title="script" for="tab-artplayer-5c9980847c7191f0-3">script</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><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></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adap
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕文本</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕时间, 单位秒，省略时为当前播放器时间加 0.5 秒；显式 0 保留</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</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:#6A737D;--shiki-dark:#6A737D;">// 弹幕模式: 0: 滚动(默认)，1: 顶部，2: 底部</span></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",25),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",8),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",9)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789504112000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",25),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",8),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",9)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789466970000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="dash-控制" tabindex="-1">DASH 控制 <a class="header-anchor" href="#dash-控制" aria-label="Permalink to "DASH 控制""></a></h1><p><a href="./../en/plugin/dash-control.html">English</a></p><p>为 dash.js 播放器添加画质和音轨菜单。你负责创建 SDK、绑定 video 并赋给 <code>art.dash</code>；插件控制这个实例，只清理自己创建的菜单和监听器。</p><p>本页描述当前重构分支。这里的 SDK 适配、自动刷新和生命周期修复尚未发布；未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789504112000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="dash-控制" tabindex="-1">DASH 控制 <a class="header-anchor" href="#dash-控制" aria-label="Permalink to "DASH 控制""></a></h1><p><a href="./../en/plugin/dash-control.html">English</a></p><p>为 dash.js 播放器添加画质和音轨菜单。你负责创建 SDK、绑定 video 并赋给 <code>art.dash</code>；插件控制这个实例，只清理自己创建的菜单和监听器。</p><p>本页描述当前重构分支。这里的 SDK 适配、自动刷新和生命周期修复尚未发布；未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dashjs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dashjs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginDashControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-dash-control'</span><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></div></div><p>使用 script 标签时，在初始化前加载 ArtPlayer、dash.js 和 <code>dist/artplayer-plugin-dash-control.js</code>。插件全局名称为 <code>artplayerPluginDashControl</code>。应用应固定依赖版本，并使用浏览器可访问的 MPD 和媒体片段。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control" target="_blank" rel="noreferrer">在线 DASH 示例</a>使用相同代码。接入应用时替换站点容器和视频地址。</p>`,10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ 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:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789466970000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789504112000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),i("",30)]))}const g=a(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="hls-控制" tabindex="-1">HLS 控制 <a class="header-anchor" href="#hls-控制" aria-label="Permalink to "HLS 控制""></a></h1><p><a href="./../en/plugin/hls-control.html">English</a></p><p>为 Hls.js 播放器添加画质与音轨菜单。插件控制你放在 <code>art.hls</code> 上的 Hls.js 实例，不负责下载、创建或销毁 SDK。</p><p>本页描述当前重构分支。这里说明的自动刷新与生命周期修复尚未发布；未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789504112000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="hls-控制" tabindex="-1">HLS 控制 <a class="header-anchor" href="#hls-控制" aria-label="Permalink to "HLS 控制""></a></h1><p><a href="./../en/plugin/hls-control.html">English</a></p><p>为 Hls.js 播放器添加画质与音轨菜单。插件控制你放在 <code>art.hls</code> 上的 Hls.js 实例，不负责下载、创建或销毁 SDK。</p><p>本页描述当前重构分支。这里说明的自动刷新与生命周期修复尚未发布；未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hls </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'hls.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginHlsControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-hls-control'</span><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></div></div><p>通过 script 标签使用时，先加载 ArtPlayer、Hls.js 和插件的 <code>dist/artplayer-plugin-hls-control.js</code>。插件全局名称为 <code>artplayerPluginHlsControl</code>。应用中应固定依赖版本，并使用允许浏览器访问的视频地址。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control" target="_blank" rel="noreferrer">在线 HLS 示例</a>使用同一份代码和站点容器。接入自己的应用时替换容器与视频地址。</p>`,10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ 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:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789504112000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i("",23)]))}const g=a(e,[["render",h]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="vtt-缩略图" tabindex="-1">VTT 缩略图 <a class="header-anchor" href="#vtt-缩略图" aria-label="Permalink to "VTT 缩略图""></a></h1><p><a href="./../en/plugin/vtt-thumbnail.html">English</a></p><p>读取一份 WebVTT 缩略图索引，在进度条悬停时显示对应的精灵图区域。图片和索引需要提前生成；插件不扫描视频，也不需要额外 SDK。</p><p>本页描述当前重构分支。解析和生命周期修复、<code>/runtime</code> 精确类型尚未发布；未固定版本的 npm/CDN 安装不能当作本分支代码。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-vtt-thumbnail</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789504112000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="vtt-缩略图" tabindex="-1">VTT 缩略图 <a class="header-anchor" href="#vtt-缩略图" aria-label="Permalink to "VTT 缩略图""></a></h1><p><a href="./../en/plugin/vtt-thumbnail.html">English</a></p><p>读取一份 WebVTT 缩略图索引，在进度条悬停时显示对应的精灵图区域。图片和索引需要提前生成；插件不扫描视频，也不需要额外 SDK。</p><p>本页描述当前重构分支。解析和生命周期修复、<code>/runtime</code> 精确类型尚未发布；未固定版本的 npm/CDN 安装不能当作本分支代码。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-vtt-thumbnail</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginVttThumbnail </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-vtt-thumbnail'</span><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></div></div><p>通过 script 使用时先加载 ArtPlayer，再加载插件的 <code>dist/artplayer-plugin-vtt-thumbnail.js</code>。全局名称为 <code>artplayerPluginVttThumbnail</code>。固定依赖版本，并确保页面能读取 VTT、加载图片；跨域 VTT 请求需要服务器允许 CORS。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail" target="_blank" rel="noreferrer">在线缩略图示例</a>使用同一份代码。站点提供媒体和 <code>.artplayer-app</code> 容器，自己的应用需要替换对应地址。</p>`,10),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a(`<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:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-vtt-thumbnail</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginVttThumbnail from 'artplayer-plugin-vtt-thumbnail';</span></span>
|
||||
<span class="line"></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789504112000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
Reference in new issue
Block a user