mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-17 18:11:20 -08:00
docs(core): [SITE-04] document CSS variables and theme behavior
This commit is contained in:
Harvey Zhao committed
1 parent
24011ea266
commit
cec5049c40
92 files changed
+5158
-2470
No files matched your search
+12
-3
@@ -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/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.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="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-label="Permalink to "`play`""></a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</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>
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),p={name:"advanced/property.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('<h1 id="实例属性" tabindex="-1">实例属性 <a class="header-anchor" href="#实例属性" aria-label="Permalink to "实例属性""></a></h1><p>这里的 <code>实例属性</code> 是指挂载在 <code>实例</code> 的 <code>一级属性</code>，比较常用</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-label="Permalink to "`play`""></a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</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;"> muted: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
@@ -373,7 +373,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 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;">(art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'green'</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;">(art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</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></div></div><h2 id="quality" tabindex="-1"><code>quality</code> <a class="header-anchor" href="#quality" aria-label="Permalink to "\`quality\`""></a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Array</code></li></ul><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;">});</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><h3 id="css-variable-contract" tabindex="-1">读取、写入与样式优先级 <a class="header-anchor" href="#css-variable-contract" aria-label="Permalink to "读取、写入与样式优先级 {#css-variable-contract}""></a></h3><p>art.cssVar(name) 从 art.template.$player 的 getComputedStyle 读取并返回<strong>字符串</strong>，透明度、缩放和层级也一样。返回的是计算后的自定义属性文本，不是解析后的数字，也不一定是规范化颜色。不存在的变量返回空字符串；art.theme 转发到 '--art-theme'。</p><p>第二参数沿用历史真值判断：真值调用 style.setProperty，返回 undefined；数字 0、空字符串、false、null、undefined 或 NaN 会改为读取当前值。写入零请用字符串 '0'。删除行内覆盖使用 art.template.$player.style.removeProperty(name)，cssVar(name, '') 不会删除。值直接交给 CSS，不按 CssVar 校验；非法 token 可能被保存，但使用它的 CSS 属性可能回退或失效。</p><p>写入只作用于本实例的行内样式及其后代，不影响其他实例；不会同步修改 art.option.cssVar 或 art.option.theme，不派发 theme 事件，也不会安装插件。构造时非空 option.theme 优先于初始 '--art-theme' 配置。外部样式按正常 CSS 层叠规则处理，应定位到真正的 .art-video-player：该节点自身的内置默认值可能覆盖仅从容器继承的值。行内覆盖通常优先于普通样式规则，!important 仍可能改变结果。</p><p>根入口 cssVar 签名保留历史数字/字面量类型，包括 '--art-fullscreen-web-index' 的 9999；实际运行时不限于该字面量。runtime 入口提供字符串读取及 string-or-void 写入类型，行为不变；构造 cssVar 配置仍有独立的历史类型形状。</p><h3 id="css-variable-defaults" tabindex="-1">内置默认值与使用位置 <a class="header-anchor" href="#css-variable-defaults" aria-label="Permalink to "内置默认值与使用位置 {#css-variable-defaults}""></a></h3><p>下表是基础样式值，尚未叠加构造配置、移动端/全屏类、用户 CSS 或行内样式。长度值按 CSS 要求提供单位。变量列在这里不代表所有浏览器都支持相关伪元素或功能。</p><table tabindex="0"><thead><tr><th>变量</th><th>基础值</th><th>用途</th></tr></thead><tbody><tr><td><code>--art-theme</code></td><td><code>#f00</code></td><td>进度、选中项等主题色</td></tr><tr><td><code>--art-font-color</code></td><td><code>#fff</code></td><td>基础文字、链接与 SVG 填充</td></tr><tr><td><code>--art-background-color</code></td><td><code>#000</code></td><td>播放器背景</td></tr><tr><td><code>--art-text-shadow-color</code></td><td><code>rgba(0, 0, 0, 0.5)</code></td><td>基础文字阴影颜色</td></tr><tr><td><code>--art-transition-duration</code></td><td><code>0.2s</code></td><td>使用该变量的界面过渡时长，不包含所有动画</td></tr><tr><td><code>--art-padding</code></td><td><code>10px</code></td><td>底栏、菜单、信息等边距</td></tr><tr><td><code>--art-border-radius</code></td><td><code>3px</code></td><td>弹层、提示等圆角</td></tr><tr><td><code>--art-progress-height</code></td><td><code>6px</code></td><td>进度控件高度，内部轨道默认是它的一半</td></tr><tr><td><code>--art-progress-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>进度轨道背景</td></tr><tr><td><code>--art-progress-top-gap</code></td><td><code>10px</code></td><td>进度条上方交互区域的 padding</td></tr><tr><td><code>--art-hover-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>进度悬停范围颜色</td></tr><tr><td><code>--art-loaded-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>已缓冲范围颜色</td></tr><tr><td><code>--art-state-size</code></td><td><code>80px</code></td><td>中间播放状态按钮尺寸</td></tr><tr><td><code>--art-state-opacity</code></td><td><code>0.8</code></td><td>显示时的状态按钮透明度</td></tr><tr><td><code>--art-bottom-height</code></td><td><code>100px</code></td><td>底部渐变背景高度，不是底栏布局总高度</td></tr><tr><td><code>--art-bottom-offset</code></td><td><code>20px</code></td><td>隐藏时底部控件的平移距离</td></tr><tr><td><code>--art-bottom-gap</code></td><td><code>5Line truncated
|
||||
<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;"> });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> opacity</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</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;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-fullscreen-web-index'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'10001'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'green'</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;"> theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.theme;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.template.$player?.style.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [opacity, result, theme];</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><h2 id="quality" tabindex="-1"><code>quality</code> <a class="header-anchor" href="#quality" aria-label="Permalink to "\`quality\`""></a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Array</code></li></ul><p>动态设置画质列表</p>`,17),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;"> quality: [</span></span>
|
||||
@@ -424,4 +433,4 @@ 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.subtitleOffset </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</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>`,1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y 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></div></div>`,1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o 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/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[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("",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("",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("",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("",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("",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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",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("",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("",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("",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("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),p={name:"advanced/property.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[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("",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("",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("",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("",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("",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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",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("",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("",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("",17),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(p,[["render",t]]);export{g as __pageData,o as default};
|
||||
@@ -1 +1 @@
|
||||
import{t as p}from"./chunks/theme.BHEFJdsm.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.BeK0pS9I.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
+12
-3
@@ -1,4 +1,4 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('<h1 id="instance-properties" tabindex="-1">Instance Properties <a class="header-anchor" href="#instance-properties" aria-label="Permalink to "Instance Properties""></a></h1><p>Here, <code>Instance Properties</code> refer to the <code>first-level properties</code> mounted on the <code>instance</code>, which are commonly used.</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-label="Permalink to "`play`""></a></h2><ul><li>Type: <code>Function</code></li></ul><p>Play the video.</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>
|
||||
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":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s('<h1 id="instance-properties" tabindex="-1">Instance Properties <a class="header-anchor" href="#instance-properties" aria-label="Permalink to "Instance Properties""></a></h1><p>Here, <code>Instance Properties</code> refer to the <code>first-level properties</code> mounted on the <code>instance</code>, which are commonly used.</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-label="Permalink to "`play`""></a></h2><ul><li>Type: <code>Function</code></li></ul><p>Play the video.</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;"> muted: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
@@ -373,7 +373,16 @@ import{_ as n,o as l,c as e,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;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'green'</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;">(art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-theme'</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></div></div><h2 id="quality" tabindex="-1"><code>quality</code> <a class="header-anchor" href="#quality" aria-label="Permalink to "\`quality\`""></a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Array</code></li></ul><p>Dynamically set the quality list.</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></div></div><h3 id="css-variable-contract" tabindex="-1">Values, writes, and cascade <a class="header-anchor" href="#css-variable-contract" aria-label="Permalink to "Values, writes, and cascade {#css-variable-contract}""></a></h3><p>art.cssVar(name) reads getComputedStyle from art.template.$player and returns a <strong>string</strong>, including for opacity, scale and z-index. It returns the computed custom-property text, not a parsed number or necessarily a normalized color. A missing variable returns an empty string. art.theme delegates to '--art-theme'.</p><p>The second argument uses a historical truthiness check. A truthy value calls style.setProperty and returns undefined; numeric 0, an empty string, false, null, undefined or NaN instead read the current value. Use the string '0' to write zero. To remove an inline override, use art.template.$player.style.removeProperty(name); cssVar(name, '') does not remove it. Values are passed to CSS rather than validated against CssVar; invalid CSS tokens may be stored while the consuming property falls back or becomes invalid.</p><p>Writes affect this player's inline style and its descendants, not other instances. They do not update art.option.cssVar or art.option.theme, emit a theme event, or install a plugin. At construction, nonempty option.theme takes precedence over the initial '--art-theme' option. External styles follow normal CSS cascade rules: scope overrides to the actual .art-video-player, because the built-in defaults declared on that node can override values merely inherited from its container. Inline overrides generally win ordinary stylesheet declarations; !important declarations can still change the result.</p><p>The root cssVar signature retains historical numeric/literal types, including the 9999 literal for '--art-fullscreen-web-index'. Runtime values are not limited to that literal. The runtime entry exposes string reads and string-or-void writes without changing behavior; the constructor's legacy cssVar option shape remains distinct.</p><h3 id="css-variable-defaults" tabindex="-1">Built-in defaults and consumers <a class="header-anchor" href="#css-variable-defaults" aria-label="Permalink to "Built-in defaults and consumers {#css-variable-defaults}""></a></h3><p>These are the base stylesheet values, before constructor overrides, mobile/fullscreen classes, user CSS and inline styles. Length values need CSS units where applicable. Naming a variable here does not prove support for a browser-specific pseudo-element or feature.</p><table tabindex="0"><thead><tr><th>Variable</th><th>Base value</th><th>Used for</th></tr></thead><tbody><tr><td><code>--art-theme</code></td><td><code>#f00</code></td><td>Accent color for progress and selected items</td></tr><tr><td><code>--art-font-color</code></td><td><code>#fff</code></td><td>Base text, links and SVG fill</td></tr><tr><td><code>--art-background-color</code></td><td><code>#000</code></td><td>Player background</td></tr><tr><td><code>--art-text-shadow-color</code></td><td><code>rgba(0, 0, 0, 0.5)</code></td><td>Base text shadow color</td></tr><tr><td><code>--art-transition-duration</code></td><td><code>0.2s</code></td><td>Duration for transitions that consume it, not every animation</td></tr><tr><td><code>--art-padding</code></td><td><code>10px</code></td><td>Spacing for the bottom area, menus and info</td></tr><tr><td><code>--art-border-radius</code></td><td><code>3px</code></td><td>Corner radius for panels and tips</td></tr><tr><td><code>--art-progress-height</code></td><td><code>6px</code></td><td>Progress control height; inner track starts at half height</td></tr><tr><td><code>--art-progress-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>Progress track background</td></tr><tr><td><code>--art-progress-top-gap</code></td><td><code>10px</code></td><td>Top interaction padding above the progress track</td></tr><tr><td><code>--art-hover-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>Progress hover range color</td></tr><tr><td><code>--art-loaded-color</code></td><td><code>rgba(255, 255, 255, 0.25)</code></td><td>Buffered range color</td></tr><tr><td><code>--art-state-size</code></td><td><code>80px</code></td><td>Central playback-state button size</td></tr><tr><td><code>--art-state-opacity</code></td><td><code>0.8</code></td><td>State-button opacity when shown</td>Line truncated
|
||||
<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;"> });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> opacity</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</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;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cssVar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-fullscreen-web-index'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'10001'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'green'</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;"> theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.theme;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.template.$player?.style.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'--art-control-opacity'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [opacity, result, theme];</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><h2 id="quality" tabindex="-1"><code>quality</code> <a class="header-anchor" href="#quality" aria-label="Permalink to "\`quality\`""></a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Array</code></li></ul><p>Dynamically set the quality list.</p>`,17),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;"> quality: [</span></span>
|
||||
@@ -424,4 +433,4 @@ import{_ as n,o as l,c as e,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.subtitleOffset </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</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>`,1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y 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></div></div>`,1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[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("",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("",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("",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("",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("",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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",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("",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("",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("",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("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[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("",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("",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("",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("",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("",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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",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("",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("",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("",17),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 n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s(`<h1 id="basic-options" tabindex="-1">Basic Options <a class="header-anchor" href="#basic-options" aria-label="Permalink to "Basic Options""></a></h1><h2 id="construction-contract" tabindex="-1">Construction and option ownership <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "Construction and option ownership {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> is synchronous. It requires a browser and a DIV container, either directly or selected by a CSS selector. The default getter includes '#artplayer', but constructor input must supply container: the input value replaces that default before validation. One active instance owns each container. Without useSSR, mounting replaces its contents; with useSSR, insert the matching Artplayer.html first. This flag does not enable server-side construction or repair incomplete markup.</p><p>Each construction reads a fresh Artplayer.option, merges the input, validates it, then creates the subsystems. Validation failure happens before DOM mounting or proxy invocation. Initialization failures release owned resources and restore the captured container; a successful constructor return does not mean media, subtitles, asynchronous plugins, or external SDKs are ready.</p><p>The second argument is the ready callback, not an option named onReady. A normal function receives the player as both this and its argument. It is registered after constructor plugins and runs from the first successfully handled canplay; it does not await plugin Promises. An empty URL is valid and can be assigned later. The numeric art.id is separate from option.id, which is the optional playback-memory key.</p><h3 id="option-merge" tabindex="-1">Merge and validation <a class="header-anchor" href="#option-merge" aria-label="Permalink to "Merge and validation {#option-merge}""></a></h3><ul><li>Artplayer.option returns fresh nested defaults on every access; modifying one returned object does not set global defaults. lang reads the current navigator.language in lowercase; moreVideoAttr.preload uses the module's Safari detection. In non-browser inspection lang may be undefined, but construction still requires a browser.</li><li>Merging creates a new top-level object and recursively merges objects present on both sides. Arrays use the existing concat/spread rule, so the array itself is new but its ordinary object items retain identity. Function and Element references are retained; this is not a complete deep clone. Components may later add metadata to shared item objects.</li><li>Own enumerable extension fields survive without schema validation. Inherited fields are generally omitted, except container is read explicitly from the input again. Accessor properties can therefore run more than once. An explicit undefined can replace a required default and cause a validation error; omission and undefined are not interchangeable.</li><li>Artplayer.scheme is a shared mutable schema. Artplayer.validator(value, scheme) validates an already supplied value, returns that same value on success, and throws at the first invalid known field. It neither merges defaults nor mounts a player. Artplayer.kindOf is the validator's type classifier, not a media-capability test. Runtime types also expose the validator's optional diagnostic path argument.</li><li>art.option is the resolved live object, not a reactive configuration API. Some handlers read it later, while other settings are captured or build UI only during initialization. Change playback through the documented setters and UI through the component managers; assigning a new option field does not automatically rebuild everything.</li></ul><h3 id="option-precedence" tabindex="-1">Initial media values and precedence <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "Initial media values and precedence {#option-precedence}""></a></h3><p>moreVideoAttr is copied through art.attr as media <strong>properties</strong>, not setAttribute calls. A value of undefined follows attr's getter behavior and does not write. The core then applies truthy muted, volume, poster, autoplay, playsInline and theme settings, CSS variables, and the URL. Do not depend on object-key order to override these later steps.</p><p>The historical volume initialization only assigns a truthy option.volume, clamped to [0,1]; volume:0 therefore skips that assignment. A numeric saved storage volume is applied afterward and overrides it. For explicit initial silence, use muted:true; set art.
Line truncated
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1789517636000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s(`<h1 id="basic-options" tabindex="-1">Basic Options <a class="header-anchor" href="#basic-options" aria-label="Permalink to "Basic Options""></a></h1><h2 id="construction-contract" tabindex="-1">Construction and option ownership <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "Construction and option ownership {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> is synchronous. It requires a browser and a DIV container, either directly or selected by a CSS selector. The default getter includes '#artplayer', but constructor input must supply container: the input value replaces that default before validation. One active instance owns each container. Without useSSR, mounting replaces its contents; with useSSR, insert the matching Artplayer.html first. This flag does not enable server-side construction or repair incomplete markup.</p><p>Each construction reads a fresh Artplayer.option, merges the input, validates it, then creates the subsystems. Validation failure happens before DOM mounting or proxy invocation. Initialization failures release owned resources and restore the captured container; a successful constructor return does not mean media, subtitles, asynchronous plugins, or external SDKs are ready.</p><p>The second argument is the ready callback, not an option named onReady. A normal function receives the player as both this and its argument. It is registered after constructor plugins and runs from the first successfully handled canplay; it does not await plugin Promises. An empty URL is valid and can be assigned later. The numeric art.id is separate from option.id, which is the optional playback-memory key.</p><h3 id="option-merge" tabindex="-1">Merge and validation <a class="header-anchor" href="#option-merge" aria-label="Permalink to "Merge and validation {#option-merge}""></a></h3><ul><li>Artplayer.option returns fresh nested defaults on every access; modifying one returned object does not set global defaults. lang reads the current navigator.language in lowercase; moreVideoAttr.preload uses the module's Safari detection. In non-browser inspection lang may be undefined, but construction still requires a browser.</li><li>Merging creates a new top-level object and recursively merges objects present on both sides. Arrays use the existing concat/spread rule, so the array itself is new but its ordinary object items retain identity. Function and Element references are retained; this is not a complete deep clone. Components may later add metadata to shared item objects.</li><li>Own enumerable extension fields survive without schema validation. Inherited fields are generally omitted, except container is read explicitly from the input again. Accessor properties can therefore run more than once. An explicit undefined can replace a required default and cause a validation error; omission and undefined are not interchangeable.</li><li>Artplayer.scheme is a shared mutable schema. Artplayer.validator(value, scheme) validates an already supplied value, returns that same value on success, and throws at the first invalid known field. It neither merges defaults nor mounts a player. Artplayer.kindOf is the validator's type classifier, not a media-capability test. Runtime types also expose the validator's optional diagnostic path argument.</li><li>art.option is the resolved live object, not a reactive configuration API. Some handlers read it later, while other settings are captured or build UI only during initialization. Change playback through the documented setters and UI through the component managers; assigning a new option field does not automatically rebuild everything.</li></ul><h3 id="option-precedence" tabindex="-1">Initial media values and precedence <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "Initial media values and precedence {#option-precedence}""></a></h3><p>moreVideoAttr is copied through art.attr as media <strong>properties</strong>, not setAttribute calls. A value of undefined follows attr's getter behavior and does not write. The core then applies truthy muted, volume, poster, autoplay, playsInline and theme settings, CSS variables, and the URL. Do not depend on object-key order to override these later steps.</p><p>The historical volume initialization only assigns a truthy option.volume, clamped to [0,1]; volume:0 therefore skips that assignment. A numeric saved storage volume is applied afterward and overrides it. For explicit initial silence, use muted:true; set art.
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> LegacyInput } </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;"> 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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput, ProxyHost } </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>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),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("",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("",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("",6),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("",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("",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("",6),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("",6),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("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),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("",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("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(t,[["render",p]]);export{o as __pageData,g as default};
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1789517636000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),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("",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("",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("",6),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("",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("",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("",6),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("",6),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("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),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("",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("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(t,[["render",p]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s(`<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-label="Permalink to "基础选项""></a></h1><h2 id="construction-contract" tabindex="-1">构造与配置归属 <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "构造与配置归属 {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> 同步构造实例，需要浏览器和 DIV 容器，可以传节点或 CSS 选择器。默认值里虽然有 '#artplayer'，构造输入仍必须提供 container：校验前会用输入值覆盖该默认值。同一容器同时只能归属一个活跃实例。未开启 useSSR 时会替换容器内容；开启后须提前放入版本匹配的 Artplayer.html，它不会启用服务端构造，也不会修补缺失的模板。</p><p>每次构造读取一份新的 Artplayer.option，合并输入、校验后再创建子系统。配置校验失败发生在挂载 DOM 和调用 proxy 之前。初始化失败会释放已归属的资源并恢复捕获的容器内容；构造器成功返回不代表媒体、字幕、异步插件或外部 SDK 已就绪。</p><p>第二参数才是 ready 回调，不是名为 onReady 的配置项。普通函数的 this 和第一个参数都是播放器实例。该回调在构造插件之后注册，由首次成功处理的 canplay 触发，不等待插件 Promise。允许空 URL，之后再赋值。数字 art.id 与 option.id 不同，后者是可选的播放记忆键。</p><h3 id="option-merge" tabindex="-1">合并与校验 <a class="header-anchor" href="#option-merge" aria-label="Permalink to "合并与校验 {#option-merge}""></a></h3><ul><li>每次读取 Artplayer.option 都得到独立的嵌套默认配置，修改返回对象不会设置全局默认值。lang 读取当前 navigator.language 并转为小写；moreVideoAttr.preload 使用模块加载时的 Safari 判断。非浏览器读取时 lang 可能为 undefined，但构造仍要求浏览器。</li><li>合并创建新的顶层对象，两边都存在的对象递归合并；数组沿用 concat/spread 规则，因此数组本身是新的，普通对象成员仍保留身份。函数和 Element 保留引用，这不是完整深拷贝。组件之后可能给共享的条目对象添加元信息。</li><li>自有可枚举的扩展字段保留，不受 schema 校验。继承字段通常不参与，container 则会再次从输入显式读取，因此 getter 可能执行多次。显式 undefined 可以覆盖必填默认值并导致校验失败，不能当作省略字段。</li><li>Artplayer.scheme 是共享且可修改的校验规则。Artplayer.validator(value, scheme) 校验传入值，成功返回原对象，遇到第一个非法已知字段即抛错；不合并默认值，也不挂载播放器。Artplayer.kindOf 是校验器的类型分类函数，不是媒体能力检测。runtime 类型还提供校验器用于错误路径的可选第三参数。</li><li>art.option 是合并后的实际对象，不是响应式配置入口。一些回调之后仍会读取它，另一些值只在初始化时捕获或创建 UI。播放行为使用对应 setter，UI 使用组件管理器；给配置字段赋新值不会自动重建全部功能。</li></ul><h3 id="option-precedence" tabindex="-1">初始媒体值与优先级 <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "初始媒体值与优先级 {#option-precedence}""></a></h3><p>moreVideoAttr 通过 art.attr 写入媒体的<strong>属性</strong>，不是调用 setAttribute。值为 undefined 时沿用 attr 的读取分支，不执行写入。之后核心应用真值 muted、volume、poster、autoplay、playsInline 和 theme，再写 CSS 变量及 URL。不能依靠 moreVideoAttr 的字段顺序覆盖后续步骤。</p><p>历史音量初始化只写入真值 option.volume 并钳制到 [0,1]，因此 volume:0 会跳过这一步；随后读取的数字 storage 音量还会覆盖配置值。要求初始静音时使用 muted:true，需要覆盖记忆音量时在构造后设置 art.volume。autoplay/muted/playsInline 的 false 不会撤销 moreVideoAttr 已写入的属性。自动播放及行内播放仍受浏览器策略限制。</p><p>非空 theme 会先把 '--art-theme' 写入合并后的 cssVar，再应用样式，因此优先于冲突的初始 cssVar 值。poster 使用播放器的背景层。loop 由 ended 回调执行 seek=0 和 play，区别于通过 moreVideoAttr 设置原生 video.loop。</p><h3 id="option-capabilities" tabindex="-1">UI、平台与内
Line truncated
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1789517636000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s(`<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-label="Permalink to "基础选项""></a></h1><h2 id="construction-contract" tabindex="-1">构造与配置归属 <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "构造与配置归属 {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> 同步构造实例，需要浏览器和 DIV 容器，可以传节点或 CSS 选择器。默认值里虽然有 '#artplayer'，构造输入仍必须提供 container：校验前会用输入值覆盖该默认值。同一容器同时只能归属一个活跃实例。未开启 useSSR 时会替换容器内容；开启后须提前放入版本匹配的 Artplayer.html，它不会启用服务端构造，也不会修补缺失的模板。</p><p>每次构造读取一份新的 Artplayer.option，合并输入、校验后再创建子系统。配置校验失败发生在挂载 DOM 和调用 proxy 之前。初始化失败会释放已归属的资源并恢复捕获的容器内容；构造器成功返回不代表媒体、字幕、异步插件或外部 SDK 已就绪。</p><p>第二参数才是 ready 回调，不是名为 onReady 的配置项。普通函数的 this 和第一个参数都是播放器实例。该回调在构造插件之后注册，由首次成功处理的 canplay 触发，不等待插件 Promise。允许空 URL，之后再赋值。数字 art.id 与 option.id 不同，后者是可选的播放记忆键。</p><h3 id="option-merge" tabindex="-1">合并与校验 <a class="header-anchor" href="#option-merge" aria-label="Permalink to "合并与校验 {#option-merge}""></a></h3><ul><li>每次读取 Artplayer.option 都得到独立的嵌套默认配置，修改返回对象不会设置全局默认值。lang 读取当前 navigator.language 并转为小写；moreVideoAttr.preload 使用模块加载时的 Safari 判断。非浏览器读取时 lang 可能为 undefined，但构造仍要求浏览器。</li><li>合并创建新的顶层对象，两边都存在的对象递归合并；数组沿用 concat/spread 规则，因此数组本身是新的，普通对象成员仍保留身份。函数和 Element 保留引用，这不是完整深拷贝。组件之后可能给共享的条目对象添加元信息。</li><li>自有可枚举的扩展字段保留，不受 schema 校验。继承字段通常不参与，container 则会再次从输入显式读取，因此 getter 可能执行多次。显式 undefined 可以覆盖必填默认值并导致校验失败，不能当作省略字段。</li><li>Artplayer.scheme 是共享且可修改的校验规则。Artplayer.validator(value, scheme) 校验传入值，成功返回原对象，遇到第一个非法已知字段即抛错；不合并默认值，也不挂载播放器。Artplayer.kindOf 是校验器的类型分类函数，不是媒体能力检测。runtime 类型还提供校验器用于错误路径的可选第三参数。</li><li>art.option 是合并后的实际对象，不是响应式配置入口。一些回调之后仍会读取它，另一些值只在初始化时捕获或创建 UI。播放行为使用对应 setter，UI 使用组件管理器；给配置字段赋新值不会自动重建全部功能。</li></ul><h3 id="option-precedence" tabindex="-1">初始媒体值与优先级 <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "初始媒体值与优先级 {#option-precedence}""></a></h3><p>moreVideoAttr 通过 art.attr 写入媒体的<strong>属性</strong>，不是调用 setAttribute。值为 undefined 时沿用 attr 的读取分支，不执行写入。之后核心应用真值 muted、volume、poster、autoplay、playsInline 和 theme，再写 CSS 变量及 URL。不能依靠 moreVideoAttr 的字段顺序覆盖后续步骤。</p><p>历史音量初始化只写入真值 option.volume 并钳制到 [0,1]，因此 volume:0 会跳过这一步；随后读取的数字 storage 音量还会覆盖配置值。要求初始静音时使用 muted:true，需要覆盖记忆音量时在构造后设置 art.volume。autoplay/muted/playsInline 的 false 不会撤销 moreVideoAttr 已写入的属性。自动播放及行内播放仍受浏览器策略限制。</p><p>非空 theme 会先把 '--art-theme' 写入合并后的 cssVar，再应用样式，因此优先于冲突的初始 cssVar 值。poster 使用播放器的背景层。loop 由 ended 回调执行 seek=0 和 play，区别于通过 moreVideoAttr 设置原生 video.loop。</p><h3 id="option-capabilities" tabindex="-1">UI、平台与内
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> LegacyInput } </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;"> 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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput, ProxyHost } </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>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),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("",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("",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("",6),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("",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("",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("",6),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("",6),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("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),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("",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("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1789517636000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),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("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),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("",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("",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("",6),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("",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("",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("",6),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("",6),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("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),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("",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("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
|
||||
Reference in new issue
Block a user