文件 2.2.8
首頁 GitHub

設定選項

本頁列出 new FPlyr(config) 的所有設定欄位、預設值，以及目前 volume／mute 設定的實際行為。

config

欄位 型別 必要 說明
id string 否 既有元素的 ID，該元素會成為播放器容器；未指定或找不到時建立新的 div.FPlyr，需手動插入 player.body
video string 擇一 影片 URL
youtube string 擇一 YouTube 影片 ID
vimeo string 擇一 Vimeo 影片 ID
audio string 擇一 音訊 URL
option object 否 面板與播放設定，見下表
when object 否 生命週期回呼，見生命週期事件

多個來源同時設定時的優先順序見媒體來源。

option

欄位 型別 預設值 說明
panelType string "" 面板風格，見面板風格
panelItem string[] ["play", "progress", "time", "volumeMini", "rate", "full"] 控制元件，見面板控制元件
showThumb boolean true 是否顯示滑桿拖曳把手
volume number 100 初始音量（0–100），見下方限制
mute boolean false 初始靜音，見下方限制

不指定 id

未指定 id 時播放器不會出現在頁面上，直到你插入 player.body：

<section id="mount" style="height: 240px"></section>
<script>
  const player = new FPlyr({
    video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
    option: { panelType: "simple" },
  });
  console.log("attached before append:", player.body.isConnected);
  document.getElementById("mount").appendChild(player.body);
  console.log("attached after append:", player.body.isConnected);
  console.log("class:", player.body.className);
</script>
即時預覽 · @pardnchiu/flexplyr@2.2.9

無效設定

config 不是物件時，建構子以 console.log 輸出 config: 不存在。 後直接返回，不拋出例外，實例沒有 body：

<script>
  const player = new FPlyr("player");
  console.log("body:", String(player.body));
</script>
即時預覽 · @pardnchiu/flexplyr@2.2.9

volume 與 mute 的目前行為

<div style="height: 200px"><div id="a"></div></div>
<div style="height: 200px"><div id="b"></div></div>
<script>
  const a = new FPlyr({
    id: "a",
    video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
    option: { volume: 30, mute: true },
    when: { ready: () => setTimeout(() => console.log("option only ->", a.option.volume, a.isMuted())) },
  });
  const b = new FPlyr({
    id: "b",
    video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
    volume: 30,
    mute: true,
    option: { volume: 30, mute: true },
    when: { ready: () => setTimeout(() => console.log("option + legacy ->", b.option.volume, b.isMuted())) },
  });
</script>
即時預覽 · @pardnchiu/flexplyr@2.2.9

相關頁面

EN