From ccds-media
Client-side video / audio playback — ABR heuristics, player SDKs (Shaka, dash.js, ExoPlayer, AVPlayer), buffering / startup / rebuffer tuning. Auto-invoked when debugging QoE issues, implementing a player UI, or optimizing startup time.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccds-media:media-playerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
QoE is felt in seconds and fractions of seconds — time-to-first-frame, rebuffer
QoE is felt in seconds and fractions of seconds — time-to-first-frame, rebuffer rate, bitrate stability are the metrics viewers vote with. Everything between "user hits play" and "video plays smoothly" is a deliberate decision, not SDK defaults.
| Platform | SDK | Notes |
|---|---|---|
| Web (Chrome/Firefox/Edge) | Shaka Player or hls.js / dash.js | Shaka covers HLS+DASH+EME in one |
| Safari / iOS / tvOS | AVPlayer (native HLS) | MSE limited; FairPlay only via native |
| Android / Android TV / Fire TV | ExoPlayer (Media3) | per-vendor MediaCodec quirks; keep a device lab |
| Smart TVs (Tizen, webOS) | Shaka on the TV browser engine | old Chromium forks — pin SDK version floors |
ABR knobs that matter most: target buffer (live: small, e.g. 2–3 segments; VOD: 30 s+), upswitch confidence (sustained throughput, not one fast segment), and the panic-down threshold (switch immediately when buffer falls below ~1 segment).
Related: media-transcode (ladder the ABR chooses from), media-drm-cdn (license
latency in startup, per-CDN QoE), media-live (low-latency playback),
media-ad-insertion (break transitions) · domain agent: media-architect ·
output/ADR format: playbook-conventions
npx claudepluginhub ggrace519/claude-code-dev-studio --plugin ccds-mediaProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.