面板控制元件
本頁說明 option.panelItem 可用的八種控制元件、渲染順序，以及控制拖曳把手的 showThumb。
元件一覽
預設值為 ["play", "progress", "time", "volumeMini", "rate", "full"]。
| 值 | 元件 | 行為 |
|---|---|---|
play |
播放／暫停按鈕 | 切換播放狀態；圖示隨 playing／pause 事件更新 |
progress |
進度條 | 拖曳時先暫停並即時更新時間，停止拖曳 500ms 後跳轉，再 500ms 後續播 |
time |
目前時間／總長度 | 例：0:12/0:30；minimal 風格不渲染 |
timeMini |
目前時間 | 例：0:12；minimal 風格不渲染 |
volume |
靜音按鈕＋常駐音量條 | 按鈕切換靜音；音量拉到 0 視為靜音，從 0 取消靜音時回到 50 |
volumeMini |
收合式音量按鈕 | 點擊展開音量條，滑鼠離開 1 秒後收合；按鈕本身不切換靜音 |
rate |
倍速按鈕 | 依序切換 1 → 1.25 → 1.5 → 2 → 0.5 → 1 |
full |
全螢幕按鈕 | 見行動裝置全螢幕；音訊來源不渲染 |
時間格式依總長自動切換：未滿 1 分鐘為 0:ss，未滿 1 小時為 mm:ss，其餘為 hh:mm:ss。
順序與重複
元件依陣列順序插入面板，因此陣列順序即畫面順序。同一個值寫兩次會渲染兩個元件，但只有最後一個會綁定事件，應避免重複。
showThumb
option.showThumb 寫入容器的 data-thumb；為 false 時樣式表隱藏進度條與音量條的拖曳把手，只保留進度色條。
範例
<div style="height: 240px"><div id="player"></div></div>
<script>
const player = new FPlyr({
id: "player",
video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
option: {
panelItem: ["play", "progress", "timeMini", "volume", "rate", "full"],
showThumb: false,
},
});
console.log("buttonPlay:", player.panel.buttonPlay != null);
console.log("inputVolume:", player.panel.inputVolume != null);
console.log("inputVolumeMini:", player.panel.inputVolumeMini != null);
console.log("data-thumb:", player.body.dataset.thumb);
</script>
版本差異
2.1.0 起 time 改為完整格式（0:00/0:30），原本的簡短格式改名為 timeMini。