Is TailwindCSS 4 mandatory for using this skill?

Yes, the Shelby player components are built to work specifically with TailwindCSS 4 for default styles, layout management, and shadcn-style customization.

Can I create a completely custom UI for the video player?

Absolutely. While it includes a simple player, it also provides primitive components like VideoOutlet, PlayButton, and TimeSlider so you can build bespoke layouts.

Does this skill support both HLS and DASH formats?

Yes, the Shelby Media Player uses Shaka Player as its core engine, which provides robust support for both HLS (.m3u8) and DASH (.mpd) adaptive streaming formats.

How does it connect to Shelby decentralized storage?

The skill provides patterns for constructing API URLs that point to Shelby network blobs, allowing you to stream content directly from decentralized storage nodes.

Shelby Protocol Video Player

Name: Shelby Protocol Video Player
Author: zacharyr0th

byzacharyr0th

•

Gestión de Contenido

Integrates high-performance, decentralized video streaming into React applications using the Shelby Protocol and Shaka Player.

Acerca de

This skill empowers developers to implement professional-grade video streaming experiences by leveraging the Shelby Protocol's decentralized storage and Shaka Player's adaptive streaming capabilities. It provides comprehensive guidance on configuring HLS and DASH players, setting up TailwindCSS 4 styles, and building custom player UI components using a specialized React wrapper. Whether you are building a simple video landing page or a complex media gallery powered by decentralized storage, this skill handles the technical nuances of player initialization, event handling, and optimized media delivery.

Características Principales

Automated setup for @shelby-protocol/player and TailwindCSS 4 styling requirements
Advanced Shaka Player instance configuration for buffering and event management
Rapid implementation of SimpleShakaVideoPlayer for HLS and DASH streaming
1 GitHub stars
Seamless integration with Shelby decentralized storage blob URL patterns
Custom player UI construction using primitive components and the usePlayer hook

Casos de Uso

Implementing custom branded video player controls in a React-based media dashboard
Building a decentralized video-on-demand platform using Shelby Protocol storage
Optimizing web applications for adaptive bitrate streaming with HLS/DASH formats

Acerca de

Características Principales

Automated setup for @shelby-protocol/player and TailwindCSS 4 styling requirements
Advanced Shaka Player instance configuration for buffering and event management
Rapid implementation of SimpleShakaVideoPlayer for HLS and DASH streaming
1 GitHub stars
Seamless integration with Shelby decentralized storage blob URL patterns
Custom player UI construction using primitive components and the usePlayer hook

Casos de Uso

Implementing custom branded video player controls in a React-based media dashboard
Building a decentralized video-on-demand platform using Shelby Protocol storage
Optimizing web applications for adaptive bitrate streaming with HLS/DASH formats