# pardnchiu/FlexPlyr

> FlexPlyr is a JavaScript video player library by Pardn Chiu (邱敬幃) that drives HTML5 video, audio, YouTube, and Vimeo through one API with themed panels.

Maintained by 邱敬幃 Pardn Chiu (pardnchiu), Pardn Co., Ltd. Source: https://github.com/pardnchiu/FlexPlyr

Full text in one file: [English](https://flexplyr.pardn.io/llms-full.txt) · [中文](https://flexplyr.pardn.io/zh/llms-full.txt)

## Overview

- [Home](https://flexplyr.pardn.io/index.md): FlexPlyr is a JavaScript video player library by Pardn Chiu (邱敬幃) that drives HTML5 video, audio, YouTube, and Vimeo through one API with themed panels.
- [Getting Started](https://flexplyr.pardn.io/getting-started.md): Load FlexPlyr from jsDelivr or npm, mount a player on an element ID, and wait for the ready callback before calling player methods.

## Concepts

- [Architecture](https://flexplyr.pardn.io/architecture.md): How FlexPlyr is layered: load-time head injection, the FPlyr core, per-source adapters, the playerPanel control bar, and when callbacks.
- [Media Sources](https://flexplyr.pardn.io/media-sources.md): Choose between video, audio, youtube, and vimeo sources in FlexPlyr, the priority order when several are set, and waiting for the YouTube and Vimeo SDKs.
- [Lifecycle Events](https://flexplyr.pardn.io/lifecycle-events.md): FlexPlyr when callbacks — ready, playing, pause, end, destroyed — when each fires, per-source triggers, and why ready runs before state is set.
- [Mobile Fullscreen](https://flexplyr.pardn.io/mobile-fullscreen.md): How FlexPlyr handles fullscreen: desktop requestFullscreen on the container, and a hidden second player on iOS and Android that syncs time, volume, and speed.

## Control Panel

- [Panel Themes](https://flexplyr.pardn.io/panel-themes.md): The five FlexPlyr panel themes — default, minimal, classic, retro, simple — set with option.panelType and applied through the data-type attribute.
- [Panel Controls](https://flexplyr.pardn.io/panel-controls.md): Every FlexPlyr panelItem control — play, progress, time, timeMini, volume, volumeMini, rate, full — with ordering rules and the showThumb option.

## Reference

- [Configuration](https://flexplyr.pardn.io/configuration.md): Full FlexPlyr constructor config: id, source fields, option defaults, when callbacks, detached containers, and the current volume and mute caveats.
- [Instance API](https://flexplyr.pardn.io/instance-api.md): FlexPlyr instance methods and properties: play, pause, isPaused, isMuted, destroy, body, option, panel, stateFull, plus globals and ESM exports.
- [Runtime Dependencies](https://flexplyr.pardn.io/runtime-dependencies.md): The stylesheet, Material Symbols font, and YouTube and Vimeo SDK scripts FlexPlyr injects into the page head on load, and what that means for CSP and SSR.
- [Deprecations](https://flexplyr.pardn.io/deprecations.md): FlexPlyr options and globals scheduled for removal in 3.x — type, panel, volume, mute, event, PDPlayer, player — with their replacements.

## Symbols

Exported symbol -> page that documents it.

- `FPlyr` (src/js/model): [Instance API](https://flexplyr.pardn.io/instance-api.md), [Getting Started](https://flexplyr.pardn.io/getting-started.md)
- `PDPlayer` (src/js/model): [Instance API](https://flexplyr.pardn.io/instance-api.md)

## 中文文件

- [首頁](https://flexplyr.pardn.io/zh/index.md): FlexPlyr 是邱敬幃（Pardn Chiu）開發的 JavaScript 影片播放器套件，單一 API 驅動 HTML5、YouTube 與 Vimeo。
- [快速開始](https://flexplyr.pardn.io/zh/getting-started.md): 從 jsDelivr 或 npm 載入 FlexPlyr，以元素 ID 掛載播放器，並在 ready 回呼之後再呼叫播放器方法。
- [架構](https://flexplyr.pardn.io/zh/architecture.md): FlexPlyr 的分層：載入時注入 head 資源、FPlyr 核心、各來源轉接、playerPanel 控制列與 when 回呼。
- [媒體來源](https://flexplyr.pardn.io/zh/media-sources.md): FlexPlyr 的 video、audio、youtube、vimeo 四種來源、優先順序，以及等待 YouTube／Vimeo SDK 的方式。
- [生命週期事件](https://flexplyr.pardn.io/zh/lifecycle-events.md): FlexPlyr 的 when 回呼 ready、playing、pause、end、destroyed 觸發時機，以及 ready 早於狀態設定的原因。
- [行動裝置全螢幕](https://flexplyr.pardn.io/zh/mobile-fullscreen.md): FlexPlyr 的全螢幕處理：桌面版對容器呼叫 requestFullscreen，行動裝置以隱藏的第二個播放器同步進度、音量與倍速。
- [面板風格](https://flexplyr.pardn.io/zh/panel-themes.md): FlexPlyr 五種面板風格：預設、minimal、classic、retro、simple，以 option.panelType 設定。
- [面板控制元件](https://flexplyr.pardn.io/zh/panel-controls.md): FlexPlyr 八種 panelItem 控制元件（play、progress、time、volume、rate、full 等）、排序與 showThumb。
- [設定選項](https://flexplyr.pardn.io/zh/configuration.md): FlexPlyr 建構子完整設定：id、來源欄位、option 預設值、when 回呼、獨立容器，以及目前 volume 與 mute 的行為限制。
- [實例 API](https://flexplyr.pardn.io/zh/instance-api.md): FlexPlyr 實例方法 play、pause、isPaused、isMuted、destroy，屬性 body、option、panel，與全域匯出。
- [執行期相依資源](https://flexplyr.pardn.io/zh/runtime-dependencies.md): FlexPlyr 載入時注入 head 的樣式表、圖示字型與 YouTube／Vimeo SDK，及其對 CSP 與 SSR 的影響。
- [棄用項目](https://flexplyr.pardn.io/zh/deprecations.md): FlexPlyr 預計於 3.x 移除的設定與全域名稱（type、panel、event、PDPlayer 等）及替代寫法。

## Optional

- [Release Notes](https://flexplyr.pardn.io/released/index.md): pardnchiu/FlexPlyr changelog by version