mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-10 04:36:15 -08:00
28 lines
37 KiB
JavaScript
28 lines
37 KiB
JavaScript
import{_ as e,o as t,c as n,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1789519661000}'),l={name:"advanced/class.md"};function d(h,a,p,r,k,o){return t(),n("div",null,a[0]||(a[0]=[s('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to "静态属性""></a></h1><p>这里的 <code>静态属性</code> 是指挂载在 <code>构造函数</code> 的 <code>一级属性</code>，非常少使用</p><h2 id="instances" tabindex="-1"><code>instances</code> <a class="header-anchor" href="#instances" aria-label="Permalink to "`instances`""></a></h2><p>返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Artplayer.instances]);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="version" tabindex="-1"><code>version</code> <a class="header-anchor" href="#version" aria-label="Permalink to "\`version\`""></a></h2><p>返回播放器的版本信息</p>`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.version);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="env" tabindex="-1"><code>env</code> <a class="header-anchor" href="#env" aria-label="Permalink to "`env`""></a></h2><p>历史根声明保留此字段，但冻结的 npm 5.4.0 与当前 6.0.0 运行时均未提供，读取返回 undefined，不能用来可靠判断运行环境。</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.env);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="build" tabindex="-1"><code>build</code> <a class="header-anchor" href="#build" aria-label="Permalink to "`build`""></a></h2><p>历史根声明保留此字段，但冻结的 npm 5.4.0 与当前 6.0.0 运行时均未在此提供打包时间，读取返回 undefined；需要时应使用自己的发布元信息。</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.build);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="config" tabindex="-1"><code>config</code> <a class="header-anchor" href="#config" aria-label="Permalink to "`config`""></a></h2><p>返回共享的媒体接口清单，不是播放器默认选项（默认选项见 Artplayer.option）。</p><h3 id="config-contract" tabindex="-1">媒体接口清单 <a class="header-anchor" href="#config-contract" aria-label="Permalink to "媒体接口清单 {#config-contract}""></a></h3><p>该getter每次返回同一个对象。properties、methods、events、prototypes数组分别列出媒体属性名、可调用方法、原生事件、其他video专用成员。它们是名称清单而非能力保证；代理和浏览器可能只支持其中一部分。</p><p>核心在安装原生事件转发时读取config.events，随后转发为video:事件名；之后改数组不会增删已有实例的监听器。调试日志和代理适配器也会使用清单，修改名称不会创建对应的原生方法/属性。根Config保留历史readonly tuple类型，runtime Config准确描述可变字符串数组；修改会影响共享使用者，应保留顺序并还原临时测试修改。</p>',6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.config);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span 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;"> { Config } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer.config;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nativeNames</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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;"> config.events.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">slice</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;"> shared</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer.config </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [nativeNames, shared];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="utils" tabindex="-1"><code>utils</code> <a class="header-anchor" href="#utils" aria-label="Permalink to "\`utils\`""></a></h2><p>返回播放器的工具函数集合</p>`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.utils);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部工具函数请参考以下地址：</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts" target="_blank" rel="noreferrer">artplayer/types/utils.d.ts</a></p></div><h3 id="utils-contract" tabindex="-1">环境与类型 <a class="header-anchor" href="#utils-contract" aria-label="Permalink to "环境与类型 {#utils-contract}""></a></h3><p><code>Artplayer.utils</code> 是公开工具集合，不绑定某个播放器。纯文本和数据函数可独立使用；DOM、图片、样式和测量函数需要浏览器及相应节点。不会因为工具来自 Artplayer，就自动在播放器销毁时清理调用者创建的资源。</p><p><code>isBrowser</code>、<code>userAgent</code>、<code>isMobile</code>、<code>isSafari</code>、<code>isIOS</code>、<code>isIOS13</code> 在模块加载时计算，不随之后的窗口或 UA 修改更新。UA 优先取加载前设置的 <code>globalThis.CUSTOM_USER_AGENT</code>，否则取 navigator；<code>isIOS13</code> 也包含带触摸能力的 Macintosh 判断。这些是兼容性启发式判断，不是某项播放能力或系统版本的保证。</p><p>根 <code>Utils</code> 保留旧类型签名；<code>artplayer/runtime</code> 的 <code>Utils</code> 描述实际返回值和更广的 DOM 输入。内部辅助形状 <code>StyledElement</code> 只要求 style，<code>EventPathSource</code> 要求 target 和可选 composedPath；它们不是 runtime 入口单独导出的命名类型。泛型查询只提供静态类型，不校验节点的实际标签。</p><h3 id="utils-dom" tabindex="-1">DOM 与样式 <a class="header-anchor" href="#utils-dom" aria-label="Permalink to "DOM 与样式 {#utils-dom}""></a></h3><table tabindex="0"><thead><tr><th>工具</th><th>参数、返回值和边界</th></tr></thead><tbody><tr><td><code>query(selector, parent?)</code> / <code>queryAll(selector, parent?)</code></td><td>默认 parent 为 document；返回首个元素或 null / 新数组。查询的是后代，不含 parent 自己；非法选择器仍抛错</td></tr><tr><td><code>createElement(tag)</code></td><td>新建原生 HTML 元素，不挂载</td></tr><tr><td><code>addClass</code> / <code>removeClass</code> / <code>hasClass</code></td><td>接收节点与单个 class token；前两者返回 undefined，后者返回布尔；保留原生 classList 的参数错误</td></tr><tr><td><code>append(parent, child)</code></td><td>同 realm Element 会被移动；其他值先转字符串再作为 HTML 追加。返回 lastElementChild，若不存在才取 lastChild，因此不保证返回刚追加的文本，空父节点可能返回 null</td></tr><tr><td><code>remove(child)</code> / <code>replaceElement(newChild, oldChild)</code></td><td>分别返回被移除节点 / 新节点；节点没有父节点时仍会抛错</td></tr><tr><td><code>siblings(target)</code> / <code>inverseClass(target, name)</code></td><td>前者返回同父元素的其他元素；后者移除兄弟元素上的类并给目标添加，返回 undefined。要求目标有 parentElement</td></tr><tr><td><code>setStyle(element, key, value)</code> / <code>setStyles(element, styles)</code></td><td>直接写 style 并返回原元素；setStyles 遍历可枚举字符串属性，包括继承属性。不补单位、不自动清空旧样式</td></tr><tr><td><code>getStyle(element, key, numberType = true)</code></td><td>用 getComputedStyle/getPropertyValue 读取；默认 parseFloat，不能转为数字时为 NaN；传 false 返回原字符串。使用 CSS 属性名，如 <code>font-size</code></td></tr><tr><td><code>setStyleText(id, cssText)</code></td><td>更新已有同 id 元素的 textContent；否则创建 style。document 正在加载时延迟到 DOMContentLoaded 挂入 head；无 Promise 或自动释放，调用者应使用独立 id</td></tr><tr><td><code>getRect(element)</code></td><td>原样返回 getBoundingClientRect 的 DOMRect，而不只是旧类型里的四个字段</td></tr><tr><td><code>getIcon(key = '', html = '')</code></td><td>每次返回新的 i 元素，带 art-icon 与 art-icon-key 类；使用 append 规则插入内容，元素不会复制</td></tr><tr><td><code>tooltip(target, message, position = 'top')</code></td><td>非移动端设置 aria-label 和 hint--rounded / hint--position 类；移动端不操作。再次调用不会移除旧方向类</td></tr></tbody></table><p>HTML 字符串不会自动净化。需要显示纯文本时使用 textContent，或先按用途转义；不要把不可信输入直接交给 append/getIcon。</p><h3 id="utils-measure" tabindex="-1">事件与测量 <a class="header-anchor" href="#utils-measure" aria-label="Permalink to "事件与测量 {#utils-measure}""></a></h3><table tabindex="0"><thead><tr><th>工具</th><th>实际行为</th></tr></thead><tbody><tr><td><code>getComposedPath(event)</code></td><td>有 composedPath 时保留其 receiver 并直接返回原数组；否则沿 target.parentNode 向上遍历，浏览器中补入 window。fallback 不模拟完整 Shadow DOM 路径</td></tr><tr><td><code>includeFromEvent(event, target)</code></td><td>判断目标是否在上述路径中，不是另一次 DOM contains 查询</td></tr><tr><td><code>isInViewport(element, offset = 0)</code></td><td>判断矩形与窗口是否相交，包含边界；不是完全可见、遮挡或 IntersectionObserver 判断，保留历史 offset 算法</td></tr><tr><td><code>getSafeAreaInsets()</code></td><td>挂载临时不可见节点，读取四个 env(safe-area-inset-*) 的数值，不能解析时为0；成功或失败都移除该节点，要求 document.body 可用</td></tr><tr><td><code>supportsFlex()</code></td><td>只检查新建元素能否接受 display:flex，不验证实际布局能力</td></tr></tbody></table><h3 id="utils-resources" tabindex="-1">字幕、图片与文件 <a class="header-anchor" href="#utils-resources" aria-label="Permalink to "字幕、图片与文件 {#utils-resources}""></a></h3><table tabindex="0"><thead><tr><th>工具</th><th>实际行为与归属</th></tr></thead><tbody><tr><td><code>srtToVtt(text)</code> / <code>assToVtt(text)</code></td><td>同步返回 WebVTT 字符串；前者规范毫秒与部分样式标记，后者提取 Dialogue 的基础时间/文本，不是完整字幕校验器或 ASS 排版引擎</td></tr><tr><td><code>vttToBlob(text)</code></td><td>返回 text/vtt 的 Blob URL，不返回 Blob 对象；调用者在不再使用时 URL.revokeObjectURL</td></tr><tr><td><code>getExt(url)</code></td><td>去除查询/片段，trim并转小写，取最后一个点之后的文本；没有点时返回剩余字符串，不检查资源或 MIME</td></tr><tr><td><code>download(url, name)</code></td><td>临时创建带 download 的链接、点击并移除；不返回完成通知，不代表浏览器一定保存成功，也不回收传入 URL</td></tr><tr><td><code>loadImg(url, scale?)</code></td><td>返回加载完成的 HTMLImageElement。scale 为假值或1时使用原图；其他值通过 canvas/toBlob 再加载缩放图。缩放成功后的 image.src 是调用者拥有的 Blob URL，用完必须回收</td></tr></tbody></table><p><code>loadImg</code> 不自动设置 crossOrigin，也没有公开取消或超时参数。跨域原图能显示不代表可读 canvas；加载、画布或编码失败会拒绝 Promise。成功后的监听器已清理；缩放中失败会释放已创建的 Blob URL。仅在页面不再使用缩放结果后回收其 src，原图 URL 不属于此函数。</p><h3 id="utils-data" tabindex="-1">数据、错误与调度 <a class="header-anchor" href="#utils-data" aria-label="Permalink to "数据、错误与调度 {#utils-data}""></a></h3><table tabindex="0"><thead><tr><th>工具</th><th>实际行为</th></tr></thead><tbody><tr><td><code>def(object, key, descriptor)</code></td><td>Object.defineProperty 本身，返回原对象；根声明保留的字符串 key 重载返回 void 并非运行时结果</td></tr><tr><td><code>has(object, key)</code> / <code>get(object, key)</code></td><td>仅检查自有属性 / 获取自有描述符，缺少描述符为 undefined</td></tr><tr><td><code>mergeDeep(...objects)</code></td><td>新建顶层对象；遍历 Object.keys，两个非数组对象递归合并。两个数组使用旧 concat 展开规则，可能展开后一个数组中的嵌套数组；不是完全深拷贝，未合并的值会保留引用。不支持循环图合并；<strong>proto</strong> 作为自有数据写入</td></tr><tr><td><code>clamp(number, a, b)</code></td><td>将数值限制在两端点之间，允许端点反序；NaN 仍为 NaN</td></tr><tr><td><code>secondToTime(seconds)</code></td><td>向下取整为 mm:ss，达到一小时后为 hh:mm:ss，小时可超过两位；假值为00:00。不额外校验负数或非有限值</td></tr><tr><td><code>escape(text)</code> / <code>unescape(text)</code></td><td>只处理 &、<、>、单引号和双引号对应的五种固定实体；单次替换，unescape 不是通用 HTML 实体解析器</td></tr><tr><td><code>capitalize(text)</code></td><td>只将第一个字符大写，其余不变</td></tr><tr><td><code>ArtPlayerError(message?, context?)</code> / <code>errorHandle(condition, message?)</code></td><td>前者是 name 为 ArtPlayerError 的 Error，context 用于支持的 stack capture；后者对假值抛该错误，对真值返回原值</td></tr><tr><td><code>silencePromise(value)</code></td><td>有可调用 catch 时返回 catch 吞掉拒绝后的结果，否则原样返回；按 catch 能力判断而不是 instanceof Promise，不捕获调用 catch 本身的同步错误</td></tr><tr><td><code>sleep(milliseconds = 0)</code></td><td>定时后兑现为 undefined；没有取消方法</td></tr><tr><td><code>debounce(callback, duration)</code></td><td>trailing 调用，只保留最后一次参数和调用者 this；忽略旧 context 参数，包装函数返回 undefined</td></tr><tr><td><code>throttle(callback, duration)</code></td><td>leading 同步调用，等待期内丢弃调用，无 trailing；保留调用者 this，包装函数返回 undefined</td></tr></tbody></table><p>两个包装器不提供 cancel/flush，不随播放器销毁自动取消。throttle 在回调正常返回之后才进入等待期，因此保留同步重入和抛错后再次调用的行为。根类型的旧回调返回值推导不改变这些实际语义。</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span 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;"> { Utils } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> utils</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Utils</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer.utils;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> fragment</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createDocumentFragment</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;"> missing</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> HTMLVideoElement</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> utils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">query</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">HTMLVideoElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'video'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, fragment);</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> utils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'div'</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;"> styled</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> HTMLDivElement</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> utils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(div, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'fontSize'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'20px'</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;"> width</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;"> utils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(div, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'width'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> invoke</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> utils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">debounce</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">step</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> step;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</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;"> returned</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;"> invoke.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </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:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [missing, styled, width, returned];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="scheme" tabindex="-1"><code>scheme</code> <a class="header-anchor" href="#scheme" aria-label="Permalink to "\`scheme\`""></a></h2><p>返回播放器选项的校验方案</p>`,20),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.scheme);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="emitter" tabindex="-1"><code>Emitter</code> <a class="header-anchor" href="#emitter" aria-label="Permalink to "`Emitter`""></a></h2><p>返回事件分发器的构造函数</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.Emitter);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="validator" tabindex="-1"><code>validator</code> <a class="header-anchor" href="#validator" aria-label="Permalink to "`validator`""></a></h2><p>返回选项的校验函数</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.validator);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="kindof" tabindex="-1"><code>kindOf</code> <a class="header-anchor" href="#kindof" aria-label="Permalink to "`kindOf`""></a></h2><p>返回类型检测的函数工具</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.kindOf);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="html" tabindex="-1"><code>html</code> <a class="header-anchor" href="#html" aria-label="Permalink to "`html`""></a></h2><p>返回播放器所需的 <code>html</code> 字符串</p>',3),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.html);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>这是当前版本的静态基础模板，包含播放器所需的 class 和媒体/控件节点，不是某个实例当前 DOM 的快照。通过 <code>useSSR: true</code> 复用预先插入的模板时，应保留完整结构并匹配版本；该选项不会让构造函数在无浏览器环境中运行。实际实例没有 <code>template.html</code> 属性，旧根类型为兼容保留的这个成员不能代替静态入口。</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-label="Permalink to "`option`""></a></h2><p>返回播放器的默认选项</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s('<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Artplayer.option);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>',1)]))}const g=e(l,[["render",d]]);export{E as __pageData,g as default};
|