mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-15 17:16:16 -08:00
docs(site): [SITE-04] cross-check existing plugin guide semantics
This commit is contained in:
1 parent
4db9789014
commit
b029062ace
125 files changed
+4880
-2430
No files matched your search
@@ -1 +1 @@
|
||||
import{t as p}from"./chunks/theme.BM9xdY0_.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.DdScxTso.js";import{R as s,a6 as i,a7 as u,a8 as c,a9 as l,aa as f,ab as d,ac as m,ad as h,ae as g,af as A,d as v,u as y,v as C,s as P,ag as b,ah as w,ai as R,aj as E}from"./chunks/framework.xxfEszSJ.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=D(),a=j();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return A(S)}function D(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
|
||||
+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
+1
-1
@@ -26,4 +26,4 @@ import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.25</span><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;"> track;</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></div></div><p>Named types include <code>Option</code>, <code>UpdateOption</code>, the old <code>Result</code>, <code>RuntimeResult</code> and <code>RuntimeFactory</code>. The online editor's default global retains legacy inference too. To select precise update typing, explicitly use <code>artplayerPluginAudioTrack as artplayerPluginAudioTrack.RuntimeFactory</code>. This does not create a second plugin implementation.</p><p>Actual desktop tests cover audio/video playback, pause, seeking, updates and destruction. They do not establish support for every mobile device, proxy player, audio format or long-running synchronization combination. Check browser decoding capabilities and the project's validation records for the applicable scope.</p>`,21)]))}const y=i(l,[["render",p]]);export{u 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><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>Named types include <code>Option</code>, <code>UpdateOption</code>, the old <code>Result</code>, <code>RuntimeResult</code> and <code>RuntimeFactory</code>. The online editor's default global retains legacy inference too. To select precise update typing, explicitly use <code>artplayerPluginAudioTrack as artplayerPluginAudioTrack.RuntimeFactory</code>. This does not create a second plugin implementation.</p><p>Actual desktop tests cover audio/video playback, pause, seeking, updates and destruction. They do not establish support for every mobile device, proxy player, audio format or long-running synchronization combination. Check browser decoding capabilities and the project's validation records for the applicable scope.</p><p>Windows WebKit MP4/AAC starvation remains an open native-media validation issue: a stalled video does not reliably emit waiting in that reproduction. Passing source-switch ordering checks does not close that separate case.</p>`,22)]))}const y=i(l,[["render",p]]);export{u as __pageData,y as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789497001000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),s("",21)]))}const y=i(l,[["render",p]]);export{u as __pageData,y as default};
|
||||
import{_ as i,o as e,c as n,ak as s,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Audio Track","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/audio-track.md","filePath":"en/plugin/audio-track.md","lastUpdated":1789497001000}'),l={name:"en/plugin/audio-track.md"};function p(r,a,d,o,h,c){return e(),n("div",null,a[0]||(a[0]=[s("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),s("",22)]))}const y=i(l,[["render",p]]);export{u as __pageData,y as default};
|
||||
+6
-6
@@ -1,12 +1,12 @@
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,k,d,o){return e(),t("div",null,a[0]||(a[0]=[s(`<h1 id="danmuku" tabindex="-1">Danmuku <a class="header-anchor" href="#danmuku" aria-label="Permalink to "Danmuku""></a></h1><p><a href="./../../plugin/danmuku.html">中文说明</a></p><p>Display timed comments over the video, with an input panel, display settings and an optional heatmap. This guide describes the current refactor branch. The <code>/runtime</code> entrypoint and refactor fixes have not yet been published to npm; unversioned CDN links still load the published release.</p><h2 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to "Demo""></a></h2><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">Open the full example</a>. Run Code examples below use the site's local plugin build and sample media. In your application, use your own container and media URLs.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-0" checked><label data-title="npm" for="tab-artplayer-6327997d12cc7405-0">npm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-1"><label data-title="yarn" for="tab-artplayer-6327997d12cc7405-1">yarn</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-2"><label data-title="pnpm" for="tab-artplayer-6327997d12cc7405-2">pnpm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-3"><label data-title="script" for="tab-artplayer-6327997d12cc7405-3">script</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shik
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div><p>JavaScript projects can import the default factory from <code>artplayer-plugin-danmuku</code>. Script builds expose <code>artplayerPluginDanmuku</code>; pass its result to the player's <code>plugins</code> array.</p><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-0" checked><label data-title="jsDelivr" for="tab-artplayer-0590ccaac58bc27a-0">jsDelivr</label><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-1"><label data-title="unpkg" for="tab-artplayer-0590ccaac58bc27a-1">unpkg</label></div><div class="blocks"><div class="language-text vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="comment-structure" tabindex="-1">Comment structure <a class="header-anchor" href="#comment-structure" aria-label="Permalink to "Comment structure""></a></h2><p>Only <code>text</code> is required. Leading and trailing whitespace is removed; empty comments are ignored.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s(`<h1 id="danmuku" tabindex="-1">Danmuku <a class="header-anchor" href="#danmuku" aria-label="Permalink to "Danmuku""></a></h1><p><a href="./../../plugin/danmuku.html">中文说明</a></p><p>Display timed comments over the video, with an input panel, display settings and an optional heatmap. This guide describes the current refactor branch. The <code>/runtime</code> entrypoint and refactor fixes have not yet been published to npm; unversioned CDN links still load the published release.</p><h2 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to "Demo""></a></h2><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">Open the full example</a>. Run Code examples below use the site's local plugin build and sample media. In your application, use your own container and media URLs.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-0" checked><label data-title="npm" for="tab-artplayer-6327997d12cc7405-0">npm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-1"><label data-title="yarn" for="tab-artplayer-6327997d12cc7405-1">yarn</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-2"><label data-title="pnpm" for="tab-artplayer-6327997d12cc7405-2">pnpm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-3"><label data-title="script" for="tab-artplayer-6327997d12cc7405-3">script</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shik
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div><p>JavaScript projects can import the default factory from <code>artplayer-plugin-danmuku</code>. Script builds expose <code>artplayerPluginDanmuku</code>; pass its result to the player's <code>plugins</code> array.</p><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-0" checked><label data-title="jsDelivr" for="tab-artplayer-0590ccaac58bc27a-0">jsDelivr</label><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-1"><label data-title="unpkg" for="tab-artplayer-0590ccaac58bc27a-1">unpkg</label></div><div class="blocks"><div class="language-text vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="comment-structure" tabindex="-1">Comment structure <a class="header-anchor" href="#comment-structure" aria-label="Permalink to "Comment structure""></a></h2><p>Only <code>text</code> is required. Empty or whitespace-only comments are ignored. Direct <code>emit()</code> and loaded rows retain the original text, including surrounding spaces; only the input panel trims its submitted text.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Seconds; omitted time defaults to currentTime + 0.5</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mode: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 0: scrolling, 1: top, 2: bottom; defaults to option.mode</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#FFFFFF'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Defaults to option.color</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> border: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// CSS properties for this comment</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>Explicit <code>time: 0</code> is preserved. Negative times are clamped to zero. Other than 0, 1 and 2, comment modes are ignored.</p><h2 id="all-options" tabindex="-1">All options <a class="header-anchor" href="#all-options" aria-label="Permalink to "All options""></a></h2><p>Pass an option object to the factory. At runtime, <code>{}</code> is valid and all fields have defaults. The historical root declarations still require <code>danmuku</code>; existing TypeScript projects can keep providing it. See <a href="#typescript">TypeScript</a> for accurate declarations.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</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><p>Explicit <code>time: 0</code> is preserved. Negative times are clamped to zero. Other than 0, 1 and 2, comment modes are ignored.</p><p>Normalization fills time, mode, color and style on the supplied object before calling <code>filter</code>. The queue then receives a shallow copy; its style object is still shared. Copy reusable inputs when these mutations matter. The optional string <code>id</code> becomes the displayed element's <code>data-id</code>; it does not deduplicate comments. Text is rendered through <code>textContent</code>, not as HTML.</p><h2 id="all-options" tabindex="-1">All options <a class="header-anchor" href="#all-options" aria-label="Permalink to "All options""></a></h2><p>Pass an option object to the factory. At runtime, <code>{}</code> is valid and all fields have defaults. The historical root declarations still require <code>danmuku</code>; existing TypeScript projects can keep providing it. See <a href="#typescript">TypeScript</a> for accurate declarations.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Array, XML URL, Promise of an array, or function returning an array/Promise</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> speed: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Display duration in seconds, clamped to 1–10</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> margin: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'25%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Top/bottom spacing: pixels or percentages</span></span>
|
||||
@@ -34,7 +34,7 @@ import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MARGIN: {},</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SPEED: {},</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> COLOR: [],</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><span class="line-number">29</span><br></div></div><p><code>OPACITY</code>, <code>FONT_SIZE</code>, <code>MARGIN</code> and <code>SPEED</code> override slider definitions with <code>min</code>, <code>max</code> and <code>steps</code>. Each step can contain <code>name</code>, <code>value</code>, <code>hide</code> and <code>show</code>; margin values are pairs such as <code>[10, '50%']</code>. <code>COLOR</code> replaces the palette with an array of CSS color strings; an empty array uses the built-in palette.</p><h2 id="array-xml-and-asynchronous-input" tabindex="-1">Array, XML and asynchronous input <a class="header-anchor" href="#array-xml-and-asynchronous-input" aria-label="Permalink to "Array, XML and asynchronous input""></a></h2><p>XML input uses Bilibili's comment format. Fetching a cross-origin XML URL requires that server to allow browser access. An input function runs without the option object as its receiver. It may return an array directly or asynchronously.</p>`,20),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p><code>OPACITY</code>, <code>FONT_SIZE</code>, <code>MARGIN</code> and <code>SPEED</code> override slider definitions with <code>min</code>, <code>max</code> and <code>steps</code>. Each step can contain <code>name</code>, <code>value</code>, <code>hide</code> and <code>show</code>. <code>hide</code> suppresses its label; the retained <code>show</code> field is not read by the renderer. Margin values are pairs such as <code>[10, '50%']</code>. <code>COLOR</code> replaces the palette with an array of CSS color strings; an empty array uses the built-in palette.</p><h2 id="array-xml-and-asynchronous-input" tabindex="-1">Array, XML and asynchronous input <a class="header-anchor" href="#array-xml-and-asynchronous-input" aria-label="Permalink to "Array, XML and asynchronous input""></a></h2><p>XML input uses Bilibili's comment format. Fetching a cross-origin XML URL requires that server to allow browser access. An input function runs without the option object as its receiver. It may return an array directly or asynchronously.</p>`,21),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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;"> plugins: [</span></span>
|
||||
@@ -91,7 +91,7 @@ import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span 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;">, drawPoints);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'resize'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:loaded'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><p>Subscribe with <code>art.on(name, callback)</code> and remove subscriptions with <code>art.off(name, callback)</code>.</p><table tabindex="0"><thead><tr><th>Event</th><th>Payload / meaning</th></tr></thead><tbody><tr><td><code>artplayerPluginDanmuku:visible</code></td><td>Queue item; its <code>$ref</code> is the displayed element</td></tr><tr><td><code>artplayerPluginDanmuku:loaded</code></td><td>Current full queue after a successful load, including appends</td></tr><tr><td><code>artplayerPluginDanmuku:error</code></td><td>Original error from loading or scheduling; handle public Promise rejections separately</td></tr><tr><td><code>artplayerPluginDanmuku:config</code></td><td>Current configuration</td></tr><tr><td><code>artplayerPluginDanmuku:start</code></td><td>No payload; scheduling starts</td></tr><tr><td><code>artplayerPluginDanmuku:stop</code></td><td>No payload; scheduling stops</td></tr><tr><td><code>artplayerPluginDanmuku:hide</code></td><td>No payload; layer hidden</td></tr><tr><td><code>artplayerPluginDanmuku:show</code></td><td>No payload; layer shown</td></tr><tr><td><code>artplayerPluginDanmuku:reset</code></td><td>No payload; displayed items reset</td></tr><tr><td><code>artplayerPluginDanmuku:destroy</code></td><td>No payload; plugin destroyed</td></tr><tr><td><code>artplayerPluginDanmuku:points</code></td><td>Application-sent custom points for the heatmap</td></tr></tbody></table><p>Events are not replayed to later listeners. In particular, an initially empty array can finish loading during construction. Subscribe before invoking a later <code>load()</code> if you need to observe its completion event. Use <code>$ref.textContent</code> when adding text in a <code>visible</code> handler.</p><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to "TypeScript""></a></h2><p>The root and <code>/legacy</code> entrypoints keep the npm 5.3.0 declaration shapes for compatibility, including historical inaccuracies about return values. The current branch adds <code>/runtime</code> for accurate types while loading the same runtime factory:</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'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:loaded'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><p>Subscribe with <code>art.on(name, callback)</code> and remove subscriptions with <code>art.off(name, callback)</code>.</p><table tabindex="0"><thead><tr><th>Event</th><th>Payload / meaning</th></tr></thead><tbody><tr><td><code>artplayerPluginDanmuku:visible</code></td><td>Queue item; its <code>$ref</code> is the displayed element</td></tr><tr><td><code>artplayerPluginDanmuku:loaded</code></td><td>Current full queue after a successful load, including appends</td></tr><tr><td><code>artplayerPluginDanmuku:error</code></td><td>Original error from loading or scheduling; handle public Promise rejections separately</td></tr><tr><td><code>artplayerPluginDanmuku:config</code></td><td>Current configuration</td></tr><tr><td><code>artplayerPluginDanmuku:start</code></td><td>No payload; scheduling starts</td></tr><tr><td><code>artplayerPluginDanmuku:stop</code></td><td>No payload; scheduling stops</td></tr><tr><td><code>artplayerPluginDanmuku:hide</code></td><td>No payload; layer hidden</td></tr><tr><td><code>artplayerPluginDanmuku:show</code></td><td>No payload; layer shown</td></tr><tr><td><code>artplayerPluginDanmuku:reset</code></td><td>No payload; displayed items reset</td></tr><tr><td><code>artplayerPluginDanmuku:destroy</code></td><td>No payload; plugin destroyed</td></tr><tr><td><code>artplayerPluginDanmuku:points</code></td><td>Application-sent custom points for the heatmap</td></tr></tbody></table><p>Events are not replayed to later listeners. In particular, an initially empty array can finish loading during construction. Subscribe before invoking a later <code>load()</code> if you need to observe its completion event. Use <code>$ref.textContent</code> when adding text in a <code>visible</code> handler.</p><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to "TypeScript""></a></h2><p>The <code>/runtime</code> <code>Owner</code> type describes the internal return object for existing advanced integrations. Its <code>art</code>, <code>option</code>, <code>queue</code> and <code>states</code> are live objects; <code>readys</code> is the current candidate list. <code>speed</code>, <code>fontSize</code>, <code>marginTop/marginBottom</code> and <code>isRotate</code> are computed views. Do not mutate queue state to simulate public commands.</p><p>Owner's additional <code>start/stop</code> methods control comment scheduling and emit their events; <code>continue/suspend</code> resume or pause existing displayed items; <code>update</code> schedules work. These methods synchronously return Owner and do not control video playback. <code>resize</code> adjusts displayed items, while <code>seek</code> cancels old display preparation and schedules again; both return <code>undefined</code>. Owner's <code>destroy</code> cleans scheduling, nodes and input tasks and emits its destroy event, but does not fully uninstall the settings panel and heatmap. Use <code>art.destroy()</code> for complete cleanup. These additional commands are absent from the registered result.</p><p>The root and <code>/legacy</code> entrypoints keep the npm 5.3.0 declaration shapes for compatibility, including historical inaccuracies about return values. The current branch adds <code>/runtime</code> for accurate types while loading the same runtime factory:</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="--shikiLine truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-danmuku/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;"> { RuntimeOption, Point, EventMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-danmuku/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@@ -99,4 +99,4 @@ import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> points</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Point</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]];</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onError</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;">[error]: EventMap[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:error'</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;"> 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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">danmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(option)] });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onError);</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></div></div><p>The explicit <code>EventMap</code> describes payloads; it does not augment the core's historical event declarations automatically. The factory also exposes the existing <code>icons</code> object for customization. Package <code>README.md</code> and <code>ARCHITECTURE.md</code> describe module ownership, maintenance commands and remaining device/combination validation.</p>`,9)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
<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;">'artplayerPluginDanmuku:error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onError);</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></div></div><p>The explicit <code>EventMap</code> describes payloads; it does not augment the core's historical event declarations automatically. The factory also exposes the existing <code>icons</code> object for customization.</p><p>Root named types are <code>Mode</code>, <code>Danmuku</code>, <code>Slider</code>, <code>Danmu</code>, <code>Option</code> and <code>Result</code>. <code>/runtime</code> exposes <code>Mode</code>, <code>State</code>, <code>Margin</code>, <code>Point</code>, <code>Danmu</code>, <code>NormalizedDanmu</code>, <code>Item</code>, <code>Input</code>, <code>SliderStep</code>, <code>Slider</code>, <code>Heatmap</code>, <code>NormalizedOption</code>, <code>RuntimeOption</code>, <code>Owner</code>, <code>RuntimeResult</code>, <code>Icons</code>, <code>RuntimeFactory</code> and <code>EventMap</code>. <code>Item</code> adds <code>$state/$index/$ref/$restTime/$lastStartTime</code>; nodes are reused and <code>$ref</code> becomes null when recycled. A node received by a visible handler does not permanently belong to that comment.</p><p><code>icons</code> contains <code>$on/$off/$config/$style</code>, the three pairs <code>$mode_0_off/$mode_0_on</code> through <code>$mode_2_off/$mode_2_on</code>, and <code>$check_on/$check_off</code>. Applications can reuse these SVG strings in their own interfaces. The built-in panel reads bundled icons directly; changing the factory icons object does not replace its icons.</p><p>Package <code>README.md</code> and <code>ARCHITECTURE.md</code> describe module ownership, maintenance commands and remaining device/combination validation.</p>`,14)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,k,d,o){return e(),t("div",null,a[0]||(a[0]=[s("",20),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",13),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",5),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",9)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
import{_ as n,o as e,c as t,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1789461935000}'),l={name:"en/plugin/danmuku.md"};function p(h,a,r,d,k,o){return e(),t("div",null,a[0]||(a[0]=[s("",21),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",13),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",5),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",14)]))}const u=n(l,[["render",p]]);export{E as __pageData,u as default};
|
||||
+4
-4
@@ -1,7 +1,7 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="dash-control" tabindex="-1">DASH Control <a class="header-anchor" href="#dash-control" aria-label="Permalink to "DASH Control""></a></h1><p><a href="./../../plugin/dash-control.html">中文说明</a></p><p>Add video quality and audio-track menus to a dash.js player. You create and attach the SDK instance at <code>art.dash</code>; the plugin controls that instance and releases its own menus and listeners.</p><p>This guide describes the current refactor branch. Its SDK adaptation, automatic refresh and lifecycle fixes have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a(`<h1 id="dash-control" tabindex="-1">DASH Control <a class="header-anchor" href="#dash-control" aria-label="Permalink to "DASH Control""></a></h1><p><a href="./../../plugin/dash-control.html">中文说明</a></p><p>Add video quality and audio-track menus to a dash.js player. You create and attach the SDK instance at <code>art.dash</code>; the plugin controls that instance and releases its own menus and listeners.</p><p>This guide describes the current refactor branch. Its SDK adaptation, automatic refresh and lifecycle fixes have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dashjs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dashjs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginDashControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-dash-control'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>For script tags, load ArtPlayer, dash.js and <code>dist/artplayer-plugin-dash-control.js</code> before setup. The plugin global is <code>artplayerPluginDashControl</code>. Pin your dependency versions and use a browser-accessible MPD and segments.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>The example matches the <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control" target="_blank" rel="noreferrer">online DASH example</a>. Replace the site's container and media URL in your application.</p>`,10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},null,-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-dash-control</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import dashjs from 'dashjs';</span></span>
|
||||
@@ -64,7 +64,7 @@ import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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>
|
||||
<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;">'destroy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, destroyDash)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p>The example chooses its SDK capability path once per player. If dash.js cannot use MediaSource, it displays the existing unsupported-format notice without creating an SDK or installing its controls. This example does not provide a native DASH fallback.</p><h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to "Configuration""></a></h2><p><code>artplayerPluginDashControl(option?)</code> synchronously returns a plugin factory. Both <code>quality</code> and <code>audio</code> accept:</p><table tabindex="0"><thead><tr><th>Field</th><th>Meaning and default</th></tr></thead><tbody><tr><td><code>control</code></td><td>Display a bottom control; omitted means hidden.</td></tr><tr><td><code>setting</code></td><td>Display a settings entry; omitted means hidden. Also enable the player's <code>setting: true</code>.</td></tr><tr><td><code>title</code></td><td>Menu title, default <code>Quality</code> or <code>Audio</code>.</td></tr><tr><td><code>auto</code></td><td>Fallback text, default <code>Auto</code>; quality also uses it for its automatic selection row. It does not create a synthetic audio track.</td></tr><tr><td><code>getName(item)</code></td><td>Return a string from the original SDK level or track. It receives one argument, with no player receiver or index.</td></tr></tbody></table><p>The default quality label is <code>level.height + 'p'</code>. Default audio labels use <code>track.lang</code> or <code>track.id</code>; metadata may be missing or null. A custom formatter should return a string fallback, as the complete example does. Empty title/Auto text uses the default.</p><p>Equal text labels collapse into one displayed choice. Include bitrate or other metadata when several variants have the same height and should remain separate choices. A selected duplicate keeps the actual selected SDK key or track object. Empty track lists remove their menus.</p><h2 id="quality-and-audio-selection" tabindex="-1">Quality and audio selLine truncated
|
||||
<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;">'destroy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, destroyDash)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p>The example chooses its SDK capability path once per player. If dash.js cannot use MediaSource, it displays the existing unsupported-format notice without creating an SDK or installing its controls. This example does not provide a native DASH fallback.</p><h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to "Configuration""></a></h2><p><code>artplayerPluginDashControl(option?)</code> synchronously returns a plugin factory. Both <code>quality</code> and <code>audio</code> accept:</p><table tabindex="0"><thead><tr><th>Field</th><th>Meaning and default</th></tr></thead><tbody><tr><td><code>control</code></td><td>Display a bottom control; omitted means hidden.</td></tr><tr><td><code>setting</code></td><td>Display a settings entry; omitted means hidden. Also enable the player's <code>setting: true</code>.</td></tr><tr><td><code>title</code></td><td>Menu title, default <code>Quality</code> or <code>Audio</code>.</td></tr><tr><td><code>auto</code></td><td>Fallback text, default <code>Auto</code>; quality also uses it for its automatic selection row. It does not create a synthetic audio track.</td></tr><tr><td><code>getName(item)</code></td><td>Return a string from the original SDK level or track. It receives one argument, with no player receiver or index.</td></tr></tbody></table><p>The default quality label is <code>level.height + 'p'</code>. Default audio labels use <code>track.lang</code> or <code>track.id</code>; metadata may be missing or null. A custom formatter should return a string fallback, as the complete example does. Empty title/Auto text uses the default.</p><p>Equal text labels collapse into one displayed choice. Include bitrate or other metadata when several variants have the same height and should remain separate choices. A selected duplicate keeps the actual selected SDK key or track object. Empty track lists remove their menus.</p><h2 id="quality-and-audio-selection" tabindex="-1">Quality and audio selLine truncated
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">height</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;">bitrateInKbit</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:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Track</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">id</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;"> number</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">lang</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;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
@@ -78,4 +78,4 @@ import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setting: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">track</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.lang?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</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;"> String</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(track.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Audio'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><code>Option</code>, <code>Config</code>, <code>QualityLevel</code>, <code>AudioTrack</code> and <code>Result</code> are exported from the root. Root and legacy paths remain available. If using actual SDK declarations, dash.js 4.5.2 exposes <code>BitrateInfo</code> for quality; 5.2.1 uses <code>Representation</code>. Its declarations have different compiler/module-resolution requirements, so test your actual SDK and TypeScript combination. Describe the externally attached <code>art.dash</code> in your application's integration types.</p><h2 id="validation-scope" tabindex="-1">Validation scope <a class="header-anchor" href="#validation-scope" aria-label="Permalink to "Validation scope""></a></h2><p>The refactor tests fixed dash.js 4.5.2 and 5.2.1 with local adaptive media and old/new core combinations. Those are tested points, not a new blanket support range. The plugin includes a targeted 4.5.2 paused-seek recovery for stale empty-buffer metrics while preserving the caller's SDK settings and media time. Windows Playwright WebKit lacks the MSE path used by these tests; it is not Safari/device playback acceptance. Test your own MPDs, DRM and target devices before adopting the unpublished refactor.</p>`,29)]))}const g=i(l,[["render",p]]);export{E as __pageData,g as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><code>Option</code>, <code>Config</code>, <code>QualityLevel</code>, <code>AudioTrack</code> and <code>Result</code> are exported from the root. Root and legacy paths remain available. If using actual SDK declarations, dash.js 4.5.2 exposes <code>BitrateInfo</code> for quality; 5.2.1 uses <code>Representation</code>. Its declarations have different compiler/module-resolution requirements, so test your actual SDK and TypeScript combination. Describe the externally attached <code>art.dash</code> in your application's integration types.</p><p>The registered result contains only the fixed <code>name: 'artplayerPluginDashControl'</code> and <code>update()</code>. Ordinary factory calls may omit the options, while the last declaration overload keeps its parameter required: <code>Parameters<typeof dashControl>[0]</code> remains <code>Option</code>, without <code>undefined</code>. This package has no <code>/runtime</code> subpath or factory <code>.default</code> self-alias.</p><h2 id="validation-scope" tabindex="-1">Validation scope <a class="header-anchor" href="#validation-scope" aria-label="Permalink to "Validation scope""></a></h2><p>The refactor tests fixed dash.js 4.5.2 and 5.2.1 with local adaptive media and old/new core combinations. Those are tested points, not a new blanket support range. The plugin includes a targeted 4.5.2 paused-seek recovery for stale empty-buffer metrics while preserving the caller's SDK settings and media time. Windows Playwright WebKit lacks the MSE path used by these tests; it is not Safari/device playback acceptance. Test your own MPDs, DRM and target devices before adopting the unpublished refactor.</p>`,30)]))}const g=i(l,[["render",p]]);export{E as __pageData,g as default};
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},null,-1),a("",29)]))}const g=i(l,[["render",p]]);export{E as __pageData,g as default};
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"DASH Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-control.md","filePath":"en/plugin/dash-control.md","lastUpdated":1789466970000}'),l={name:"en/plugin/dash-control.md"};function p(h,s,r,d,k,o){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),a("",30)]))}const g=i(l,[["render",p]]);export{E as __pageData,g as default};
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789466111000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i(`<h1 id="hls-control" tabindex="-1">HLS Control <a class="header-anchor" href="#hls-control" aria-label="Permalink to "HLS Control""></a></h1><p><a href="./../../plugin/hls-control.html">中文说明</a></p><p>Add quality and audio-track menus to an Hls.js player. This plugin controls the Hls.js instance you provide at <code>art.hls</code>; it does not download, create or destroy the SDK.</p><p>This guide describes the current refactor branch. The automatic refresh and lifecycle fixes described here have not yet been published. An unversioned npm/CDN install still uses the published release.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hls </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'hls.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginHlsControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-hls-control'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>For script tags, load ArtPlayer, Hls.js and the plugin's <code>dist/artplayer-plugin-hls-control.js</code> before running your setup. The plugin global is <code>artplayerPluginHlsControl</code>. Pin versions in your application and use media URLs that permit browser access.</p><h2 id="complete-example" tabindex="-1">Complete example <a class="header-anchor" href="#complete-example" aria-label="Permalink to "Complete example""></a></h2><p>The example uses the site's player container and the same source as the <a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control" target="_blank" rel="noreferrer">online HLS example</a>. Replace the container and stream URL in your application.</p>`,10),l("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},null,-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-hls-control</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import Hls from 'hls.js';</span></span>
|
||||
@@ -82,4 +82,4 @@ import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setting: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">track</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.lang </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Audio'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>Public <code>Option</code>, <code>Config</code>, <code>QualityLevel</code>, <code>AudioTrack</code> and <code>Result</code> types are exported from the root entry. The root and legacy import paths remain available. The types do not pretend every ArtPlayer instance already owns an Hls.js engine; describe <code>art.hls</code> in your application's integration types.</p><h2 id="validation-scope" tabindex="-1">Validation scope <a class="header-anchor" href="#validation-scope" aria-label="Permalink to "Validation scope""></a></h2><p>The refactor tests Hls.js 1.5.17 and 1.7.2 with local media and real workers; these are tested points, not a newly declared supported range. Firefox grouped-stream crashes and a separate switching stall remain under investigation. Windows Playwright WebKit lacks the MSE path used in those tests; it does not establish Safari/iOS native-HLS acceptance. Verify your actual streams and target devices before adopting the unpublished refactor.</p>`,22)]))}const g=a(t,[["render",p]]);export{E as __pageData,g as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>Public <code>Option</code>, <code>Config</code>, <code>QualityLevel</code>, <code>AudioTrack</code> and <code>Result</code> types are exported from the root entry. The root and legacy import paths remain available. The types do not pretend every ArtPlayer instance already owns an Hls.js engine; describe <code>art.hls</code> in your application's integration types.</p><p>The registered result contains only the fixed <code>name: 'artplayerPluginHlsControl'</code> and <code>update()</code>. Ordinary factory calls may omit the options, while the last declaration overload keeps its parameter required: <code>Parameters<typeof hlsControl>[0]</code> remains <code>Option</code>, without <code>undefined</code>. This package has no <code>/runtime</code> subpath or factory <code>.default</code> self-alias.</p><h2 id="validation-scope" tabindex="-1">Validation scope <a class="header-anchor" href="#validation-scope" aria-label="Permalink to "Validation scope""></a></h2><p>The refactor tests Hls.js 1.5.17 and 1.7.2 with local media and real workers; these are tested points, not a newly declared supported range. Firefox grouped-stream crashes and a separate switching stall remain under investigation. Windows Playwright WebKit lacks the MSE path used in those tests; it does not establish Safari/iOS native-HLS acceptance. Verify your actual streams and target devices before adopting the unpublished refactor.</p>`,23)]))}const g=a(t,[["render",p]]);export{E as __pageData,g as default};
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as e,ak as i,j as l}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"HLS Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-control.md","filePath":"en/plugin/hls-control.md","lastUpdated":1789466111000}'),t={name:"en/plugin/hls-control.md"};function p(h,s,r,k,d,o){return n(),e("div",null,s[0]||(s[0]=[i("",10),l("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},null,-1),i("",22)]))}const g=a(t,[["render",p]]);export{E as __pageData,g as default};
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i("",23)]))}const g=a(t,[["render",p]]);export{E as __pageData,g as default};
|
||||
+2
-2
@@ -16,7 +16,7 @@ import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=0,0,128,72</span></span>
|
||||
<span class="line"><span></span></span>
|
||||
<span class="line"><span>00:05.000 --> 00:10.000</span></span>
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=128,0,128,72</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>The four values <code>x,y,w,h</code> are the left position, top position, width and height within the image, in pixels. x/y must be nonnegative and w/h positive; all four must be finite numbers. Each cue has one image URL line with a crop fragment. Ordinary subtitle text is not a thumbnail index.</p><p>Relative images are joined to the directory of the <strong>supplied VTT URL</strong>. For example, <code>bbb-sprite.jpg</code> inside <code>/assets/sample/bbb-thumbnails.vtt</code> becomes <code>/assets/sample/bbb-sprite.jpg</code>. Root-relative URLs and full URLs with supported protocols are kept as supplied. The directory is not recalculated from a redirected HTTP response URL. Prefer explicit image URLs when redirects or complex relative paths are involved.</p><p>The parser supports a BOM, common line endings, optional cue identifiers and timing settings, and skips NOTE, STYLE and REGION blocks. It is a thumbnail index parser, not a complete WebVTT subtitle layout engine.</p><h2 id="timing-and-display-boundaries" tabindex="-1">Timing and display boundaries <a class="header-anchor" href="#timing-and-display-boundaries" aria-label="Permalink to "Timing and display boundaries""></a></h2><p>For historical compatibility, start and end times are rounded down to whole seconds. Both interval endpoints are included, and the first matching cue in file order wins. At exactly 5 seconds in the example above, the first image still applies; the second appears after 5 seconds. Do not assume millisecond precision or exclusive end times.</p><p>Desktop hover selects a cue using the progress percentage multiplied by the video duration. Gaps hide the preview, and previews near the edges are aligned inward. The mobile path responds to progress dragging with an input event and hides about 500ms after the last drag update. Desktop coverage does not establish real touch-device support.</p><h2 id="asynchronous-registration-errors-and-cleanup" tabindex="-1">Asynchronous registration, errors and cleanup <a class="header-anchor" href="#asynchronous-registration-errors-and-cleanup" aria-label="Permalink to "Asynchronous registration, errors and cleanup""></a></h2><p>Registration fetches and parses the VTT and actually returns a Promise. Its success result contains only <code>name: 'artplayerPluginVttThumbnail'</code>. Installation through the constructor's plugins array is asynchronous; do not assume that the result is registered immediately after construction.</p><p>To wait explicitly and handle request or parse errors, call <code>art.plugins.add()</code> once after constructing the player:</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'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=128,0,128,72</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>The four values <code>x,y,w,h</code> are the left position, top position, width and height within the image, in pixels. x/y must be nonnegative and w/h positive; all four must be finite numbers. Each cue has one image URL line with a crop fragment. Ordinary subtitle text is not a thumbnail index.</p><p>Relative images are joined to the directory of the <strong>supplied VTT URL</strong>. For example, <code>bbb-sprite.jpg</code> inside <code>/assets/sample/bbb-thumbnails.vtt</code> becomes <code>/assets/sample/bbb-sprite.jpg</code>. Root-relative URLs and full URLs with supported protocols are kept as supplied. The directory is not recalculated from a redirected HTTP response URL. Prefer explicit image URLs when redirects or complex relative paths are involved.</p><p>The parser supports a BOM, common line endings, optional cue identifiers and timing settings, and skips NOTE, STYLE and REGION blocks. It is a thumbnail index parser, not a complete WebVTT subtitle layout engine.</p><h2 id="timing-and-display-boundaries" tabindex="-1">Timing and display boundaries <a class="header-anchor" href="#timing-and-display-boundaries" aria-label="Permalink to "Timing and display boundaries""></a></h2><p>For historical compatibility, start and end times are rounded down to whole seconds. Both interval endpoints are included, and the first matching cue in file order wins. At exactly 5 seconds in the example above, the first image still applies; the second appears after 5 seconds. Do not assume millisecond precision or exclusive end times.</p><p>Desktop hover selects a cue using the progress percentage multiplied by the video duration. Gaps hide the preview, and previews near the edges are aligned inward. The mobile path responds to progress dragging with an input event and hides about 500ms after the last drag update. Desktop coverage does not establish real touch-device support.</p><p>The selected position must be strictly inside the progress bar. Desktop progress at exactly 0 or 1 hides the preview. Those mobile endpoints do not draw a new preview, but an existing preview still hides on its timer. The plugin uses control name <code>vtt-thumbnail</code> and CSS class <code>art-control-thumbnails</code>; preserve these existing hooks.</p><h2 id="asynchronous-registration-errors-and-cleanup" tabindex="-1">Asynchronous registration, errors and cleanup <a class="header-anchor" href="#asynchronous-registration-errors-and-cleanup" aria-label="Permalink to "Asynchronous registration, errors and cleanup""></a></h2><p>Registration fetches and parses the VTT and actually returns a Promise. Its success result contains only <code>name: 'artplayerPluginVttThumbnail'</code>. Installation through the constructor's plugins array is asynchronous; do not assume that the result is registered immediately after construction.</p><p>To wait explicitly and handle request or parse errors, call <code>art.plugins.add()</code> once after constructing the player:</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'</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;"> thumbnails </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-vtt-thumbnail/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -33,4 +33,4 @@ import{_ as e,o as i,c as n,ak as a,j as t}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;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Unable to load thumbnails'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, error);</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;">void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> installThumbnails</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><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></div></div><p>Request and format errors reject registration; format errors include a line number. Registration completion establishes that the VTT was parsed and the control created, not that every image has decoded. Images load when the browser displays them; a later image failure does not reject an already settled registration Promise.</p><p>There is no update, reload or independent destroy method. Switching the main video does not refetch the VTT. For a different video and thumbnail set, you can destroy and recreate the player. Removing a control is not a complete uninstall; repeated installation is not an update API.</p><p>Destroying the player cancels outstanding requests where AbortController is available, settles canceled registration, removes owned listeners and timers, and removes the control only if this installation still owns it. Cancellation still returns the name object, so the name alone does not prove an image is available. Late requests cannot remount the interface.</p><h2 id="typescript-compatibility" tabindex="-1">TypeScript compatibility <a class="header-anchor" href="#typescript-compatibility" aria-label="Permalink to "TypeScript compatibility""></a></h2><p>The root and <code>/legacy</code> entrances preserve the latest published 1.1.0 synchronous return declaration and replacement-function shape, although registration is asynchronous at runtime. The <code>/runtime</code> entrance above uses the same JavaScript implementation and accurately declares the Promise and runtime <code>.default</code> self-alias. It also exposes <code>Option</code>, <code>Result</code>, <code>Factory</code> and <code>RuntimeFactory</code> types.</p><p>The older 1.0.x <code>export =</code> shape cannot preserve the same type extraction as the 1.1.0 default export. TypeScript consumers relying on those earlier CommonJS declarations should migrate to <code>/runtime</code>. NodeNext ESM consumers should also prefer this entrance to avoid the historical namespace shape retained by the root. Legal older JavaScript calls and distribution file entrances remain available.</p><p>Browser checks cover cropping and cleanup with published and candidate cores. Complete mobile, plugin combination and release-artifact acceptance remains tracked separately.</p>`,24)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> installThumbnails</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><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></div></div><p>Request and format errors reject registration; format errors include a line number. Registration completion establishes that the VTT was parsed and the control created, not that every image has decoded. Images load when the browser displays them; a later image failure does not reject an already settled registration Promise.</p><p>There is no update, reload or independent destroy method. Switching the main video does not refetch the VTT. For a different video and thumbnail set, you can destroy and recreate the player. Removing a control is not a complete uninstall; repeated installation is not an update API.</p><p>Destroying the player cancels outstanding requests where AbortController is available, settles canceled registration, removes owned listeners and timers, and removes the control only if this installation still owns it. Cancellation still returns the name object, so the name alone does not prove an image is available. Late requests cannot remount the interface.</p><h2 id="typescript-compatibility" tabindex="-1">TypeScript compatibility <a class="header-anchor" href="#typescript-compatibility" aria-label="Permalink to "TypeScript compatibility""></a></h2><p>The root and <code>/legacy</code> entrances preserve the latest published 1.1.0 synchronous return declaration and replacement-function shape, although registration is asynchronous at runtime. The <code>/runtime</code> entrance above uses the same JavaScript implementation and accurately declares the Promise and runtime <code>.default</code> self-alias. It also exposes <code>Option</code>, <code>Result</code>, <code>Factory</code> and <code>RuntimeFactory</code> types.</p><p>The older 1.0.x <code>export =</code> shape cannot preserve the same type extraction as the 1.1.0 default export. TypeScript consumers relying on those earlier CommonJS declarations should migrate to <code>/runtime</code>. NodeNext ESM consumers should also prefer this entrance to avoid the historical namespace shape retained by the root. Legal older JavaScript calls and distribution file entrances remain available.</p><p>Browser checks cover cropping and cleanup with published and candidate cores. Complete mobile, plugin combination and release-artifact acceptance remains tracked separately.</p>`,25)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",24)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
import{_ as e,o as i,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"VTT Thumbnail","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/vtt-thumbnail.md","filePath":"en/plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),l={name:"en/plugin/vtt-thumbnail.md"};function p(r,s,h,o,d,c){return i(),n("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const m=e(l,[["render",p]]);export{u as __pageData,m as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/canvas.md","filePath":"en/proxy/canvas.md","lastUpdated":null}'),l={name:"en/proxy/canvas.md"};function p(r,s,h,k,d,E){return n(),e("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a("",21)]))}const y=i(l,[["render",p]]);export{c as __pageData,y as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/canvas.md","filePath":"en/proxy/canvas.md","lastUpdated":null}'),l={name:"en/proxy/canvas.md"};function p(r,s,h,k,d,E){return n(),e("div",null,s[0]||(s[0]=[a('<h1 id="canvas-video-proxy" tabindex="-1">Canvas video proxy <a class="header-anchor" href="#canvas-video-proxy" aria-label="Permalink to "Canvas video proxy""></a></h1><p><a href="./../../proxy/canvas.html">简体中文</a></p><p>Decode audio/video with a real video element, draw its picture to Canvas and optionally post-process each draw. Install through ArtPlayer's proxy option, not its plugins array. This page describes the unreleased branch; decoding, pixel access and device limitations still apply.</p><h2 id="install-and-example" tabindex="-1">Install and example <a class="header-anchor" href="#install-and-example" aria-label="Permalink to "Install 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-proxy-canvas</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM uses <code>import canvas from 'artplayer-proxy-canvas'</code>. Scripts load <code>dist/artplayer-proxy-canvas.js</code>, exposing <code>artplayerProxyCanvas</code>. The <a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas" target="_blank" rel="noreferrer">original example</a> is retained below:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-canvas</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/canvas.md","filePath":"en/proxy/canvas.md","lastUpdated":1789502800000}'),l={name:"en/proxy/canvas.md"};function p(r,s,h,k,d,E){return n(),e("div",null,s[0]||(s[0]=[a('<h1 id="canvas-video-proxy" tabindex="-1">Canvas video proxy <a class="header-anchor" href="#canvas-video-proxy" aria-label="Permalink to "Canvas video proxy""></a></h1><p><a href="./../../proxy/canvas.html">简体中文</a></p><p>Decode audio/video with a real video element, draw its picture to Canvas and optionally post-process each draw. Install through ArtPlayer's proxy option, not its plugins array. This page describes the unreleased branch; decoding, pixel access and device limitations still apply.</p><h2 id="install-and-example" tabindex="-1">Install and example <a class="header-anchor" href="#install-and-example" aria-label="Permalink to "Install 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-proxy-canvas</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM uses <code>import canvas from 'artplayer-proxy-canvas'</code>. Scripts load <code>dist/artplayer-proxy-canvas.js</code>, exposing <code>artplayerProxyCanvas</code>. The <a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas" target="_blank" rel="noreferrer">original example</a> is retained below:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-canvas</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerProxyCanvas from 'artplayer-proxy-canvas';</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/canvas.md","filePath":"en/proxy/canvas.md","lastUpdated":1789502800000}'),l={name:"en/proxy/canvas.md"};function p(r,s,h,k,d,E){return n(),e("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a("",21)]))}const y=i(l,[["render",p]]);export{c as __pageData,y as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as e,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Mediabunny video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/mediabunny.md","filePath":"en/proxy/mediabunny.md","lastUpdated":null}'),l={name:"en/proxy/mediabunny.md"};function r(p,s,d,h,o,k){return e(),n("div",null,s[0]||(s[0]=[a('<h1 id="mediabunny-video-proxy" tabindex="-1">Mediabunny video proxy <a class="header-anchor" href="#mediabunny-video-proxy" aria-label="Permalink to "Mediabunny video proxy""></a></h1><p><a href="./../../proxy/mediabunny.html">简体中文</a></p><p>Read media through Mediabunny and expose a video-like surface backed by Canvas and an audio pipeline, including HLS quality/audio selection. Install through ArtPlayer's proxy option. This describes the unreleased branch; it does not supply missing decoders or every HTMLVideoElement capability.</p><h2 id="install-and-example" tabindex="-1">Install and example <a class="header-anchor" href="#install-and-example" aria-label="Permalink to "Install 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-proxy-mediabunny</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM uses <code>import mediabunny from 'artplayer-proxy-mediabunny'</code>. Scripts load <code>dist/artplayer-proxy-mediabunny.js</code>, exposing <code>artplayerProxyMediabunny</code>. This is the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny" target="_blank" rel="noreferrer">original HLS example</a>; its remote stream is not an offline fixture:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-mediabunny</span></span>
|
||||
import{_ as i,o as e,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Mediabunny video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/mediabunny.md","filePath":"en/proxy/mediabunny.md","lastUpdated":1789502800000}'),l={name:"en/proxy/mediabunny.md"};function r(p,s,d,h,o,k){return e(),n("div",null,s[0]||(s[0]=[a('<h1 id="mediabunny-video-proxy" tabindex="-1">Mediabunny video proxy <a class="header-anchor" href="#mediabunny-video-proxy" aria-label="Permalink to "Mediabunny video proxy""></a></h1><p><a href="./../../proxy/mediabunny.html">简体中文</a></p><p>Read media through Mediabunny and expose a video-like surface backed by Canvas and an audio pipeline, including HLS quality/audio selection. Install through ArtPlayer's proxy option. This describes the unreleased branch; it does not supply missing decoders or every HTMLVideoElement capability.</p><h2 id="install-and-example" tabindex="-1">Install and example <a class="header-anchor" href="#install-and-example" aria-label="Permalink to "Install 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-proxy-mediabunny</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM uses <code>import mediabunny from 'artplayer-proxy-mediabunny'</code>. Scripts load <code>dist/artplayer-proxy-mediabunny.js</code>, exposing <code>artplayerProxyMediabunny</code>. This is the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny" target="_blank" rel="noreferrer">original HLS example</a>; its remote stream is not an offline fixture:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-mediabunny</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerProxyMediabunny from 'artplayer-proxy-mediabunny';</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as i,o as e,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Mediabunny video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/mediabunny.md","filePath":"en/proxy/mediabunny.md","lastUpdated":1789502800000}'),l={name:"en/proxy/mediabunny.md"};function r(p,s,d,h,o,k){return e(),n("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a("",29)]))}const y=i(l,[["render",r]]);export{u as __pageData,y as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as e,c as n,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Mediabunny video proxy","description":"","frontmatter":{},"headers":[],"relativePath":"en/proxy/mediabunny.md","filePath":"en/proxy/mediabunny.md","lastUpdated":null}'),l={name:"en/proxy/mediabunny.md"};function r(p,s,d,h,o,k){return e(),n("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a("",29)]))}const y=i(l,[["render",r]]);export{u as __pageData,y as default};
|
||||
+1
-1
@@ -26,4 +26,4 @@ import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.25</span><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;"> track;</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></div></div><p>命名类型包括 <code>Option</code>、<code>UpdateOption</code>、旧 <code>Result</code>、<code>RuntimeResult</code> 与 <code>RuntimeFactory</code>。在线编辑器的全局默认类型也保留旧推导;选择精确更新类型时,可显式使用 <code>artplayerPluginAudioTrack as artplayerPluginAudioTrack.RuntimeFactory</code>。这不会创建第二份插件实现。</p><p>真实桌面测试覆盖音频/视频播放、暂停、seek、更新和销毁;它们不证明所有移动设备、代理播放器、音频格式或长时间同步组合都通过。完整支持范围仍需结合对应浏览器的解码能力与项目验收记录。</p>`,21)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>命名类型包括 <code>Option</code>、<code>UpdateOption</code>、旧 <code>Result</code>、<code>RuntimeResult</code> 与 <code>RuntimeFactory</code>。在线编辑器的全局默认类型也保留旧推导;选择精确更新类型时,可显式使用 <code>artplayerPluginAudioTrack as artplayerPluginAudioTrack.RuntimeFactory</code>。这不会创建第二份插件实现。</p><p>真实桌面测试覆盖音频/视频播放、暂停、seek、更新和销毁;它们不证明所有移动设备、代理播放器、音频格式或长时间同步组合都通过。完整支持范围仍需结合对应浏览器的解码能力与项目验收记录。</p><p>Windows WebKit 的 MP4/AAC 耗尽缓冲仍有原生媒体验证缺口:该复现中视频停滞不可靠地触发 waiting。换源顺序检查通过不代表这一独立问题已关闭。</p>`,22)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789497001000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),a("",21)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const E=JSON.parse('{"title":"独立音轨","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/audio-track.md","filePath":"plugin/audio-track.md","lastUpdated":1789497001000}'),p={name:"plugin/audio-track.md"};function l(r,s,h,d,k,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-audio-track/index.js"},"▶ Run Code",-1),a("",22)]))}const u=i(p,[["render",l]]);export{E as __pageData,u as default};
|
||||
+4
-4
@@ -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 c=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-label="Permalink to "弹幕库""></a></h1><p><a href="./../en/plugin/danmuku.html">English guide</a></p><p>本文描述当前重构分支。<code>/runtime</code> 类型入口与本轮修复尚未发布到 npm;CDN 默认仍加载已发布版本。</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-label="Permalink to "演示""></a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><p>下方 Run Code 使用本站构建的插件与样本。接入自己的应用时,请替换容器和媒体 URL。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-0" checked><label data-title="npm" for="tab-artplayer-5c9980847c7191f0-0">npm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-1"><label data-title="yarn" for="tab-artplayer-5c9980847c7191f0-1">yarn</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-2"><label data-title="pnpm" for="tab-artplayer-5c9980847c7191f0-2">pnpm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-3"><label data-title="script" for="tab-artplayer-5c9980847c7191f0-3">script</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adap
Line truncated
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-label="Permalink to "弹幕库""></a></h1><p><a href="./../en/plugin/danmuku.html">English guide</a></p><p>本文描述当前重构分支。<code>/runtime</code> 类型入口与本轮修复尚未发布到 npm;CDN 默认仍加载已发布版本。</p><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-label="Permalink to "演示""></a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><p>下方 Run Code 使用本站构建的插件与样本。接入自己的应用时,请替换容器和媒体 URL。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-0" checked><label data-title="npm" for="tab-artplayer-5c9980847c7191f0-0">npm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-1"><label data-title="yarn" for="tab-artplayer-5c9980847c7191f0-1">yarn</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-2"><label data-title="pnpm" for="tab-artplayer-5c9980847c7191f0-2">pnpm</label><input type="radio" name="group-artplayer-5c9980847c7191f0" id="tab-artplayer-5c9980847c7191f0-3"><label data-title="script" for="tab-artplayer-5c9980847c7191f0-3">script</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer-plugin-danmuku.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to "CDN""></a></h2><div class="vp-code-group vp-adap
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕文本</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕时间, 单位秒,省略时为当前播放器时间加 0.5 秒;显式 0 保留</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕模式: 0: 滚动(默认),1: 顶部,2: 底部</span></span>
|
||||
@@ -33,7 +33,7 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MARGIN</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 显示区域配置项</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SPEED</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 弹幕速度配置项</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> COLOR</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 颜色列表配置项</span></span>
|
||||
<span class="line"><span style="--shiki-light:#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><span class="line-number">29</span><br></div></div><p><code>OPACITY</code>、<code>FONT_SIZE</code>、<code>MARGIN</code>、<code>SPEED</code> 可覆盖滑块的 <code>min</code>、<code>max</code>、<code>steps</code>。 每个 step 可包含 <code>name</code>、<code>value</code>、<code>hide</code>、<code>show</code>;MARGIN 的 value 是上下边距数组。 <code>COLOR</code> 用 CSS 颜色字符串数组替换调色板,空数组使用内置调色板。</p><h2 id="生命周期" tabindex="-1">生命周期 <a class="header-anchor" href="#生命周期" aria-label="Permalink to "生命周期""></a></h2><p><code>filter</code> 同步执行,不应返回 Promise;<code>beforeEmit</code> 可异步,但只有严格返回 <code>true</code> 才发送。<code>beforeVisible</code> 可以异步。普通函数形式的这三个回调,其 <code>this</code> 都是当前配置对象。直接调用 <code>emit</code> 不执行 <code>beforeEmit</code>,需要业务校验时请在调用前完成。</p><p>来自用户输入的弹幕:</p><p><code>beforeEmit -> filter -> beforeVisible -> artplayerPluginDanmuku:visible</code></p><p>来自服务器或直接调用 <code>emit</code> 的弹幕:</p><p><code>filter -> beforeVisible -> artplayerPluginDanmuku:visible</code></p>`,23),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 保存到数据库</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><span class="line-number">29</span><br></div></div><p><code>OPACITY</code>、<code>FONT_SIZE</code>、<code>MARGIN</code>、<code>SPEED</code> 可覆盖滑块的 <code>min</code>、<code>max</code>、<code>steps</code>。 每个 step 可包含 <code>name</code>、<code>value</code>、<code>hide</code>、<code>show</code>;<code>hide</code> 隐藏标签,保留的 <code>show</code> 字段未被渲染器读取。MARGIN 的 value 是上下边距数组。 <code>COLOR</code> 用 CSS 颜色字符串数组替换调色板,空数组使用内置调色板。</p><h2 id="生命周期" tabindex="-1">生命周期 <a class="header-anchor" href="#生命周期" aria-label="Permalink to "生命周期""></a></h2><p><code>filter</code> 同步执行,不应返回 Promise;<code>beforeEmit</code> 可异步,但只有严格返回 <code>true</code> 才发送。<code>beforeVisible</code> 可以异步。普通函数形式的这三个回调,其 <code>this</code> 都是当前配置对象。直接调用 <code>emit</code> 不执行 <code>beforeEmit</code>,需要业务校验时请在调用前完成。</p><p>运行时 <code>filter</code> 接受同步 truthy 值,<code>beforeVisible</code> 接受异步结算后的 truthy 值;旧根声明将它们限制为布尔值。建议仍显式返回布尔值,尤其不要用返回 Promise 的 <code>filter</code> 进行异步校验。</p><p>来自用户输入的弹幕:</p><p><code>beforeEmit -> filter -> beforeVisible -> artplayerPluginDanmuku:visible</code></p><p>来自服务器或直接调用 <code>emit</code> 的弹幕:</p><p><code>filter -> beforeVisible -> artplayerPluginDanmuku:visible</code></p>`,25),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 保存到数据库</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> saveDanmu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">danmu</span><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:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</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:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
@@ -359,7 +359,7 @@ import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span 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;">, drawPoints);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'resize'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:loaded'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to "TypeScript""></a></h2><p>根入口和 <code>/legacy</code> 保留 npm 5.3.0 的历史声明形状,其中部分方法返回值与真实运行时不一致。 当前分支新增 <code>/runtime</code> 提供准确类型,加载的仍是同一个运行时工厂;该入口尚未发布,不能从旧 CDN 版本导入。</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'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:loaded'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to "TypeScript""></a></h2><p><code>/runtime</code> 的 <code>Owner</code> 描述上述内部返回对象,便于维护已有高级调用。其 <code>art</code>、<code>option</code>、<code>queue</code>、<code>states</code> 是实时对象;<code>readys</code> 是当前候选列表,<code>speed</code>、<code>fontSize</code>、<code>marginTop/marginBottom</code>、<code>isRotate</code> 是计算视图。不要直接修改队列状态来模拟公开命令。</p><p>Owner 额外的 <code>start/stop</code> 控制弹幕调度并发出对应事件,<code>continue/suspend</code> 只恢复或暂停已有显示项,<code>update</code> 安排调度;这些方法同步返回 Owner,不控制视频播放。<code>resize</code> 调整显示项,<code>seek</code> 取消旧显示准备并重新调度,两者返回 <code>undefined</code>。Owner 的 <code>destroy</code> 清理调度、节点和输入任务,发出 destroy 事件,但不等于完整卸载设置面板和热力图;完整清理由 <code>art.destroy()</code> 驱动。注册结果没有这些额外命令。</p><p>根入口和 <code>/legacy</code> 保留 npm 5.3.0 的历史声明形状,其中部分方法返回值与真实运行时不一致。 当前分支新增 <code>/runtime</code> 提供准确类型,加载的仍是同一个运行时工厂;该入口尚未发布,不能从旧 CDN 版本导入。</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'</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;"> danmuku </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-danmuku/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;"> { RuntimeOption, Point, EventMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-danmuku/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@@ -367,4 +367,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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> points</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Point</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]];</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onError</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;">[error]: EventMap[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:error'</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;"> 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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">danmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(option)] });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'artplayerPluginDanmuku:error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onError);</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></div></div><p><code>EventMap</code> 显式描述事件参数,不会自动扩展核心历史事件声明。工厂仍暴露 <code>icons</code> 对象供自定义图标。 包内 <code>README.md</code> 和 <code>ARCHITECTURE.md</code> 维护模块职责、验证命令及尚未完成的设备和组合验收。</p>`,5)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
|
||||
<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;">'artplayerPluginDanmuku:error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onError);</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></div></div><p><code>EventMap</code> 显式描述事件参数,不会自动扩展核心历史事件声明。工厂仍暴露 <code>icons</code> 对象供自定义图标。</p><p>根入口命名类型为 <code>Mode</code>、<code>Danmuku</code>、<code>Slider</code>、<code>Danmu</code>、<code>Option</code>、<code>Result</code>。<code>/runtime</code> 提供 <code>Mode</code>、<code>State</code>、<code>Margin</code>、<code>Point</code>、<code>Danmu</code>、<code>NormalizedDanmu</code>、<code>Item</code>、<code>Input</code>、<code>SliderStep</code>、<code>Slider</code>、<code>Heatmap</code>、<code>NormalizedOption</code>、<code>RuntimeOption</code>、<code>Owner</code>、<code>RuntimeResult</code>、<code>Icons</code>、<code>RuntimeFactory</code>、<code>EventMap</code>。<code>Item</code> 带有 <code>$state/$index/$ref/$restTime/$lastStartTime</code>;节点会复用,回收后 <code>$ref</code> 为 null,不能将 visible 时取得的节点当作永久归属该弹幕。</p><p><code>icons</code> 包含 <code>$on/$off/$config/$style</code>、三个模式各自的 <code>$mode_0_off/$mode_0_on</code> 到 <code>$mode_2_off/$mode_2_on</code>,以及 <code>$check_on/$check_off</code>。这些 SVG 字符串可供应用自己的界面复用。内置面板直接读取打包的图标,修改工厂 icons 对象不会替换内置面板图标。 包内 <code>README.md</code> 和 <code>ARCHITECTURE.md</code> 维护模块职责、验证命令及尚未完成的设备和组合验收。</p>`,9)]))}const y=n(e,[["render",h]]);export{g as __pageData,y 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 c=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",23),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",8),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",5)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
|
||||
import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1789461935000}'),e={name:"plugin/danmuku.md"};function h(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",25),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",4),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",8),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",9)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789466970000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="dash-控制" tabindex="-1">DASH 控制 <a class="header-anchor" href="#dash-控制" aria-label="Permalink to "DASH 控制""></a></h1><p><a href="./../en/plugin/dash-control.html">English</a></p><p>为 dash.js 播放器添加画质和音轨菜单。你负责创建 SDK、绑定 video 并赋给 <code>art.dash</code>;插件控制这个实例,只清理自己创建的菜单和监听器。</p><p>本页描述当前重构分支。这里的 SDK 适配、自动刷新和生命周期修复尚未发布;未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dashjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-dash-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dashjs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dashjs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginDashControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-dash-control'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>使用 script 标签时,在初始化前加载 ArtPlayer、dash.js 和 <code>dist/artplayer-plugin-dash-control.js</code>。插件全局名称为 <code>artplayerPluginDashControl</code>。应用应固定依赖版本,并使用浏览器可访问的 MPD 和媒体片段。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control" target="_blank" rel="noreferrer">在线 DASH 示例</a>使用相同代码。接入应用时替换站点容器和视频地址。</p>`,10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},null,-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i dashjs</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-dash-control</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import dashjs from 'dashjs';</span></span>
|
||||
@@ -64,7 +64,7 @@ import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";
|
||||
<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>
|
||||
<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;">'destroy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, destroyDash)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p>示例在创建播放器时固定 SDK 能力分支。若 dash.js 无法使用 MediaSource,则保留原来的格式不支持提示,不创建 SDK 或安装依赖它的控制插件。这个示例没有提供原生 DASH 回退。</p><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><p><code>artplayerPluginDashControl(option?)</code> 同步返回插件工厂。<code>quality</code> 和 <code>audio</code> 都支持:</p><table tabindex="0"><thead><tr><th>字段</th><th>含义与默认行为</th></tr></thead><tbody><tr><td><code>control</code></td><td>显示底部控制器;省略时不显示。</td></tr><tr><td><code>setting</code></td><td>显示设置项;省略时不显示,还需播放器配置 <code>setting: true</code>。</td></tr><tr><td><code>title</code></td><td>菜单标题,默认 <code>Quality</code> 或 <code>Audio</code>。</td></tr><tr><td><code>auto</code></td><td>回退文字,默认 <code>Auto</code>;画质还用于自动选项,不会新增一个虚拟音轨。</td></tr><tr><td><code>getName(item)</code></td><td>根据原始 SDK 档位或轨道对象返回字符串。只有一个参数,不提供索引或播放器 this。</td></tr></tbody></table><p>默认画质标签为 <code>level.height + 'p'</code>,音轨标签取 <code>track.lang</code> 或 <code>track.id</code>。这些元数据可能缺失或为 null,自定义回调应像完整示例一样返回字符串回退。空标题或空 Auto 文字会使用默认值。</p><p>相同文字标签会合并成一个选项。若同高度的多个档位需要分别显示,可以在标签中加入码率或其他元数据。选中重复项时,会保留实际选中的 SDK 标识或轨道对象。轨道列表变空时移除对应菜单。</p><h2 id="画质和音轨选择" tabindex="-1">画质和音轨选择 <a class="header-anchor" href="#画质和音轨选择" aria-label="Permalink to "画质和音轨选择""></a></h2><p>手动选画Line truncated
|
||||
<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;">'destroy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, destroyDash)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p>示例在创建播放器时固定 SDK 能力分支。若 dash.js 无法使用 MediaSource,则保留原来的格式不支持提示,不创建 SDK 或安装依赖它的控制插件。这个示例没有提供原生 DASH 回退。</p><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><p><code>artplayerPluginDashControl(option?)</code> 同步返回插件工厂。<code>quality</code> 和 <code>audio</code> 都支持:</p><table tabindex="0"><thead><tr><th>字段</th><th>含义与默认行为</th></tr></thead><tbody><tr><td><code>control</code></td><td>显示底部控制器;省略时不显示。</td></tr><tr><td><code>setting</code></td><td>显示设置项;省略时不显示,还需播放器配置 <code>setting: true</code>。</td></tr><tr><td><code>title</code></td><td>菜单标题,默认 <code>Quality</code> 或 <code>Audio</code>。</td></tr><tr><td><code>auto</code></td><td>回退文字,默认 <code>Auto</code>;画质还用于自动选项,不会新增一个虚拟音轨。</td></tr><tr><td><code>getName(item)</code></td><td>根据原始 SDK 档位或轨道对象返回字符串。只有一个参数,不提供索引或播放器 this。</td></tr></tbody></table><p>默认画质标签为 <code>level.height + 'p'</code>,音轨标签取 <code>track.lang</code> 或 <code>track.id</code>。这些元数据可能缺失或为 null,自定义回调应像完整示例一样返回字符串回退。空标题或空 Auto 文字会使用默认值。</p><p>相同文字标签会合并成一个选项。若同高度的多个档位需要分别显示,可以在标签中加入码率或其他元数据。选中重复项时,会保留实际选中的 SDK 标识或轨道对象。轨道列表变空时移除对应菜单。</p><h2 id="画质和音轨选择" tabindex="-1">画质和音轨选择 <a class="header-anchor" href="#画质和音轨选择" aria-label="Permalink to "画质和音轨选择""></a></h2><p>手动选画Line truncated
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">height</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;">bitrateInKbit</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:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Track</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">id</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;"> number</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">lang</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;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
@@ -78,4 +78,4 @@ import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setting: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">track</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.lang?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</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;"> String</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(track.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Audio'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>根入口导出 <code>Option</code>、<code>Config</code>、<code>QualityLevel</code>、<code>AudioTrack</code> 和 <code>Result</code>,原根入口与 legacy 路径继续保留。使用实际 SDK 声明时,dash.js 4.5.2 的画质类型为 <code>BitrateInfo</code>,5.2.1 使用 <code>Representation</code>;其编译器与模块解析要求不同,应验证实际 SDK/TypeScript 组合。在应用的集成类型中描述外部附加的 <code>art.dash</code>。</p><h2 id="验证范围" tabindex="-1">验证范围 <a class="header-anchor" href="#验证范围" aria-label="Permalink to "验证范围""></a></h2><p>重构使用固定 dash.js 4.5.2 / 5.2.1、本地自适应媒体和新旧核心组合验证;这两个版本是验证点,不是新定义的完整支持范围。插件对4.5.2暂停拖动后空缓冲指标陈旧的问题有定向恢复,保留调用方 SDK 设置和媒体时间。Windows Playwright WebKit 缺少相关 MSE 路径,不能代表 Safari 或真机播放已验收。采用未发布重构前,应验证自己的 MPD、DRM 和目标设备。</p>`,29)]))}const g=a(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>根入口导出 <code>Option</code>、<code>Config</code>、<code>QualityLevel</code>、<code>AudioTrack</code> 和 <code>Result</code>,原根入口与 legacy 路径继续保留。使用实际 SDK 声明时,dash.js 4.5.2 的画质类型为 <code>BitrateInfo</code>,5.2.1 使用 <code>Representation</code>;其编译器与模块解析要求不同,应验证实际 SDK/TypeScript 组合。在应用的集成类型中描述外部附加的 <code>art.dash</code>。</p><p>注册结果只有固定的 <code>name: 'artplayerPluginDashControl'</code> 和 <code>update()</code>。工厂普通调用允许省略配置;最后一个声明重载保留必填参数,因此 <code>Parameters<typeof dashControl>[0]</code> 仍为 <code>Option</code>,不包含 <code>undefined</code>。本包没有 <code>/runtime</code> 子路径,也没有工厂 <code>.default</code> 自引用。</p><h2 id="验证范围" tabindex="-1">验证范围 <a class="header-anchor" href="#验证范围" aria-label="Permalink to "验证范围""></a></h2><p>重构使用固定 dash.js 4.5.2 / 5.2.1、本地自适应媒体和新旧核心组合验证;这两个版本是验证点,不是新定义的完整支持范围。插件对4.5.2暂停拖动后空缓冲指标陈旧的问题有定向恢复,保留调用方 SDK 设置和媒体时间。Windows Playwright WebKit 缺少相关 MSE 路径,不能代表 Safari 或真机播放已验收。采用未发布重构前,应验证自己的 MPD、DRM 和目标设备。</p>`,30)]))}const g=a(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
+1
-1
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"DASH 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-control.md","filePath":"plugin/dash-control.md","lastUpdated":1789466970000}'),e={name:"plugin/dash-control.md"};function t(h,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},null,-1),i("",29)]))}const g=a(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
./uncompiled/artplayer-plugin-dash-control/index.js`},"▶ Run Code",-1),i("",30)]))}const g=a(e,[["render",t]]);export{o as __pageData,g as default};
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="hls-控制" tabindex="-1">HLS 控制 <a class="header-anchor" href="#hls-控制" aria-label="Permalink to "HLS 控制""></a></h1><p><a href="./../en/plugin/hls-control.html">English</a></p><p>为 Hls.js 播放器添加画质与音轨菜单。插件控制你放在 <code>art.hls</code> 上的 Hls.js 实例,不负责下载、创建或销毁 SDK。</p><p>本页描述当前重构分支。这里说明的自动刷新与生命周期修复尚未发布;未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i(`<h1 id="hls-控制" tabindex="-1">HLS 控制 <a class="header-anchor" href="#hls-控制" aria-label="Permalink to "HLS 控制""></a></h1><p><a href="./../en/plugin/hls-control.html">English</a></p><p>为 Hls.js 播放器添加画质与音轨菜单。插件控制你放在 <code>art.hls</code> 上的 Hls.js 实例,不负责下载、创建或销毁 SDK。</p><p>本页描述当前重构分支。这里说明的自动刷新与生命周期修复尚未发布;未固定版本的 npm/CDN 安装仍使用已发布版本。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hls.js</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-hls-control</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hls </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'hls.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginHlsControl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-hls-control'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>通过 script 标签使用时,先加载 ArtPlayer、Hls.js 和插件的 <code>dist/artplayer-plugin-hls-control.js</code>。插件全局名称为 <code>artplayerPluginHlsControl</code>。应用中应固定依赖版本,并使用允许浏览器访问的视频地址。</p><h2 id="完整示例" tabindex="-1">完整示例 <a class="header-anchor" href="#完整示例" aria-label="Permalink to "完整示例""></a></h2><p>下面与<a href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control" target="_blank" rel="noreferrer">在线 HLS 示例</a>使用同一份代码和站点容器。接入自己的应用时替换容器与视频地址。</p>`,10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},null,-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i hls.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-hls-control</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import Hls from 'hls.js';</span></span>
|
||||
@@ -82,4 +82,4 @@ import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setting: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">track</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> track.lang </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Audio'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>根入口导出 <code>Option</code>、<code>Config</code>、<code>QualityLevel</code>、<code>AudioTrack</code> 和 <code>Result</code> 类型,原根入口及 legacy 路径继续保留。声明不会假定每个 ArtPlayer 实例都有 Hls.js;请在应用的集成类型中描述 <code>art.hls</code>。</p><h2 id="验证范围" tabindex="-1">验证范围 <a class="header-anchor" href="#验证范围" aria-label="Permalink to "验证范围""></a></h2><p>重构使用本地媒体和真实 worker 验证 Hls.js 1.5.17 / 1.7.2;这两个版本是验证点,不是新定义的支持范围。Firefox 的分组播放崩溃和另一项切组停滞仍在排查。Windows Playwright WebKit 缺少测试所需的 MSE 路径,不能代表 Safari/iOS 原生 HLS 已验收。采用尚未发布的重构前,应验证实际媒体与目标设备。</p>`,22)]))}const o=a(e,[["render",h]]);export{g as __pageData,o as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>根入口导出 <code>Option</code>、<code>Config</code>、<code>QualityLevel</code>、<code>AudioTrack</code> 和 <code>Result</code> 类型,原根入口及 legacy 路径继续保留。声明不会假定每个 ArtPlayer 实例都有 Hls.js;请在应用的集成类型中描述 <code>art.hls</code>。</p><p>注册结果只有固定的 <code>name: 'artplayerPluginHlsControl'</code> 和 <code>update()</code>。工厂普通调用允许省略配置;最后一个声明重载保留必填参数,因此 <code>Parameters<typeof hlsControl>[0]</code> 仍为 <code>Option</code>,不包含 <code>undefined</code>。本包没有 <code>/runtime</code> 子路径,也没有工厂 <code>.default</code> 自引用。</p><h2 id="验证范围" tabindex="-1">验证范围 <a class="header-anchor" href="#验证范围" aria-label="Permalink to "验证范围""></a></h2><p>重构使用本地媒体和真实 worker 验证 Hls.js 1.5.17 / 1.7.2;这两个版本是验证点,不是新定义的支持范围。Firefox 的分组播放崩溃和另一项切组停滞仍在排查。Windows Playwright WebKit 缺少测试所需的 MSE 路径,不能代表 Safari/iOS 原生 HLS 已验收。采用尚未发布的重构前,应验证实际媒体与目标设备。</p>`,23)]))}const g=a(e,[["render",h]]);export{o as __pageData,g as default};
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},null,-1),i("",22)]))}const o=a(e,[["render",h]]);export{g as __pageData,o as default};
|
||||
import{_ as a,o as n,c as l,ak as i,j as p}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"HLS 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-control.md","filePath":"plugin/hls-control.md","lastUpdated":1789466111000}'),e={name:"plugin/hls-control.md"};function h(t,s,k,r,d,E){return n(),l("div",null,s[0]||(s[0]=[i("",10),p("div",{className:"run-code","data-libs":`https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js
|
||||
./uncompiled/artplayer-plugin-hls-control/index.js`},"▶ Run Code",-1),i("",23)]))}const g=a(e,[["render",h]]);export{o as __pageData,g as default};
|
||||
+2
-2
@@ -16,7 +16,7 @@ import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=0,0,128,72</span></span>
|
||||
<span class="line"><span></span></span>
|
||||
<span class="line"><span>00:05.000 --> 00:10.000</span></span>
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=128,0,128,72</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>x,y,w,h</code> 分别是图片内的左边位置、上边位置、宽度和高度,单位像素。x/y 必须非负,w/h 必须大于零,四项必须是有限数值。每条 cue 使用一行带裁剪片段的图片地址,不能直接把普通字幕文字当作缩略图索引。</p><p>相对图片地址按<strong>传入的 VTT 地址所在目录</strong>拼接:<code>/assets/sample/bbb-thumbnails.vtt</code> 中的 <code>bbb-sprite.jpg</code> 对应 <code>/assets/sample/bbb-sprite.jpg</code>。以 <code>/</code> 或已支持协议开头的完整地址直接使用。不以 HTTP 重定向后的 response URL 重新计算目录;有重定向或复杂相对路径时,建议索引使用明确的图片地址。</p><p>解析器支持 BOM、常见换行符、可选 cue 标识符和时间行设置,并跳过 NOTE、STYLE、REGION 块。它用于缩略图索引,不是完整 WebVTT 字幕排版实现。</p><h2 id="时间与显示边界" tabindex="-1">时间与显示边界 <a class="header-anchor" href="#时间与显示边界" aria-label="Permalink to "时间与显示边界""></a></h2><p>为保留旧行为,开始和结束时间向下取整到秒;区间的两端都包含在内,并选择文件顺序中第一条匹配项。例如在上面的精确 5 秒边界仍显示第一张,超过 5 秒才显示第二张。不要假设它提供毫秒级精确区间或“结束时间不包含”的字幕语义。</p><p>桌面悬停按进度条百分比乘以视频总时长选择图片;没有匹配项时隐藏,预览靠近边缘时会向内对齐。移动端使用带输入事件的进度拖动路径,并在最后一次拖动更新后约 500ms 隐藏。桌面测试不能替代真实触摸设备验收。</p><h2 id="异步注册、错误和销毁" tabindex="-1">异步注册、错误和销毁 <a class="header-anchor" href="#异步注册、错误和销毁" aria-label="Permalink to "异步注册、错误和销毁""></a></h2><p>注册会请求并解析 VTT,实际返回 Promise,成功结果只有 <code>name: 'artplayerPluginVttThumbnail'</code>。构造器 plugins 数组中的安装是异步的,不要在构造后立即假设结果已注册。</p><p>需要明确等待和处理请求或解析失败时,可在构造播放器后调用一次 <code>art.plugins.add()</code>:</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span>bbb-sprite.jpg#xywh=128,0,128,72</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>x,y,w,h</code> 分别是图片内的左边位置、上边位置、宽度和高度,单位像素。x/y 必须非负,w/h 必须大于零,四项必须是有限数值。每条 cue 使用一行带裁剪片段的图片地址,不能直接把普通字幕文字当作缩略图索引。</p><p>相对图片地址按<strong>传入的 VTT 地址所在目录</strong>拼接:<code>/assets/sample/bbb-thumbnails.vtt</code> 中的 <code>bbb-sprite.jpg</code> 对应 <code>/assets/sample/bbb-sprite.jpg</code>。以 <code>/</code> 或已支持协议开头的完整地址直接使用。不以 HTTP 重定向后的 response URL 重新计算目录;有重定向或复杂相对路径时,建议索引使用明确的图片地址。</p><p>解析器支持 BOM、常见换行符、可选 cue 标识符和时间行设置,并跳过 NOTE、STYLE、REGION 块。它用于缩略图索引,不是完整 WebVTT 字幕排版实现。</p><h2 id="时间与显示边界" tabindex="-1">时间与显示边界 <a class="header-anchor" href="#时间与显示边界" aria-label="Permalink to "时间与显示边界""></a></h2><p>为保留旧行为,开始和结束时间向下取整到秒;区间的两端都包含在内,并选择文件顺序中第一条匹配项。例如在上面的精确 5 秒边界仍显示第一张,超过 5 秒才显示第二张。不要假设它提供毫秒级精确区间或“结束时间不包含”的字幕语义。</p><p>桌面悬停按进度条百分比乘以视频总时长选择图片;没有匹配项时隐藏,预览靠近边缘时会向内对齐。移动端使用带输入事件的进度拖动路径,并在最后一次拖动更新后约 500ms 隐藏。桌面测试不能替代真实触摸设备验收。</p><p>绘制位置必须严格位于进度条内部。桌面进度恰好为 0 或 1 时隐藏预览;移动端这两个端点不会绘制新预览,但已有预览仍按计时器隐藏。插件使用控件名 <code>vtt-thumbnail</code> 和样式类 <code>art-control-thumbnails</code>,请保留这些既有挂钩。</p><h2 id="异步注册、错误和销毁" tabindex="-1">异步注册、错误和销毁 <a class="header-anchor" href="#异步注册、错误和销毁" aria-label="Permalink to "异步注册、错误和销毁""></a></h2><p>注册会请求并解析 VTT,实际返回 Promise,成功结果只有 <code>name: 'artplayerPluginVttThumbnail'</code>。构造器 plugins 数组中的安装是异步的,不要在构造后立即假设结果已注册。</p><p>需要明确等待和处理请求或解析失败时,可在构造播放器后调用一次 <code>art.plugins.add()</code>:</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</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;"> thumbnails </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer-plugin-vtt-thumbnail/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -33,4 +33,4 @@ import{_ as i,o as n,c as e,ak as a,j as l}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;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Unable to load thumbnails'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, error);</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;">void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> installThumbnails</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><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></div></div><p>请求失败或格式错误会拒绝注册,格式错误包含行号。注册完成只说明 VTT 已加载解析并创建控件,不表示所有图片已解码;图片在浏览器显示时加载,图片请求失败不会变成已经完成的注册 Promise 的拒绝。</p><p>插件没有 update、reload 或独立 destroy 方法。切换主视频不会自动重新请求 VTT;切换到另一套视频和缩略图时,可销毁并重建播放器。不要把 <code>controls.remove()</code> 当作完整卸载,也不要用重复安装模拟一个没有提供的更新接口。</p><p>销毁播放器会取消待处理请求(环境支持 AbortController 时),结算取消的注册、移除自己的监听器和计时器,并移除仍由本次安装持有的控件。取消结算仍返回名称对象,因此名称本身不是图片可用的证明。迟到请求不会重新挂载界面。</p><h2 id="typescript-兼容" tabindex="-1">TypeScript 兼容 <a class="header-anchor" href="#typescript-兼容" aria-label="Permalink to "TypeScript 兼容""></a></h2><p>根入口和 <code>/legacy</code> 保留最新已发布 1.1.0 的旧同步返回类型与函数替换形状,实际注册始终是异步的。上面的 <code>/runtime</code> 使用相同 JavaScript 实现,准确声明 Promise 和运行时 <code>.default</code> 自引用别名,并提供 <code>Option</code>、<code>Result</code>、<code>Factory</code>、<code>RuntimeFactory</code> 类型。</p><p>1.0.x 的旧 <code>export =</code> 与 1.1.0 的默认导出声明无法同时保持相同类型提取。依赖较早 CommonJS 声明的 TypeScript 代码应迁移到 <code>/runtime</code>;NodeNext ESM 消费者也优先使用此入口,避免根入口保留的历史命名空间形状。合法旧 JavaScript 调用和历史文件入口继续保留。</p><p>浏览器验证覆盖新旧核心的进度条裁剪和清理;完整移动端、插件组合与发布产物验收仍以项目记录为准。</p>`,24)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> installThumbnails</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><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></div></div><p>请求失败或格式错误会拒绝注册,格式错误包含行号。注册完成只说明 VTT 已加载解析并创建控件,不表示所有图片已解码;图片在浏览器显示时加载,图片请求失败不会变成已经完成的注册 Promise 的拒绝。</p><p>插件没有 update、reload 或独立 destroy 方法。切换主视频不会自动重新请求 VTT;切换到另一套视频和缩略图时,可销毁并重建播放器。不要把 <code>controls.remove()</code> 当作完整卸载,也不要用重复安装模拟一个没有提供的更新接口。</p><p>销毁播放器会取消待处理请求(环境支持 AbortController 时),结算取消的注册、移除自己的监听器和计时器,并移除仍由本次安装持有的控件。取消结算仍返回名称对象,因此名称本身不是图片可用的证明。迟到请求不会重新挂载界面。</p><h2 id="typescript-兼容" tabindex="-1">TypeScript 兼容 <a class="header-anchor" href="#typescript-兼容" aria-label="Permalink to "TypeScript 兼容""></a></h2><p>根入口和 <code>/legacy</code> 保留最新已发布 1.1.0 的旧同步返回类型与函数替换形状,实际注册始终是异步的。上面的 <code>/runtime</code> 使用相同 JavaScript 实现,准确声明 Promise 和运行时 <code>.default</code> 自引用别名,并提供 <code>Option</code>、<code>Result</code>、<code>Factory</code>、<code>RuntimeFactory</code> 类型。</p><p>1.0.x 的旧 <code>export =</code> 与 1.1.0 的默认导出声明无法同时保持相同类型提取。依赖较早 CommonJS 声明的 TypeScript 代码应迁移到 <code>/runtime</code>;NodeNext ESM 消费者也优先使用此入口,避免根入口保留的历史命名空间形状。合法旧 JavaScript 调用和历史文件入口继续保留。</p><p>浏览器验证覆盖新旧核心的进度条裁剪和清理;完整移动端、插件组合与发布产物验收仍以项目记录为准。</p>`,25)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",24)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
import{_ as i,o as n,c as e,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const b=JSON.parse('{"title":"VTT 缩略图","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/vtt-thumbnail.md","filePath":"plugin/vtt-thumbnail.md","lastUpdated":1789497001000}'),p={name:"plugin/vtt-thumbnail.md"};function t(r,s,h,k,d,c){return n(),e("div",null,s[0]||(s[0]=[a("",10),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-vtt-thumbnail/index.js"},"▶ Run Code",-1),a("",25)]))}const E=i(p,[["render",t]]);export{b as __pageData,E as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as n,c as t,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/canvas.md","filePath":"proxy/canvas.md","lastUpdated":null}'),p={name:"proxy/canvas.md"};function e(h,s,k,r,E,d){return n(),t("div",null,s[0]||(s[0]=[a("",6),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a("",21)]))}const g=i(p,[["render",e]]);export{c as __pageData,g as default};
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as t,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/canvas.md","filePath":"proxy/canvas.md","lastUpdated":null}'),p={name:"proxy/canvas.md"};function e(h,s,k,r,E,d){return n(),t("div",null,s[0]||(s[0]=[a('<h1 id="canvas-视频代理" tabindex="-1">Canvas 视频代理 <a class="header-anchor" href="#canvas-视频代理" aria-label="Permalink to "Canvas 视频代理""></a></h1><p><a href="./../en/proxy/canvas.html">English</a></p><p>使用真实 video 解码音视频,把画面绘制到 Canvas,并允许逐帧后处理。通过 ArtPlayer 的 proxy 配置安装,不放进 plugins 数组。本页描述未发布分支;Canvas 输出仍受浏览器解码、像素访问及设备能力限制。</p><h2 id="安装与示例" tabindex="-1">安装与示例 <a class="header-anchor" href="#安装与示例" aria-label="Permalink to "安装与示例""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-proxy-canvas</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM 使用 <code>import canvas from 'artplayer-proxy-canvas'</code>。script 加载 <code>dist/artplayer-proxy-canvas.js</code>,全局名为 <code>artplayerProxyCanvas</code>。以下保留<a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas" target="_blank" rel="noreferrer">原始示例</a>:</p>',6),l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-canvas</span></span>
|
||||
import{_ as i,o as n,c as t,ak as a,j as p}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/canvas.md","filePath":"proxy/canvas.md","lastUpdated":1789502800000}'),l={name:"proxy/canvas.md"};function e(h,s,k,r,E,d){return n(),t("div",null,s[0]||(s[0]=[a('<h1 id="canvas-视频代理" tabindex="-1">Canvas 视频代理 <a class="header-anchor" href="#canvas-视频代理" aria-label="Permalink to "Canvas 视频代理""></a></h1><p><a href="./../en/proxy/canvas.html">English</a></p><p>使用真实 video 解码音视频,把画面绘制到 Canvas,并允许逐帧后处理。通过 ArtPlayer 的 proxy 配置安装,不放进 plugins 数组。本页描述未发布分支;Canvas 输出仍受浏览器解码、像素访问及设备能力限制。</p><h2 id="安装与示例" tabindex="-1">安装与示例 <a class="header-anchor" href="#安装与示例" aria-label="Permalink to "安装与示例""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-proxy-canvas</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM 使用 <code>import canvas from 'artplayer-proxy-canvas'</code>。script 加载 <code>dist/artplayer-proxy-canvas.js</code>,全局名为 <code>artplayerProxyCanvas</code>。以下保留<a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas" target="_blank" rel="noreferrer">原始示例</a>:</p>',6),p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-canvas</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerProxyCanvas from 'artplayer-proxy-canvas';</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -44,4 +44,4 @@ import{_ as i,o as n,c as t,ak as a,j as l}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><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;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/movie.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, proxy: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">canvas</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(overlay) });</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> media</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.template.$video </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MediaCanvas</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> play</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;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> media.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">play</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>公开类型为 Option、Result、Factory、Callable、MediaCanvas、RuntimeFactory。MediaCanvas 是显式类型视图,保留 Canvas 同名成员,不增加实际能力或收紧工厂的返回推导。根 NodeNext ESM 的历史命名空间类型仍保留,准确默认调用使用 runtime。JavaScript 根工厂和 <code>.default</code> 指向同一函数;runtime 类型将该别名描述为 readonly。CommonJS 可直接 require,旧 TS 的 <code>import = require</code> 可选择 runtime 入口。</p>`,21)]))}const g=i(p,[["render",e]]);export{c as __pageData,g as default};
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> play</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;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> media.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">play</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>公开类型为 Option、Result、Factory、Callable、MediaCanvas、RuntimeFactory。MediaCanvas 是显式类型视图,保留 Canvas 同名成员,不增加实际能力或收紧工厂的返回推导。根 NodeNext ESM 的历史命名空间类型仍保留,准确默认调用使用 runtime。JavaScript 根工厂和 <code>.default</code> 指向同一函数;runtime 类型将该别名描述为 readonly。CommonJS 可直接 require,旧 TS 的 <code>import = require</code> 可选择 runtime 入口。</p>`,21)]))}const g=i(l,[["render",e]]);export{c as __pageData,g as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as i,o as n,c as t,ak as a,j as p}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Canvas 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/canvas.md","filePath":"proxy/canvas.md","lastUpdated":1789502800000}'),l={name:"proxy/canvas.md"};function e(h,s,k,r,E,d){return n(),t("div",null,s[0]||(s[0]=[a("",6),p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-canvas/index.js"},"▶ Run Code",-1),a("",21)]))}const g=i(l,[["render",e]]);export{c as __pageData,g as default};
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Mediabunny 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/mediabunny.md","filePath":"proxy/mediabunny.md","lastUpdated":null}'),l={name:"proxy/mediabunny.md"};function p(h,s,r,d,k,E){return n(),e("div",null,s[0]||(s[0]=[a('<h1 id="mediabunny-视频代理" tabindex="-1">Mediabunny 视频代理 <a class="header-anchor" href="#mediabunny-视频代理" aria-label="Permalink to "Mediabunny 视频代理""></a></h1><p><a href="./../en/proxy/mediabunny.html">English</a></p><p>通过 Mediabunny 读取媒体,由 Canvas 与音频管线提供 video-like 接口,并支持 HLS 音轨/清晰度选择。安装位置是 ArtPlayer 的 proxy 选项。本页描述未发布分支;它不补齐浏览器缺少的解码器或所有 HTMLVideoElement 能力。</p><h2 id="安装和示例" tabindex="-1">安装和示例 <a class="header-anchor" href="#安装和示例" aria-label="Permalink to "安装和示例""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-proxy-mediabunny</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM 使用 <code>import mediabunny from 'artplayer-proxy-mediabunny'</code>。script 加载 <code>dist/artplayer-proxy-mediabunny.js</code>,全局为 <code>artplayerProxyMediabunny</code>。下面保留<a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny" target="_blank" rel="noreferrer">原始 HLS 示例</a>,其远端流不是离线夹具:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-mediabunny</span></span>
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Mediabunny 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/mediabunny.md","filePath":"proxy/mediabunny.md","lastUpdated":1789502800000}'),l={name:"proxy/mediabunny.md"};function p(h,s,r,d,k,E){return n(),e("div",null,s[0]||(s[0]=[a('<h1 id="mediabunny-视频代理" tabindex="-1">Mediabunny 视频代理 <a class="header-anchor" href="#mediabunny-视频代理" aria-label="Permalink to "Mediabunny 视频代理""></a></h1><p><a href="./../en/proxy/mediabunny.html">English</a></p><p>通过 Mediabunny 读取媒体,由 Canvas 与音频管线提供 video-like 接口,并支持 HLS 音轨/清晰度选择。安装位置是 ArtPlayer 的 proxy 选项。本页描述未发布分支;它不补齐浏览器缺少的解码器或所有 HTMLVideoElement 能力。</p><h2 id="安装和示例" tabindex="-1">安装和示例 <a class="header-anchor" href="#安装和示例" aria-label="Permalink to "安装和示例""></a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-proxy-mediabunny</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>ESM 使用 <code>import mediabunny from 'artplayer-proxy-mediabunny'</code>。script 加载 <code>dist/artplayer-proxy-mediabunny.js</code>,全局为 <code>artplayerProxyMediabunny</code>。下面保留<a href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny" target="_blank" rel="noreferrer">原始 HLS 示例</a>,其远端流不是离线夹具:</p>',6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-proxy-mediabunny</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerProxyMediabunny from 'artplayer-proxy-mediabunny';</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Mediabunny 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/mediabunny.md","filePath":"proxy/mediabunny.md","lastUpdated":1789502800000}'),l={name:"proxy/mediabunny.md"};function p(h,s,r,d,k,E){return n(),e("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a("",29)]))}const y=i(l,[["render",p]]);export{c as __pageData,y as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as n,c as e,ak as a,j as t}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Mediabunny 视频代理","description":"","frontmatter":{},"headers":[],"relativePath":"proxy/mediabunny.md","filePath":"proxy/mediabunny.md","lastUpdated":null}'),l={name:"proxy/mediabunny.md"};function p(h,s,r,d,k,E){return n(),e("div",null,s[0]||(s[0]=[a("",6),t("div",{className:"run-code","data-libs":"./uncompiled/artplayer-proxy-mediabunny/index.js"},"▶ Run Code",-1),a("",29)]))}const y=i(l,[["render",p]]);export{c as __pageData,y as default};
|
||||
Reference in new issue
Block a user