mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 02:01:20 -08:00
docs(site): [SITE-04] complete bilingual guides for JASSUB Mask and Cast
This commit is contained in:
Harvey Zhao committed
1 parent
558e946ae5
commit
3aad294aa5
106 files changed
+5268
-2065
No files matched your search
@@ -0,0 +1,45 @@
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"ASS Subtitles with JASSUB","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/jassub.md","filePath":"en/plugin/jassub.md","lastUpdated":null}'),r={name:"en/plugin/jassub.md"};function l(d,s,p,o,h,c){return i(),n("div",null,s[0]||(s[0]=[a(`<h1 id="ass-subtitles-with-jassub" tabindex="-1">ASS Subtitles with JASSUB <a class="header-anchor" href="#ass-subtitles-with-jassub" aria-label="Permalink to "ASS Subtitles with JASSUB""></a></h1><p><a href="./../../plugin/jassub.html">简体中文</a></p><p>Render ASS subtitles on Canvas using the JASSUB Worker and WASM. The plugin returns the actual JASSUB instance with its methods/events rather than converting ASS to plain VTT. This describes the unreleased branch; Worker, WASM, fonts and actual playback require deployment-specific validation.</p><h2 id="installation-and-example" tabindex="-1">Installation and example <a class="header-anchor" href="#installation-and-example" aria-label="Permalink to "Installation and example""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-jassub</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginJassub </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-jassub'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>For scripts, load ArtPlayer before <code>dist/artplayer-plugin-jassub.js</code>; the global is <code>artplayerPluginJassub</code>. This preserves the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub" target="_blank" rel="noreferrer">original example</a>. Its Worker/WASM/font URLs are site assets, not paths automatically created in your application by installing the plugin.</p>`,7),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-jassub/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// https://github.com/ThaUnknown/jassub</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-jassub</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginJassub from 'artplayer-plugin-jassub';</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/jassub/FGOBD.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> autoSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fullscreen: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fullscreenWeb: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> artplayerPluginJassub</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> subUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/FGOBD.ass'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> workerUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/jassub-worker.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> wasmUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/jassub-worker.wasm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> modernWasmUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/jassub-worker-modern.wasm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> availableFonts: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'liberation sans'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/default.woff2'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fonts: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '/assets/jassub/fonts/Averia Sans Libre Light.ttf'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '/assets/jassub/fonts/Averia Serif Simple Light.ttf'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '/assets/jassub/fonts/Gramond.ttf'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> timeOffset: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.041</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>Host matching Worker, WASM and fonts with correct paths, access policies and font usage rights. Missing fonts affect layout. Default relative URLs do not establish that files are deployed.</p><h2 id="resource-and-rendering-options" tabindex="-1">Resource and rendering options <a class="header-anchor" href="#resource-and-rendering-options" aria-label="Permalink to "Resource and rendering options""></a></h2><p>Runtime options are optional and default to art.video. They are read at registration; an explicit video overrides the host video. These are current local implementation defaults, including differences from old upstream comments.</p><table tabindex="0"><thead><tr><th>Field</th><th>Actual default or meaning</th></tr></thead><tbody><tr><td><code>video</code> / <code>canvas</code></td><td>Video defaults to art.video; caller canvas allows manual DOM handling; a usable rendering target is required</td></tr><tr><td><code>workerUrl</code></td><td><code>'jassub-worker.js'</code></td></tr><tr><td><code>wasmUrl</code></td><td><code>'jassub-worker.wasm'</code></td></tr><tr><td><code>legacyWasmUrl</code></td><td><code>'jassub-worker.wasm.js'</code></td></tr><tr><td><code>modernWasmUrl</code></td><td>Used when supplied and SIMD is detected; otherwise wasmUrl</td></tr><tr><td><code>subUrl</code> / <code>subContent</code></td><td>Subtitle URL or ASS text sent to the Worker</td></tr><tr><td><code>fonts</code></td><td>Empty array by default; entries can be URLs or Uint8Array</td></tr><tr><td><code>availableFonts</code></td><td>Defaults to <code>{ 'liberation sans': './default.woff2' }</code>; font-name-to-URL/bytes map</td></tr><tr><td><code>fallbackFont</code></td><td><code>'liberation sans'</code></td></tr><tr><td><code>useLocalFonts</code></td><td>Enabled only when queryLocalFonts exists; current code defaults to true when available, with explicit false supported; permissions still apply</td></tr><tr><td><code>blendMode</code></td><td><code>'js'</code>, with <code>'wasm'</code> also accepted</td></tr><tr><td><code>asyncRender</code></td><td>Defaults true, subject to createImageBitmap availability</td></tr><tr><td><code>offscreenRender</code></td><td>Defaults true, requiring transferControlToOffscreen and no caller canvas</td></tr><tr><td><code>onDemandRender</code></td><td>Defaults true, subject to requestVideoFrameCallback availability</td></tr><tr><td><code>targetFps</code></td><td>Defaults 24; not a fixed update guarantee in on-demand mode</td></tr><tr><td><code>timeOffset</code></td><td>Defaults 0 seconds</td></tr><tr><td><code>debug</code></td><td>Defaults false</td></tr><tr><td><code>prescaleFactor</code> / <code>prescaleHeightLimit</code> / <code>maxRenderHeight</code></td><td>Defaults 1 / 1080 / 0; rendering size controls, with no maximum imposed by a zero maxRenderHeight</td></tr><tr><td><code>dropAllAnimations</code> / <code>dropAllBlur</code></td><td>Simplification options forwarded to the Worker; not set to true by the wrapper when omitted</td></tr><tr><td><code>libassMemoryLimit</code> / <code>libassGlyphLimit</code></td><td>Defaults 0; libass cache limits in MiB, not a total browser-memory cap</td></tr></tbody></table><p>Capabilities can change the chosen rendering path. Async/offscreen/backend options are not universal performance guarantees. Do not mix incompatible Worker and wrapper versions.</p><h2 id="instance-and-methods" tabindex="-1">Instance and methods <a class="header-anchor" href="#instance-and-methods" aria-label="Permalink to "Instance and methods""></a></h2><p>Registration synchronously returns <code>{ name: 'artplayerPluginJassub', instance }</code>, not a WLine truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> jassub </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-jassub/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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> attachSubtitles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">instance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> jassub</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> workerUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/jassub-worker.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> wasmUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/jassub/jassub-worker.wasm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> subUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/subtitles.ass'</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>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</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;"> instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getEvents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">events</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:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (error) console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(error);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(events);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> instance;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>Runtime exports FontSource, RuntimeOption, AssEvent, AssStyle, AssEventInput, AssStyleInput, WorkerRequestError, EventsCallback, StylesCallback, RuntimeEventMap, RuntimeInstance, RuntimeResult and RuntimeFactory. Precise instance fields include timeOffset, debug, the three sizing settings, optional busy and historical public <code>_canvas/_ctx</code>; <code>_ctx</code> may be false/null. There is no runtime factory <code>.default</code> self-alias. The old root's NodeNext namespace does not create one. Runtime supports an accurate ESM default and CommonJS <code>import = require</code>.</p>`,17)]))}const E=e(r,[["render",l]]);export{u as __pageData,E as default};
|
||||
Reference in new issue
Block a user