skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

video-player

Provide React components for building interactive MUX video players.

3|Updated Feb 14, 2026
Search Tags:#ui#react#components#video#player#mux
One-click install
npx skills add https://github.com/mattwoodco/skills --skill video-player-mattwoodco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-player
Source: https://github.com/mattwoodco/skills/tree/main/skills/video-player
Command: npx skills add https://github.com/mattwoodco/skills --skill video-player-mattwoodco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mux/mux-player-react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of React components to build rich, interactive video player experiences, simplifying the integration of advanced features like chapter navigation, caption controls, and thumbnail previews.

Core Features & Use Cases

  • Responsive MUX Player: Integrates the MUX Player React component for seamless video playback.
  • Chapter Navigation: Allows users to jump to specific points in the video via a sidebar.
  • Caption Controls: Enables users to toggle captions and select languages.
  • Thumbnail Previews: Displays video thumbnails on hover over the timeline.
  • Video Cards: Creates visually appealing cards for displaying video lists.
  • Use Case: Integrate a video tutorial with chapter markers and interactive elements into your documentation site.

Quick Start

Add a responsive MUX video player with the playback ID 'my-playback-id'.

Frequently Asked Questions about video-player

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add chapter navigation to a React video player?▼

This Skill provides React components to add chapter navigation to a MUX video player, allowing users to jump to specific points in the video via a sidebar.

Can I display thumbnail previews on the video timeline using React?▼

Yes, this Skill provides React components that display video thumbnails directly on the timeline when users hover over the MUX player.

What is the best way to build interactive video cards for a media list in React?▼

The best way to build interactive video cards in React is using this Skill's dedicated components, which create visually appealing displays for video lists integrated with MUX playback.

Do I need a MUX account to use these React video player components?▼

Yes, you need MUX integration for video hosting and playback. This Skill uses the @mux/mux-player-react dependency to render interactive video experiences.

How do I toggle captions and select languages in a React video player?▼

You can toggle captions and select languages using this Skill's caption control components, which integrate directly with the MUX player to enable caption visibility and language selection.

Related Skills

Explore More Design & Creative Skills→
muxincmuxinc
2

mux-video

Provide guidance for building video applications with Mux streaming and player integrations.

Official
Advanced
shelbyshelby
45

shelby-media

Build and transcode media with Shelby Protocol for HLS, DASH, and Widevine DRM.

Official
Intermediate
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
whyiloveher2411whyiloveher2411

hyperframes-core

Create HTML compositions with video, animation, and interactive elements using data attributes and timelines.

Community
Advanced