執行期相依資源
本頁列出 FlexPlyr 載入時自動注入 <head> 的外部資源，以及它們對版本、CSP 與 SSR 的影響。
注入的資源
腳本一執行就在 <head> 插入下列 preconnect、preload 與實際載入標籤（src/js/main.js），與頁面上建立幾個播放器、使用哪種來源無關：
| 資源 | URL | 用途 |
|---|---|---|
| 面板樣式 | https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@latest/dist/FlexPlyr.css |
容器、面板與風格樣式 |
| 圖示字型 | https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined... |
面板按鈕圖示（play_arrow、volume_up 等字型連字） |
| YouTube SDK | https://www.youtube.com/iframe_api（async） |
YT.Player |
| Vimeo SDK | https://player.vimeo.com/api/player.js（async） |
Vimeo.Player |
<script>
const urls = [...document.head.querySelectorAll('link[rel="stylesheet"], script[src]')]
.map((e) => e.href || e.src)
.filter((u) => !u.includes("/dist/FlexPlyr.js"));
urls.forEach((u) => console.log(u));
</script>
影響
| 面向 | 說明 |
|---|---|
| 樣式版本 | 樣式固定取自 @latest，即使腳本鎖定 @2.2.9，樣式仍會隨新版發佈改變 |
| 只用 HTML5 時 | YouTube 與 Vimeo SDK 仍會下載 |
| CSP | script-src 需允許 cdn.jsdelivr.net（若從 CDN 載入）、www.youtube.com、player.vimeo.com；style-src 需允許 cdn.jsdelivr.net、fonts.googleapis.com；font-src 需允許 fonts.gstatic.com；frame-src 需允許 www.youtube.com、player.vimeo.com |
| SSR | 模組載入即存取 document.head 與 navigator.userAgent，在 Node.js 匯入會失敗，需只在瀏覽器端動態載入 |
| SDK 時序 | SDK 以 async 載入，建立 YouTube／Vimeo 播放器前需等待，見媒體來源 |