Architecture

This page shows how FlexPlyr is layered and which way each layer depends on the next, in a single overview diagram.

System Overview

graph TB
    subgraph Load Phase
        MAIN[main.js] --> HEAD[Inject head Assets]
    end
    subgraph Runtime Phase
        CFG[FPlyr Config] --> CORE[FPlyr Core]
        CORE --> SRC{Source Dispatch}
        SRC --> H5[HTML5 video / audio]
        SRC --> YT[YT.Player]
        SRC --> VM[Vimeo.Player]
        CORE --> PANEL[playerPanel]
        H5 & YT & VM --> STATE[State Handlers]
        STATE --> PANEL
        STATE --> WHEN[when Callbacks]
    end
    HEAD -.SDK.-> YT
    HEAD -.SDK.-> VM

Layers

Layer	File	Responsibility
Bootstrap	`src/js/main.js`	Declares shared constants, detects `isMobile`/`isIOS`, and injects the stylesheet, icon font, and YouTube and Vimeo SDKs into `<head>`
Core	`src/js/model/player.js`	The `FPlyr` class: merges config, builds the container, initializes the source, and exposes one method set for all four sources
Control panel	`src/js/model/playerPanel.js`	Builds controls from `panelItem` and exposes update hooks such as `setCurrent`, `setVolume`, and `show`/`hide`
Helpers	`src/js/function/*.js`	`createElement` (builds elements from `tag#id.class`), `UUID` (YouTube container IDs), `getTime` (time formatting)

The FPlyr and playerPanel classes live in src/js/model. src/js/model/videoPlayer.js is bundled into dist/, but nothing references it.

Cross-Cutting Principles

Source differences live only in the core: every operation (play, seek, volume, speed) branches on #isVideo/#isAudio/#isYoutube/#isVimeo, so the panel and when callbacks never need to know the source type.
State is event-driven: panel icons and progress update only from source events (playing, pause, ended) and a 100 ms poll, never directly from button clicks.
Mobile fullscreen uses a second player: see Mobile Fullscreen.

Architecture

System Overview

Layers

Cross-Cutting Principles

Further Reading