Aŭdvidaĵaj Ludiloj

Xingluo integras APlayer (aŭdio) kaj DPlayer (video), subtenante du manierojn krei ludilojn en Markdown kaj MDX, ĉiuj malŝarĝitaj.

Aktivigo

Ŝaltu ĉiun ludilon laŭbezone en features.players en xingluo.config.ts:

ts
features: {
  players: {
    aplayer: true,  // Aktivigi APlayer aŭdio-ludilon
    dplayer: true,  // Aktivigi DPlayer video-ludilon
  },
}

La du estas sendependaj. Kiam malŝaltitaj:

• La kromprogramo remarkPlayers ne estas injektita (MD-bariloj ne estas analizitaj)
• La klienta skripto de ludilo ne estas ŝarĝita
• La konstrutaj rezultoj ne havas aplayer / dplayer blokojn

Du uzo-reĝimoj

Ambaŭ reĝimoj finfine produktas la saman lokokupilan div-strukturon (<div class="xng-aplayer|xng-dplayer" data-config>), malŝarĝitan kaj realigitan de src/scripts/players.ts.

APlayer Aŭdio-Ludilo

MD Barilo

markdown
```aplayer
{
  "audio": [
    {
      "name": "Song",
      "artist": "Artist",
      "url": "/audio/song.mp3",
      "cover": "/images/cover.jpg",
      "lrc": "[00:00.00] First lyric line"
    }
  ],
  "theme": "#b7daff",
  "loop": "all",
  "autoplay": false
}
```

MDX Komponanto

mdx
import { APlayer } from "@/components/mdx";

<APlayer
  audio={[
    {
      name: "Kanto",
      artist: "Artisto",
      url: "/audio/song.mp3",
      cover: "/images/cover.jpg",
    },
  ]}
  theme="#b7daff"
  loop="all"
/>

Opcioj

audio-Objekto

DPlayer Video-Ludilo

MD Barilo

markdown
```dplayer
{
  "video": {
    "url": "/videos/demo.mp4",
    "pic": "/images/video-cover.jpg",
    "type": "auto"
  },
  "theme": "#b7daff",
  "autoplay": false,
  "loop": false
}
```

MDX Komponanto

mdx
import { DPlayer } from "@/components/mdx";

<DPlayer
  video={{ url: "/videos/demo.mp4", pic: "/images/video-cover.jpg" }}
  theme="#b7daff"
  subtitle={{ url: "/subtitles.vtt", type: "webvtt" }}
/>

Opcioj

video-Objekto

subtitle-Objekto

danmaku-Objekto

Pigra Ŝarĝa Mekanismo

Ludiloj estas pigre ŝarĝitaj per IntersectionObserver: la lokokupila div dinamike importas la ludilan modulon kaj stilojn kaj realiĝas nur kiam ene de 200px de la viewport.

• APlayer: dinamika import("aplayer") + import("aplayer/dist/APlayer.min.css")
• DPlayer: dinamika import("dplayer") (stiloj estas enliniaj en JS; neniu aparta CSS necesas)

Modula ŝarĝado uzas komunan Promise-kaŝmemoron por eviti ripetajn dinamikajn importojn. Re-realigo estas malhelpita per dataset markiloj (xng-init, xng-observed).

View Transitions Adaptado

La ludila skripto aŭskultas astro:page-load kaj reskanas lokokupilajn divojn post ĉiu paĝa ŝarĝo. Post View Transitions paĝa ŝanĝo, la ludilaj lokokupiloj de la nova paĝo estas re-observitaj kaj pigre ŝarĝitaj.

Rendimiento

• Nula pakaĵo kiam ludiloj estas malŝaltitaj (remark kromprogramo ne injektita, klienta skripto ne ŝarĝita)
• Nula rultempo kiam ebligitaj sed neniuj ludiloj sur paĝo (skripto ŝarĝiĝas sed ne realiĝas)
• Ludilaj moduloj estas memstaraj blokoj, ŝarĝitaj laŭ-petante nur sur paĝoj kiuj uzas ilin
• CSS kaj JS estas importitaj aparte por certigi ke stiloj estas pretaj antaŭ realigo

Tipaj Deklaroj

APlayer kaj DPlayer ne havas oficialajn TypeScript-tipojn; Xingluo provizas malstriktajn modulajn deklarojn en src/types/aplayer.d.ts kaj src/types/dplayer.d.ts, kun opciaj kampoj por disvastiga kongrueco. MDX-komponantaj Props havas plenajn tipajn limigojn.