How sampotts/plyr works
Plyr is a browser-side accessible media player for HTML5 audio/video and YouTube/Vimeo embeds. Its main workflow is that an integrator initializes a player on media markup, then uses the unified controls and API to play, seek, change settings, and receive standardized events. The map also preserves documented capabilities such as captions, fullscreen, ads, and preview thumbnails. The tree and excerpts establish the entry point, plugin files, and some feature behavior; wiring among unsampled modules is shown only where supported by the documented workflow.
Main entry points: plyr.js Player API · source.js Source Handling · ui.js Player UI · html5.js HTML5 Playback
Components 23
Player Core
- Player API
src/js/plyr.js - Configuration
src/js/config/defaults.js - Source Handling
src/js/source.js - Media State
src/js/media.js - Listeners & Events
src/js/listeners.js - Preferences
src/js/storage.js - DOM & Browser Utilities
src/js/utils/elements.js
Media Providers
- HTML5 Playback
src/js/html5.js - YouTube Adapter
src/js/plugins/youtube.js - Vimeo Adapter
src/js/plugins/vimeo.js
Playback Experience
- Player UI
src/js/ui.js - Controls & Menus
src/js/controls.js - Captions
src/js/captions.js - Fullscreen
src/js/fullscreen.js - Browser Support
src/js/support.js
Optional Extensions
- Ad Playback
src/js/plugins/ads.js - Preview Thumbnails
src/js/plugins/preview-thumbnails.js - Streaming Integrations
Other components
- Integrator
- Browser Media
- YouTube
- Vimeo
- Google IMA
Connections 22
- Integrator → Player API: initializes
- Integrator → Browser Media: provides markup
- Player API → Configuration: uses defaults
- Player API → Source Handling: handles sources
- Source Handling → HTML5 Playback: selects provider
- Source Handling → YouTube Adapter: selects provider
- Source Handling → Vimeo Adapter: selects provider
- HTML5 Playback → Browser Media: controls media
- YouTube Adapter → YouTube: uses API
- Vimeo Adapter → Vimeo: uses API
- Player API → Player UI: sets up interface
- Player UI → Controls & Menus: renders controls
- Controls & Menus → Captions: offers captions
- Player API → Fullscreen: supports fullscreen
- Player API → Listeners & Events: standardizes events
- Player API → Preferences: stores preferences
- Player API → Browser Support: checks capabilities
- Player UI → DOM & Browser Utilities: builds elements
- Player API → Ad Playback: enables monetization
- Ad Playback → Google IMA: loads SDK
- Player API → Preview Thumbnails: enables previews
- Streaming Integrations → HTML5 Playback: supplies playback