mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-22 05:11:20 -08:00
docs(core): [SITE-04] clarify constructor options and initialization boundaries
This commit is contained in:
1 parent
8d2ec199d7
commit
24011ea266
94 files changed
+5493
-2930
No files matched your search
+1
-1
@@ -1,4 +1,4 @@
|
||||
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ 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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1789516816000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ 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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=l(h,[["render",t]]);export{o as __pageData,y as default};
|
||||
import{_ as l,o as e,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1789516816000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,c){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=l(h,[["render",t]]);export{o as __pageData,y as default};
|
||||
@@ -1 +1 @@
|
||||
import{t as p}from"./chunks/theme.5cmve1kz.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.BHEFJdsm.js";import{R as s,a6 as i,a7 as u,a8 as c,a9 as l,aa as f,ab as d,ac as m,ad as h,ae as g,af as A,d as v,u as y,v as C,s as P,ag as b,ah as w,ai as R,aj as E}from"./chunks/framework.xxfEszSJ.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=D(),a=j();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return A(S)}function D(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
|
||||
+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
@@ -1,4 +1,4 @@
|
||||
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ 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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1789516816000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ 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:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=e(t,[["render",h]]);export{g as __pageData,y as default};
|
||||
import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1789516816000}'),t={name:"en/advanced/event.md"};function h(k,n,r,d,E,c){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",26),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const y=e(t,[["render",h]]);export{g as __pageData,y as default};
|
||||
+27
-4
@@ -1,4 +1,27 @@
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s('<h1 id="basic-options" tabindex="-1">Basic Options <a class="header-anchor" href="#basic-options" aria-label="Permalink to "Basic Options""></a></h1><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-label="Permalink to "`container`""></a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>The <code>DOM</code> container where the player is mounted.</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s(`<h1 id="basic-options" tabindex="-1">Basic Options <a class="header-anchor" href="#basic-options" aria-label="Permalink to "Basic Options""></a></h1><h2 id="construction-contract" tabindex="-1">Construction and option ownership <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "Construction and option ownership {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> is synchronous. It requires a browser and a DIV container, either directly or selected by a CSS selector. The default getter includes '#artplayer', but constructor input must supply container: the input value replaces that default before validation. One active instance owns each container. Without useSSR, mounting replaces its contents; with useSSR, insert the matching Artplayer.html first. This flag does not enable server-side construction or repair incomplete markup.</p><p>Each construction reads a fresh Artplayer.option, merges the input, validates it, then creates the subsystems. Validation failure happens before DOM mounting or proxy invocation. Initialization failures release owned resources and restore the captured container; a successful constructor return does not mean media, subtitles, asynchronous plugins, or external SDKs are ready.</p><p>The second argument is the ready callback, not an option named onReady. A normal function receives the player as both this and its argument. It is registered after constructor plugins and runs from the first successfully handled canplay; it does not await plugin Promises. An empty URL is valid and can be assigned later. The numeric art.id is separate from option.id, which is the optional playback-memory key.</p><h3 id="option-merge" tabindex="-1">Merge and validation <a class="header-anchor" href="#option-merge" aria-label="Permalink to "Merge and validation {#option-merge}""></a></h3><ul><li>Artplayer.option returns fresh nested defaults on every access; modifying one returned object does not set global defaults. lang reads the current navigator.language in lowercase; moreVideoAttr.preload uses the module's Safari detection. In non-browser inspection lang may be undefined, but construction still requires a browser.</li><li>Merging creates a new top-level object and recursively merges objects present on both sides. Arrays use the existing concat/spread rule, so the array itself is new but its ordinary object items retain identity. Function and Element references are retained; this is not a complete deep clone. Components may later add metadata to shared item objects.</li><li>Own enumerable extension fields survive without schema validation. Inherited fields are generally omitted, except container is read explicitly from the input again. Accessor properties can therefore run more than once. An explicit undefined can replace a required default and cause a validation error; omission and undefined are not interchangeable.</li><li>Artplayer.scheme is a shared mutable schema. Artplayer.validator(value, scheme) validates an already supplied value, returns that same value on success, and throws at the first invalid known field. It neither merges defaults nor mounts a player. Artplayer.kindOf is the validator's type classifier, not a media-capability test. Runtime types also expose the validator's optional diagnostic path argument.</li><li>art.option is the resolved live object, not a reactive configuration API. Some handlers read it later, while other settings are captured or build UI only during initialization. Change playback through the documented setters and UI through the component managers; assigning a new option field does not automatically rebuild everything.</li></ul><h3 id="option-precedence" tabindex="-1">Initial media values and precedence <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "Initial media values and precedence {#option-precedence}""></a></h3><p>moreVideoAttr is copied through art.attr as media <strong>properties</strong>, not setAttribute calls. A value of undefined follows attr's getter behavior and does not write. The core then applies truthy muted, volume, poster, autoplay, playsInline and theme settings, CSS variables, and the URL. Do not depend on object-key order to override these later steps.</p><p>The historical volume initialization only assigns a truthy option.volume, clamped to [0,1]; volume:0 therefore skips that assignment. A numeric saved storage volume is applied afterward and overrides it. For explicit initial silence, use muted:true; set art.
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> LegacyInput } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput, ProxyHost } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<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;"> input</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LegacyInput</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#legacy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, controls: [{ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'count'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, html: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'left'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }] };</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LegacyArtplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(input);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OptionInput</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> proxy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ProxyHost</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;"> same</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> same;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'video'</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;"> plugins: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</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;"> pending</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pending;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'example'</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>
|
||||
<span class="line"><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;">(options, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</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;"> same</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> same;</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></div></div><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-label="Permalink to "\`container\`""></a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>The <code>DOM</code> container where the player is mounted.</p>`,24),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line highlighted"><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:#6A737D;--shiki-dark:#6A737D;"> // container: document.querySelector('.artplayer-app'),</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>
|
||||
@@ -283,7 +306,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 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 highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [myPlugin],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="thumbnails" tabindex="-1"><code>thumbnails</code> <a class="header-anchor" href="#thumbnails" aria-label="Permalink to "\`thumbnails\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>Set <code>Preview Thumbnails</code> on the progress bar.</p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>Thumbnail image URL</td></tr><tr><td><code>number</code></td><td><code>Number</code></td><td>Number of thumbnails</td></tr><tr><td><code>column</code></td><td><code>Number</code></td><td>Number of thumbnail columns</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>Thumbnail width</td></tr><tr><td><code>height</code></td><td><code>Number</code></td><td>Thumbnail height</td></tr><tr><td><code>scale</code></td><td><code>Number</code></td><td>Thumbnail scale</td></tr></tbody></table>`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="thumbnails" tabindex="-1"><code>thumbnails</code> <a class="header-anchor" href="#thumbnails" aria-label="Permalink to "\`thumbnails\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{ url: '', number: 60, column: 10, width: 0, height: 0, scale: 1 }</code></li></ul><p>Set <code>Preview Thumbnails</code> on the progress bar.</p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>Thumbnail image URL</td></tr><tr><td><code>number</code></td><td><code>Number</code></td><td>Number of thumbnails</td></tr><tr><td><code>column</code></td><td><code>Number</code></td><td>Number of thumbnail columns</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>Thumbnail width</td></tr><tr><td><code>height</code></td><td><code>Number</code></td><td>Thumbnail height</td></tr><tr><td><code>scale</code></td><td><code>Number</code></td><td>Thumbnail scale</td></tr></tbody></table>`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thumbnails: {</span></span>
|
||||
@@ -291,7 +314,7 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><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></div></div><div class="warning custom-block"><p class="custom-block-title">Generate Thumbnails Online</p><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail" target="_blank" rel="noreferrer">artplayer-tool-thumbnail</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>Set video subtitles. Supported subtitle formats: <code>vtt</code>, <code>srt</code>, <code>ass</code>.</p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>String</code></td><td>Subtitle name</td></tr><tr><td><code>url</code></td><td><code>String</code></td><td>Subtitle URL</td></tr><tr><td><code>type</code></td><td><code>String</code></td><td>Subtitle type, options: <code>vtt</code>, <code>srt</code>, <code>ass</code></td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>Subtitle style</td></tr><tr><td><code>encoding</code></td><td><code>String</code></td><td>Subtitle encoding, default <code>utf-8</code></td></tr><tr><td><code>escape</code></td><td><code>Boolean</code></td><td>Whether to escape <code>html</code> tags, default <code>true</code></td></tr><tr><td><code>onVttLoad</code></td><td><code>Function</code></td><td>Function for modifying <code>vtt</code> text</td></tr></tbody></table>`,6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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></div></div><div class="warning custom-block"><p class="custom-block-title">Generate Thumbnails Online</p><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail" target="_blank" rel="noreferrer">artplayer-tool-thumbnail</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{ url: '', type: '', name: '', style: {}, escape: true, encoding: 'utf-8', onVttLoad: vtt => vtt }</code></li></ul><p>Set video subtitles. Supported subtitle formats: <code>vtt</code>, <code>srt</code>, <code>ass</code>.</p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>String</code></td><td>Subtitle name</td></tr><tr><td><code>url</code></td><td><code>String</code></td><td>Subtitle URL</td></tr><tr><td><code>type</code></td><td><code>String</code></td><td>Subtitle type, options: <code>vtt</code>, <code>srt</code>, <code>ass</code></td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>Subtitle style</td></tr><tr><td><code>encoding</code></td><td><code>String</code></td><td>Subtitle encoding, default <code>utf-8</code></td></tr><tr><td><code>escape</code></td><td><code>Boolean</code></td><td>Whether to escape <code>html</code> tags, default <code>true</code></td></tr><tr><td><code>onVttLoad</code></td><td><code>Function</code></td><td>Function for modifying <code>vtt</code> text</td></tr></tbody></table>`,6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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 highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> subtitle: {</span></span>
|
||||
@@ -389,4 +412,4 @@ import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 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 highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> proxy</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;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'video'</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></div></div>`,1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,1)]))}const g=n(t,[["render",p]]);export{o as __pageData,g as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),t={name:"en/start/option.md"};function p(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(t,[["render",p]]);export{o as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
|
||||
+26
-3
@@ -1,4 +1,27 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s('<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-label="Permalink to "基础选项""></a></h1><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-label="Permalink to "`container`""></a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>播放器挂载的 <code>DOM</code> 容器</p>',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s(`<h1 id="基础选项" tabindex="-1">基础选项 <a class="header-anchor" href="#基础选项" aria-label="Permalink to "基础选项""></a></h1><h2 id="construction-contract" tabindex="-1">构造与配置归属 <a class="header-anchor" href="#construction-contract" aria-label="Permalink to "构造与配置归属 {#construction-contract}""></a></h2><p><code>new Artplayer(option, readyCallback?)</code> 同步构造实例,需要浏览器和 DIV 容器,可以传节点或 CSS 选择器。默认值里虽然有 '#artplayer',构造输入仍必须提供 container:校验前会用输入值覆盖该默认值。同一容器同时只能归属一个活跃实例。未开启 useSSR 时会替换容器内容;开启后须提前放入版本匹配的 Artplayer.html,它不会启用服务端构造,也不会修补缺失的模板。</p><p>每次构造读取一份新的 Artplayer.option,合并输入、校验后再创建子系统。配置校验失败发生在挂载 DOM 和调用 proxy 之前。初始化失败会释放已归属的资源并恢复捕获的容器内容;构造器成功返回不代表媒体、字幕、异步插件或外部 SDK 已就绪。</p><p>第二参数才是 ready 回调,不是名为 onReady 的配置项。普通函数的 this 和第一个参数都是播放器实例。该回调在构造插件之后注册,由首次成功处理的 canplay 触发,不等待插件 Promise。允许空 URL,之后再赋值。数字 art.id 与 option.id 不同,后者是可选的播放记忆键。</p><h3 id="option-merge" tabindex="-1">合并与校验 <a class="header-anchor" href="#option-merge" aria-label="Permalink to "合并与校验 {#option-merge}""></a></h3><ul><li>每次读取 Artplayer.option 都得到独立的嵌套默认配置,修改返回对象不会设置全局默认值。lang 读取当前 navigator.language 并转为小写;moreVideoAttr.preload 使用模块加载时的 Safari 判断。非浏览器读取时 lang 可能为 undefined,但构造仍要求浏览器。</li><li>合并创建新的顶层对象,两边都存在的对象递归合并;数组沿用 concat/spread 规则,因此数组本身是新的,普通对象成员仍保留身份。函数和 Element 保留引用,这不是完整深拷贝。组件之后可能给共享的条目对象添加元信息。</li><li>自有可枚举的扩展字段保留,不受 schema 校验。继承字段通常不参与,container 则会再次从输入显式读取,因此 getter 可能执行多次。显式 undefined 可以覆盖必填默认值并导致校验失败,不能当作省略字段。</li><li>Artplayer.scheme 是共享且可修改的校验规则。Artplayer.validator(value, scheme) 校验传入值,成功返回原对象,遇到第一个非法已知字段即抛错;不合并默认值,也不挂载播放器。Artplayer.kindOf 是校验器的类型分类函数,不是媒体能力检测。runtime 类型还提供校验器用于错误路径的可选第三参数。</li><li>art.option 是合并后的实际对象,不是响应式配置入口。一些回调之后仍会读取它,另一些值只在初始化时捕获或创建 UI。播放行为使用对应 setter,UI 使用组件管理器;给配置字段赋新值不会自动重建全部功能。</li></ul><h3 id="option-precedence" tabindex="-1">初始媒体值与优先级 <a class="header-anchor" href="#option-precedence" aria-label="Permalink to "初始媒体值与优先级 {#option-precedence}""></a></h3><p>moreVideoAttr 通过 art.attr 写入媒体的<strong>属性</strong>,不是调用 setAttribute。值为 undefined 时沿用 attr 的读取分支,不执行写入。之后核心应用真值 muted、volume、poster、autoplay、playsInline 和 theme,再写 CSS 变量及 URL。不能依靠 moreVideoAttr 的字段顺序覆盖后续步骤。</p><p>历史音量初始化只写入真值 option.volume 并钳制到 [0,1],因此 volume:0 会跳过这一步;随后读取的数字 storage 音量还会覆盖配置值。要求初始静音时使用 muted:true,需要覆盖记忆音量时在构造后设置 art.volume。autoplay/muted/playsInline 的 false 不会撤销 moreVideoAttr 已写入的属性。自动播放及行内播放仍受浏览器策略限制。</p><p>非空 theme 会先把 '--art-theme' 写入合并后的 cssVar,再应用样式,因此优先于冲突的初始 cssVar 值。poster 使用播放器的背景层。loop 由 ended 回调执行 seek=0 和 play,区别于通过 moreVideoAttr 设置原生 video.loop。</p><h3 id="option-capabilities" tabindex="-1">UI、平台与内
Line truncated
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> LegacyInput } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { OptionInput, ProxyHost } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/runtime'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<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;"> input</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LegacyInput</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#legacy'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, controls: [{ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'count'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, html: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'left'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }] };</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LegacyArtplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(input);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OptionInput</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#player'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> proxy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ProxyHost</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;"> same</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> same;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'video'</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;"> plugins: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</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;"> pending</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pending;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'example'</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>
|
||||
<span class="line"><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;">(options, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</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;"> same</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> same;</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></div></div><h2 id="container" tabindex="-1"><code>container</code> <a class="header-anchor" href="#container" aria-label="Permalink to "\`container\`""></a></h2><ul><li>Type: <code>String, Element</code></li><li>Default: <code>#artplayer</code></li></ul><p>播放器挂载的 <code>DOM</code> 容器</p>`,24),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line highlighted"><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:#6A737D;--shiki-dark:#6A737D;"> // container: document.querySelector('.artplayer-app'),</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>
|
||||
@@ -283,7 +306,7 @@ import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 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 highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [myPlugin],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="thumbnails" tabindex="-1"><code>thumbnails</code> <a class="header-anchor" href="#thumbnails" aria-label="Permalink to "\`thumbnails\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>在进度条上设置 <code>预览图</code></p><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>预览图地址</td></tr><tr><td><code>number</code></td><td><code>Number</code></td><td>预览图数量</td></tr><tr><td><code>column</code></td><td><code>Number</code></td><td>预览图列数</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>预览图宽度</td></tr><tr><td><code>height</code></td><td><code>Number</code></td><td>预览图高度</td></tr><tr><td><code>scale</code></td><td><code>Number</code></td><td>预览图缩放</td></tr></tbody></table>`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="thumbnails" tabindex="-1"><code>thumbnails</code> <a class="header-anchor" href="#thumbnails" aria-label="Permalink to "\`thumbnails\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{ url: '', number: 60, column: 10, width: 0, height: 0, scale: 1 }</code></li></ul><p>在进度条上设置 <code>预览图</code></p><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>String</code></td><td>预览图地址</td></tr><tr><td><code>number</code></td><td><code>Number</code></td><td>预览图数量</td></tr><tr><td><code>column</code></td><td><code>Number</code></td><td>预览图列数</td></tr><tr><td><code>width</code></td><td><code>Number</code></td><td>预览图宽度</td></tr><tr><td><code>height</code></td><td><code>Number</code></td><td>预览图高度</td></tr><tr><td><code>scale</code></td><td><code>Number</code></td><td>预览图缩放</td></tr></tbody></table>`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thumbnails: {</span></span>
|
||||
@@ -291,7 +314,7 @@ import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line highlighted"><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></div></div><div class="warning custom-block"><p class="custom-block-title">在线生成预览图</p><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail" target="_blank" rel="noreferrer">artplayer-tool-thumbnail</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{}</code></li></ul><p>设置视频的字幕,支持字幕格式:<code>vtt</code>, <code>srt</code>, <code>ass</code></p><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>String</code></td><td>字幕名字</td></tr><tr><td><code>url</code></td><td><code>String</code></td><td>字幕地址</td></tr><tr><td><code>type</code></td><td><code>String</code></td><td>字幕类型,可选 <code>vtt</code>, <code>srt</code>, <code>ass</code></td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>字幕样式</td></tr><tr><td><code>encoding</code></td><td><code>String</code></td><td>字幕编码,默认 <code>utf-8</code></td></tr><tr><td><code>escape</code></td><td><code>Boolean</code></td><td>是否转义 <code>html</code> 标签,默认为 <code>true</code></td></tr><tr><td><code>onVttLoad</code></td><td><code>Function</code></td><td>用于修改 <code>vtt</code> 文本的函数</td></tr></tbody></table>`,6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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></div></div><div class="warning custom-block"><p class="custom-block-title">在线生成预览图</p><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail" target="_blank" rel="noreferrer">artplayer-tool-thumbnail</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-label="Permalink to "\`subtitle\`""></a></h2><ul><li>Type: <code>Object</code></li><li>Default: <code>{ url: '', type: '', name: '', style: {}, escape: true, encoding: 'utf-8', onVttLoad: vtt => vtt }</code></li></ul><p>设置视频的字幕,支持字幕格式:<code>vtt</code>, <code>srt</code>, <code>ass</code></p><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>String</code></td><td>字幕名字</td></tr><tr><td><code>url</code></td><td><code>String</code></td><td>字幕地址</td></tr><tr><td><code>type</code></td><td><code>String</code></td><td>字幕类型,可选 <code>vtt</code>, <code>srt</code>, <code>ass</code></td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>字幕样式</td></tr><tr><td><code>encoding</code></td><td><code>String</code></td><td>字幕编码,默认 <code>utf-8</code></td></tr><tr><td><code>escape</code></td><td><code>Boolean</code></td><td>是否转义 <code>html</code> 标签,默认为 <code>true</code></td></tr><tr><td><code>onVttLoad</code></td><td><code>Function</code></td><td>用于修改 <code>vtt</code> 文本的函数</td></tr></tbody></table>`,6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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 highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> subtitle: {</span></span>
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",24),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
|
||||
Reference in new issue
Block a user