架構

本頁以一張概覽圖說明 FlexPlyr 的分層，以及各層之間的依賴方向。

系統概覽

graph TB
    subgraph 載入階段
        MAIN[main.js] --> HEAD[注入 head 資源]
    end
    subgraph 執行階段
        CFG[FPlyr 設定] --> CORE[FPlyr 核心]
        CORE --> SRC{來源分派}
        SRC --> H5[HTML5 video / audio]
        SRC --> YT[YT.Player]
        SRC --> VM[Vimeo.Player]
        CORE --> PANEL[playerPanel]
        H5 & YT & VM --> STATE[狀態處理]
        STATE --> PANEL
        STATE --> WHEN[when 回呼]
    end
    HEAD -.SDK.-> YT
    HEAD -.SDK.-> VM

分層

層	檔案	職責
載入引導	`src/js/main.js`	宣告共用常數、偵測 `isMobile`／`isIOS`，並把樣式、圖示字型、YouTube 與 Vimeo SDK 注入 `<head>`
核心	`src/js/model/player.js`	`FPlyr` 類別：合併設定、建立容器、依來源初始化、把四種來源的操作統一成同一組方法
控制面板	`src/js/model/playerPanel.js`	依 `panelItem` 建立控制元件，提供 `setCurrent`、`setVolume`、`show`／`hide` 等更新介面
輔助函式	`src/js/function/*.js`	`createElement`（以 `tag#id.class` 建立元素）、`UUID`（YouTube 容器 ID）、`getTime`（時間格式化）

FPlyr 與 playerPanel 類別位於 src/js/model。src/js/model/videoPlayer.js 會被打包進 dist/，但沒有任何程式引用它。

跨層原則

來源差異只存在於核心：每個操作（播放、跳轉、音量、倍速）都以 #isVideo／#isAudio／#isYoutube／#isVimeo 分流，面板與 when 回呼不需要知道來源類型。
狀態由事件驅動：面板圖示與進度只在來源事件（playing、pause、ended）與 100ms 輪詢中更新，不由按鈕點擊直接寫入。
行動裝置以第二個播放器處理全螢幕：見行動裝置全螢幕。

延伸閱讀

模組級的詳細圖、序列圖與狀態機在 doc/architecture.zh.md。