實例 API

本頁列出 FPlyr 實例的公開方法與屬性，以及全域名稱與 ESM 匯出。

方法

方法	回傳	說明
`play(isFull?)`	`void`	播放並把播放按鈕切為暫停圖示；`isFull` 為 `true` 時於行動裝置改由全螢幕播放器播放
`pause(isFull?)`	`void`	暫停並把按鈕切回播放圖示
`isPaused(isFull?)`	`boolean`	是否暫停；YouTube 以播放器狀態是否為 `1` 判斷
`isMuted(isFull?)`	`boolean`	是否靜音
`destroy()`	`void`	釋放播放器，順序見下方

這些方法依就緒時才設定的來源旗標分流，在 when.ready 觸發前或於 ready 內同步呼叫會回傳 undefined、不作用於媒體（見生命週期事件）。

destroy() 的釋放順序

移除容器的 mousemove／mouseleave 處理
停止進度輪詢
Vimeo／YouTube 呼叫 SDK 的 destroy()（YouTube 連同全螢幕播放器）；HTML5 媒體先暫停再清空 src
從 DOM 移除容器
when.destroyed 為函式時呼叫它

屬性

屬性	型別	說明
`body`	DOM 元素	播放器容器（`.FPlyr`）
`option`	`object`	合併後的 `option`；就緒後 `volume` 會跟著音量操作更新
`when`	`object`	生命週期回呼（`when` 或舊版 `event`）
`panel`	`playerPanel`	控制面板實例，可取得 `buttonPlay`、`inputProgress` 等元素
`stateFull`	`boolean`	是否處於全螢幕
`video`／`youtube`／`vimeo`／`audio`	`string`	實際採用的來源；未採用者為 `undefined`

範例

<div style="height: 240px"><div id="player"></div></div>
<button id="destroy">destroy()</button>
<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("isPaused:", player.isPaused());
        console.log("isMuted:", player.isMuted());
        console.log("option:", JSON.stringify(player.option));
      }),
      destroyed: () => console.log("destroyed, in DOM:", player.body.isConnected),
    },
  });
  document.getElementById("destroy").onclick = () => player.destroy();
</script>

即時預覽 · @pardnchiu/flexplyr@2.2.9

全域與匯出

名稱	來源	說明
`window.FPlyr`	`dist/FlexPlyr.js`	主要類別
`window.PDPlayer`	`dist/FlexPlyr.js`	`FPlyr` 的舊名，預計 `3.x` 移除
`FPlyr`	`dist/FlexPlyr.esm.js`	ESM 具名匯出
`player`	`dist/FlexPlyr.esm.js`	`FPlyr` 的舊名，預計 `3.x` 移除

import { FPlyr } from "@pardnchiu/flexplyr/dist/FlexPlyr.esm.js";

實例 API

方法

destroy() 的釋放順序

屬性

範例

全域與匯出

相關頁面