# sampotts/plyr architecture

> Architecture diagram of the GitHub repository sampotts/plyr, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sampotts/plyr
- Repository: https://github.com/sampotts/plyr

## Overview

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: [`src/js/plyr.js`](https://github.com/sampotts/plyr/blob/master/src/js/plyr.js) (Player API), [`src/js/source.js`](https://github.com/sampotts/plyr/blob/master/src/js/source.js) (Source Handling), [`src/js/ui.js`](https://github.com/sampotts/plyr/blob/master/src/js/ui.js) (Player UI), [`src/js/html5.js`](https://github.com/sampotts/plyr/blob/master/src/js/html5.js) (HTML5 Playback)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Player Core"]
  node_plyr["Player API<br/>[plyr.js]"]
  node_config["Configuration<br/>[defaults.js]"]
  node_source["Source Handling<br/>[source.js]"]
  node_media["Media State<br/>[media.js]"]
  node_events["Listeners &amp; Events<br/>[listeners.js]"]
  node_storage[("Preferences<br/>[storage.js]")]
  node_utils["DOM &amp; Browser Utilities<br/>[elements.js]"]
end

subgraph group_providers["Media Providers"]
  node_html5["HTML5 Playback<br/>[html5.js]"]
  node_youtube["YouTube Adapter<br/>[youtube.js]"]
  node_vimeo["Vimeo Adapter<br/>[vimeo.js]"]
end

subgraph group_experience["Playback Experience"]
  node_ui["Player UI<br/>[ui.js]"]
  node_controls["Controls &amp; Menus<br/>[controls.js]"]
  node_captions["Captions<br/>[captions.js]"]
  node_fullscreen["Fullscreen<br/>[fullscreen.js]"]
  node_support["Browser Support<br/>[support.js]"]
end

subgraph group_extensions["Optional Extensions"]
  node_ads["Ad Playback<br/>[ads.js]"]
  node_thumbnails["Preview Thumbnails"]
  node_streaming["Streaming Integrations"]
end

node_integrator(("Integrator"))
node_media_element["Browser Media"]
node_youtube_service["YouTube"]
node_vimeo_service["Vimeo"]
node_ima["Google IMA"]

node_integrator -->|"initializes"| node_plyr
node_integrator -->|"provides markup"| node_media_element
node_plyr -->|"uses defaults"| node_config
node_plyr -->|"handles sources"| node_source
node_source -->|"selects provider"| node_html5
node_source -->|"selects provider"| node_youtube
node_source -->|"selects provider"| node_vimeo
node_html5 -->|"controls media"| node_media_element
node_youtube -->|"uses API"| node_youtube_service
node_vimeo -->|"uses API"| node_vimeo_service
node_plyr -->|"sets up interface"| node_ui
node_ui -->|"renders controls"| node_controls
node_controls -->|"offers captions"| node_captions
node_plyr -->|"supports fullscreen"| node_fullscreen
node_plyr -->|"standardizes events"| node_events
node_plyr -->|"stores preferences"| node_storage
node_plyr -->|"checks capabilities"| node_support
node_ui -->|"builds elements"| node_utils
node_plyr -.->|"enables monetization"| node_ads
node_ads -.->|"loads SDK"| node_ima
node_plyr -.->|"enables previews"| node_thumbnails
node_streaming -.->|"supplies playback"| node_html5

click node_plyr "https://github.com/sampotts/plyr/blob/master/src/js/plyr.js"
click node_config "https://github.com/sampotts/plyr/blob/master/src/js/config/defaults.js"
click node_source "https://github.com/sampotts/plyr/blob/master/src/js/source.js"
click node_media "https://github.com/sampotts/plyr/blob/master/src/js/media.js"
click node_events "https://github.com/sampotts/plyr/blob/master/src/js/listeners.js"
click node_storage "https://github.com/sampotts/plyr/blob/master/src/js/storage.js"
click node_html5 "https://github.com/sampotts/plyr/blob/master/src/js/html5.js"
click node_youtube "https://github.com/sampotts/plyr/blob/master/src/js/plugins/youtube.js"
click node_vimeo "https://github.com/sampotts/plyr/blob/master/src/js/plugins/vimeo.js"
click node_ui "https://github.com/sampotts/plyr/blob/master/src/js/ui.js"
click node_controls "https://github.com/sampotts/plyr/blob/master/src/js/controls.js"
click node_captions "https://github.com/sampotts/plyr/blob/master/src/js/captions.js"
click node_fullscreen "https://github.com/sampotts/plyr/blob/master/src/js/fullscreen.js"
click node_support "https://github.com/sampotts/plyr/blob/master/src/js/support.js"
click node_ads "https://github.com/sampotts/plyr/blob/master/src/js/plugins/ads.js"
click node_thumbnails "https://github.com/sampotts/plyr/blob/master/src/js/plugins/preview-thumbnails.js"
click node_utils "https://github.com/sampotts/plyr/blob/master/src/js/utils/elements.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_plyr,node_config,node_source,node_media,node_events,node_storage,node_utils,node_media_element toneBlue
class node_html5,node_youtube,node_vimeo toneAmber
class node_ui,node_controls,node_captions,node_fullscreen,node_support toneMint
class node_ads,node_thumbnails,node_streaming toneRose
class node_integrator,node_youtube_service,node_vimeo_service,node_ima toneIndigo
```

## Components

### Player Core

- [Player API](https://github.com/sampotts/plyr/blob/master/src/js/plyr.js): `src/js/plyr.js`
- [Configuration](https://github.com/sampotts/plyr/blob/master/src/js/config/defaults.js): `src/js/config/defaults.js`
- [Source Handling](https://github.com/sampotts/plyr/blob/master/src/js/source.js): `src/js/source.js`
- [Media State](https://github.com/sampotts/plyr/blob/master/src/js/media.js): `src/js/media.js`
- [Listeners & Events](https://github.com/sampotts/plyr/blob/master/src/js/listeners.js): `src/js/listeners.js`
- [Preferences](https://github.com/sampotts/plyr/blob/master/src/js/storage.js): `src/js/storage.js`
- [DOM & Browser Utilities](https://github.com/sampotts/plyr/blob/master/src/js/utils/elements.js): `src/js/utils/elements.js`

### Media Providers

- [HTML5 Playback](https://github.com/sampotts/plyr/blob/master/src/js/html5.js): `src/js/html5.js`
- [YouTube Adapter](https://github.com/sampotts/plyr/blob/master/src/js/plugins/youtube.js): `src/js/plugins/youtube.js`
- [Vimeo Adapter](https://github.com/sampotts/plyr/blob/master/src/js/plugins/vimeo.js): `src/js/plugins/vimeo.js`

### Playback Experience

- [Player UI](https://github.com/sampotts/plyr/blob/master/src/js/ui.js): `src/js/ui.js`
- [Controls & Menus](https://github.com/sampotts/plyr/blob/master/src/js/controls.js): `src/js/controls.js`
- [Captions](https://github.com/sampotts/plyr/blob/master/src/js/captions.js): `src/js/captions.js`
- [Fullscreen](https://github.com/sampotts/plyr/blob/master/src/js/fullscreen.js): `src/js/fullscreen.js`
- [Browser Support](https://github.com/sampotts/plyr/blob/master/src/js/support.js): `src/js/support.js`

### Optional Extensions

- [Ad Playback](https://github.com/sampotts/plyr/blob/master/src/js/plugins/ads.js): `src/js/plugins/ads.js`
- [Preview Thumbnails](https://github.com/sampotts/plyr/blob/master/src/js/plugins/preview-thumbnails.js): `src/js/plugins/preview-thumbnails.js`
- **Streaming Integrations**

### Other components

- **Integrator**
- **Browser Media**
- **YouTube**
- **Vimeo**
- **Google IMA**

## Connections

- 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