Media Player
Overview
Understanding the Shelby Media Player architecture
Architecture
The Shelby Media Player is built on top of two powerful underlying dependencies: media-chrome for state management and Shaka Player for adaptive streaming and DRM support.
Core Dependencies
media-chrome
media-chrome is a powerful media player framework that provides:
- Media Store: A centralized state management system for media playback
- React Hooks:
useMediaSelector,useMediaDispatch,useMediaRef, etc.
The Shelby Media Player uses the React bindings provided by media-chrome/react/media-store:
- Manage playback state (play/pause, current time, duration, etc.)
- Handle user interactions (play/pause, seeking, volume control)
- Provide hooks for accessing media state in custom components
media-chrome React Documentation
Learn how to use media-chrome's React hooks and components
media-chrome GitHub
View the source code and contribute to media-chrome
Shaka Player
Shaka Player is a JavaScript library for adaptive media streaming that provides:
- HLS Support: Full support for HTTP Live Streaming (HLS) manifests
- DASH Support: Dynamic Adaptive Streaming over HTTP (DASH) support
- DRM Support: Widevine, PlayReady, FairPlay, and Clear Key DRM
- Adaptive Bitrate: Automatic quality selection based on network conditions
The Shelby Media Player uses Shaka Player via shaka-video-element, which provides a custom element wrapper that integrates Shaka Player with HTML5 video elements.