Kanton Luzern Styleguide

Mediaplayer (Mirror)

1 — Video, mp4, kein HLS (verbatim von gustaf.lu.ch)

2 — Zweiter Video-Player (konstruiert: stopOthers(), data-start, data-loop, data-hidecontrols, Speed, Transkript, Captions)

Deckt die fünf data-*-Attribute und die drei Controls ab, die der Live-Portlet-Output nicht rendert. Nicht gegen Live verifiziert — siehe Kommentar im Partial.

Transkript-Panel. mediaplayer.js togglet hier .klu-mediaplayer-transcript--open.

3 — Video mit data-hls="true" (konstruiert: einziger Pfad, der hls.js lädt)

Auf keiner der 168 am 2026-08-25 gecrawlten Live-Seiten kommt data-hls="true" vor — dieser Player ist daher konstruiert. Er ist der einzige Pfad, der hls.js überhaupt braucht, und damit die Messstelle für das Lazy-Loading in §3.1.

Der Stream ist eine echte, lokale HLS-VOD-Playlist (/mock/media/mediaplayer-stream.m3u8 plus ein fMP4-Segment) und spielt tatsächlich ab — der HLS-Zweig ist damit nicht nur angetriggert, sondern verifiziert. fMP4 statt MPEG-TS, weil eine .ts-Datei im Repo von tsc als TypeScript gelesen wird und den Build bricht.

4 — Audio-Player (konstruiert: kein Live-Beispiel gefunden)

Für .audio-player liest mediaplayer.js die Controls direkt vom Player-Element, nicht aus .video-player__controls.

Achtung: data-src wird ausschliesslich im HLS-Zweig ausgewertet (mediaplayer.js:148). Ohne data-hls="true" muss das Element ein echtes src-Attribut tragen, sonst lädt nichts und die Dauer bleibt 0:00. Der Live-Portlet-Output setzt darum beides.

5 — Links im Mediaplayer-Kontext

Die Download-Links oben tragen Dateitypen und decken die Link-Icon-Darstellung im Mediaplayer-Kontext ab.