快速開始
本頁說明如何載入 FlexPlyr、在頁面上掛載第一個播放器，並在播放器就緒後呼叫它的方法。
前置需求
- 支援 ES2022 私有欄位（
#field）與 CSS:has()的現代瀏覽器 - 頁面可連線至
cdn.jsdelivr.net、fonts.googleapis.com、www.youtube.com、player.vimeo.com（見執行期相依資源） - 僅能在瀏覽器執行：模組一載入就存取
document與navigator
安裝
jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@2.2.9/dist/FlexPlyr.js"></script>
載入後即有全域 FPlyr。
npm
npm i @pardnchiu/flexplyr
import { FPlyr } from "@pardnchiu/flexplyr/dist/FlexPlyr.esm.js";
package.json 的 main 指向 dist/FlexPlyr.js（非模組建置，掛載 window.FPlyr）；要用具名匯出需引入 dist/FlexPlyr.esm.js。
第一個播放器
指定既有元素的 id 與一個媒體來源。播放器會把該元素變成 .FPlyr 容器，寬高填滿父元素，因此父元素需要有高度。
<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",
when: {
ready: () => setTimeout(() => console.log("ready, paused:", player.isPaused())),
},
});
</script>
在 ready 之後才呼叫方法
when.ready 在播放器內部設定來源旗標之前觸發（src/js/model/player.js:395），因此在 ready 回呼中同步呼叫 isPaused()、isMuted()、play() 會得到 undefined 或沒有作用。把呼叫延到下一個 task（如 setTimeout）即可取得正確結果，詳見生命週期事件。